Kursus WordPress

Appearance

Chapter 4: Pages — Navigation Menus ​

Ringkasan ​

Video ini (termasuk bagian Continued) membahas dua pendekatan untuk navigation menu di WordPress: (1) Dynamic WordPress Menus yang dikelola dari admin, dan (2) Custom HTML Menus dengan highlighting menggunakan PHP. Instruktur menunjukkan keduanya, lalu memilih pendekatan custom HTML untuk project ini.

Approach 1: Dynamic WordPress Menus ​

Step 1: Register Menu Location di functions.php ​

📄 functions.php — di dalam function university_features():

php
function university_features() {
    register_nav_menu('headerMenuLocation', 'Header Menu Location');
    register_nav_menu('footerLocationOne', 'Footer Location One');
    register_nav_menu('footerLocationTwo', 'Footer Location Two');
    add_theme_support('title-tag');
}

add_action('after_setup_theme', 'university_features');
FungsiParameter 1Parameter 2Penjelasan
register_nav_menu()'headerMenuLocation''Header Menu Location'Mendaftarkan lokasi menu baru ke theme
Variable name (bebas)Human-readable label (tampil di admin)

Hasil: Menu Appearance → Menus muncul di WordPress admin.

Step 2: Buat Menu di WordPress Admin ​

  1. Admin → Appearance → Menus
  2. Buat menu baru: "My Main Header Menu"
  3. Pilih pages yang mau ditampilkan (About Us, Privacy Policy, dll)
  4. Di Menu Settings → Display Location → centang Header Menu Location
  5. Save Menu

Step 3: Output Menu di Template ​

📄 header.php — ganti hardcoded <ul> dengan:

php
<?php
wp_nav_menu(array(
    'theme_location' => 'headerMenuLocation'
));
?>

📄 footer.php — untuk kedua kolom footer:

php
<!-- Footer kolom 1 -->
<?php
wp_nav_menu(array(
    'theme_location' => 'footerLocationOne'
));
?>

<!-- Footer kolom 2 -->
<?php
wp_nav_menu(array(
    'theme_location' => 'footerLocationTwo'
));
?>
FungsiParameterPenjelasan
wp_nav_menu()Associative arrayOutput menu WordPress ke template
'theme_location'Nama variable dari register_nav_menu()Menentukan lokasi menu mana yang ditampilkan

Keunggulan Dynamic Menus ​

  • Current page highlighting otomatis — WordPress menambahkan class current-menu-item ke link aktif
  • Drag-and-drop ordering di admin
  • User non-teknis bisa edit menu tanpa kode
  • Cocok untuk theme generic / theme marketplace

Kapan Gunakan Dynamic Menus? ​

SituasiRekomendasi
Theme untuk marketplace (dijual/dibagikan)✅ Dynamic menus — WAJIB
Theme custom untuk 1 client❌ HTML custom lebih baik — kontrol penuh

Approach 2: Custom HTML Menus (Pilihan Instruktur) ​

Setelah mendemonstrasikan dynamic menus, instruktur menghapus semua kode dynamic menu dan kembali ke hardcoded HTML. Alasan: kontrol lebih presisi untuk project custom.

Current Page Highlighting dengan is_page() ​

Problem: Dengan HTML custom, tidak ada otomatis highlighting untuk page yang sedang aktif.

Solusi — tambahkan class conditional di header.php:

php
<li <?php if (is_page('about-us') or wp_get_post_parent_id(0) == 16) echo 'class="current-menu-item"'; ?>>
  <a href="<?php echo site_url('/about-us'); ?>">About Us</a>
</li>

Breakdown kode:

BagianPenjelasan
is_page('about-us')Return true jika user sedang di page dengan slug "about-us"
orOperator OR — jika salah satu kondisi true, jalankan echo
wp_get_post_parent_id(0)Return ID parent dari current page. Argumen 0 = current page
== 16Cek apakah parent ID = 16 (ID About Us). Ganti 16 dengan ID About Us di website kamu
echo 'class="current-menu-item"'Output class CSS untuk highlighting jika kondisi true

Cara Kerja ​

Halaman yang dikunjungiis_page('about-us')wp_get_post_parent_id(0) == 16Hasil
About Us✅ true❌ false (parent = 0)Highlight ✅
Our History (child of About Us)❌ false✅ true (parent = 16)Highlight ✅
Privacy Policy❌ false❌ falseTidak highlight

Cara Menemukan ID Page ​

  1. Admin → Pages → klik page yang dimaksud
  2. Lihat URL address bar → ...post=16 → ID = 16

⚠️ ID bisa berbeda di setiap instalasi WordPress. Selalu cek ID di admin kamu sendiri.

If Statement Inline (Satu Baris) ​

Saat menulis if statement di dalam HTML attribute:

php
// Jika hanya satu baris → TIDAK perlu curly brackets {}
<?php if (is_page('about-us')) echo 'class="current-menu-item"'; ?>

// Jika multi-line → PERLU curly brackets {}
<?php if (is_page('about-us')) {
    echo 'class="current-menu-item"';
    echo ' id="special"';
} ?>

Setelah Cleanup — functions.php Tanpa Nav Menus ​

php
<?php

function university_files() {
    wp_enqueue_script('main-university-js', get_theme_file_uri('/build/index.js'), array('jquery'), '1.0', true);
    wp_enqueue_style('university_main_styles', get_theme_file_uri('/build/style-index.css'));
    wp_enqueue_style('university_extra_styles', get_theme_file_uri('/build/index.css'));
    wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
    wp_enqueue_style('custom-google-fonts', '//fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i|Roboto:100,300,400,400i,700,700i');
}

add_action('wp_enqueue_scripts', 'university_files');

function university_features() {
    add_theme_support('title-tag');
}

add_action('after_setup_theme', 'university_features');

register_nav_menu() lines dihapus karena instruktur memilih custom HTML menus.

Poin Penting ​

  • register_nav_menu() mendaftarkan lokasi menu baru → muncul di admin Appearance → Menus
  • wp_nav_menu() output menu ke template — terima associative array dengan theme_location
  • Dynamic menus otomatis tambahkan class current-menu-item → berguna untuk CSS highlighting
  • is_page('slug') return true/false → berguna untuk conditional class di custom HTML menus
  • wp_get_post_parent_id(0) → shortcut untuk "parent ID dari current page" (0 = current page)
  • Pilihan antara dynamic vs custom menus tergantung kebutuhan project
  • Selalu cek ID page di admin karena bisa berbeda di setiap instalasi WordPress