Chapter 4: Pages — Menu of Child Page Links

Ringkasan

Video ini membahas cara membuat sidebar menu dinamis yang menampilkan link ke semua child pages. Kita belajar tentang associative array, wp_list_pages(), conditional logic menggunakan if/else, dan get_pages().

Step-by-Step

Step 1: Konsep Associative Array

Sebelum implementasi, perlu memahami associative array — array yang memiliki key-value pair.

Array biasa:

php

$animals = array('cat', 'dog', 'pig');
// Index: 0 = cat, 1 = dog, 2 = pig

Associative array:

php

$animalSounds = array(
    'cat' => 'meow',
    'dog' => 'bark',
    'pig' => 'oink'
);

echo $animalSounds['dog']; // Output: bark

Syntax	Arti
`'cat' => 'meow'`	Key "cat" memiliki value "meow"
`=>`	Operator "equals" / "maps to"
`$animalSounds['dog']`	Akses value dari key "dog"

Step 2: Uncomment Sidebar Menu di `page.php`

Hapus comment  dari div page-links yang sebelumnya di-comment:

html

<div class="page-links">
  <h2 class="page-links__title"><a href="#">About Us</a></h2>
  <ul class="min-list">
    <!-- link-link child page akan ditaruh di sini -->
  </ul>
</div>

Step 3: Gunakan `wp_list_pages()` untuk Generate Child Links

Ganti list items yang hardcoded dengan function wp_list_pages():

php

<ul class="min-list">
  <?php
  wp_list_pages(array(
      'title_li' => NULL,
      'child_of' => $findChildrenOf,
      'sort_column' => 'menu_order'
  ));
  ?>
</ul>

Parameter associative array:

Parameter	Nilai	Penjelasan
`'title_li'`	`NULL`	Menghilangkan teks default "Pages" yang ditampilkan oleh function
`'child_of'`	ID page	Hanya tampilkan child pages dari page dengan ID ini
`'sort_column'`	`'menu_order'`	Urutkan berdasarkan field "Order" di Page Attributes (bukan default alphabetical)

Step 4: Buat Logic untuk Menentukan ID yang Benar

Problem: child_of butuh ID yang konsisten — harus selalu berisi ID parent page, baik saat kita di parent page maupun di child page.

Solusi — if/else statement:

php

<?php
// Jika di child page → cari children dari PARENT page
// Jika di parent page → cari children dari CURRENT page
if ($theParent) {
    $findChildrenOf = $theParent;
} else {
    $findChildrenOf = get_the_ID();
}
?>

Kondisi	`$theParent`	`$findChildrenOf`
Di child page (Our History)	`16` (ID About Us)	`16` → tampilkan children About Us
Di parent page (About Us)	`0` (tidak ada parent)	`get_the_ID()` → ID page saat ini (16)

Step 5: Buat Header Link Dinamis

Ganti teks "About Us" yang hardcoded di header sidebar:

php

<h2 class="page-links__title">
  <a href="<?php echo get_permalink($theParent); ?>">
    <?php echo get_the_title($theParent); ?>
  </a>
</h2>

Catatan: get_the_title(0) otomatis di-interpret WordPress sebagai "title current page". Jadi ketika $theParent = 0 (di parent page), function ini menampilkan title page tersebut.

Beberapa page tidak punya parent dan tidak punya children (contoh: "Test Page 123"). Menu sidebar harus disembunyikan.

Gunakan get_pages() untuk cek apakah page punya children:

php

<?php
$testArray = get_pages(array(
    'child_of' => get_the_ID()
));
?>

Function	Kegunaan
`get_pages()`	Sama seperti `wp_list_pages()` tapi return data alih-alih output HTML
Jika ada children → return collection (truthy)
Jika tidak ada children → return null/false (falsy)

Wrap menu dengan if statement:

php

<?php if ($theParent or $testArray) { ?>
  <div class="page-links">
    ...menu content...
  </div>
<?php } ?>

Kondisi	Arti
`$theParent`	Page ini adalah child page (punya parent)
`or $testArray`	ATAU page ini adalah parent page (punya children)
Keduanya false	Page bukan parent dan bukan child → menu disembunyikan

Step 7: Atur Urutan Child Pages

Di WordPress Admin → Pages → edit child page → Page Attributes → Order:

Our History → Order: 1
Our Goals → Order: 2

Parameter 'sort_column' => 'menu_order' di wp_list_pages() akan mengurutkan berdasarkan nilai ini.

Kode Lengkap `page.php`

php

<?php
get_header();

while(have_posts()) {
    the_post();
    $theParent = wp_get_post_parent_id(get_the_ID());
    
    // Cek apakah current page punya children
    $testArray = get_pages(array(
        'child_of' => get_the_ID()
    ));
    
    // Tentukan ID untuk child_of parameter
    if ($theParent) {
        $findChildrenOf = $theParent;
    } else {
        $findChildrenOf = get_the_ID();
    }
    ?>

    <div class="page-banner">
      <div class="page-banner__bg-image" style="background-image: url(<?php echo get_theme_file_uri('/images/ocean.jpeg'); ?>)"></div>
      <div class="page-banner__content container container--narrow">
        <h1 class="page-banner__title"><?php the_title(); ?></h1>
        <div class="page-banner__intro">
          <p>Don't forget to replace me later.</p>
        </div>
      </div>
    </div>

    <div class="container container--narrow page-section">

      <?php if ($theParent) { ?>
        <div class="metabox metabox--position-up metabox--with-home-link">
          <p>
            <a class="metabox__blog-home-link" href="<?php echo get_permalink($theParent); ?>">
              <i class="fa fa-home" aria-hidden="true"></i> Back to <?php echo get_the_title($theParent); ?>
            </a>
            <span class="metabox__main"><?php the_title(); ?></span>
          </p>
        </div>
      <?php } ?>

      <?php if ($theParent or $testArray) { ?>
        <div class="page-links">
          <h2 class="page-links__title">
            <a href="<?php echo get_permalink($theParent); ?>">
              <?php echo get_the_title($theParent); ?>
            </a>
          </h2>
          <ul class="min-list">
            <?php
            wp_list_pages(array(
                'title_li' => NULL,
                'child_of' => $findChildrenOf,
                'sort_column' => 'menu_order'
            ));
            ?>
          </ul>
        </div>
      <?php } ?>

      <div class="generic-content">
        <?php the_content(); ?>
      </div>
    </div>

<?php }

get_footer();
?>

Poin Penting

Associative array ('key' => 'value') digunakan oleh banyak WordPress function sebagai format argument
wp_list_pages() generate HTML list items untuk pages — terima associative array sebagai parameter
if/else statement menentukan ID yang tepat berdasarkan apakah user di parent page atau child page
get_pages() berguna untuk cek apakah page punya children (return data atau null)
Operator or memungkinkan multiple conditions — menu tampil jika salah satu kondisi true
'sort_column' => 'menu_order' → urutkan berdasarkan field Order di Page Attributes

Chapter 4: Pages — Menu of Child Page Links ​

Ringkasan ​

Step-by-Step ​

Step 1: Konsep Associative Array ​

Step 2: Uncomment Sidebar Menu di page.php ​

Step 3: Gunakan wp_list_pages() untuk Generate Child Links ​

Step 4: Buat Logic untuk Menentukan ID yang Benar ​

Step 5: Buat Header Link Dinamis ​

Step 6: Sembunyikan Menu Jika Page Bukan Parent/Child ​

Step 7: Atur Urutan Child Pages ​

Kode Lengkap page.php ​

Poin Penting ​