Chapter 4: Pages — Parent & Children Pages

Ringkasan

Video ini membahas cara membuat child pages (sub-halaman) di WordPress, menampilkan breadcrumb box yang dinamis, dan menggunakan if statement, variabel, serta Post ID untuk membuat navigasi parent-child yang otomatis.

---

Step-by-Step

Step 1: Buat Child Pages di WordPress Admin

1. Admin → Pages → Add New
2. Buat page "Our History" → isi dummy content
3. Di panel kanan, Page Attributes → Parent Page = "About Us" → Publish
4. Buat page "Our Goals" → Parent Page = "About Us" → Publish
5. Buat page "Cookie Policy" → Parent Page = "Privacy Policy" → Publish

Hasil: Sekarang "About Us" punya 2 child pages (Our History, Our Goals), dan "Privacy Policy" punya 1 child page (Cookie Policy).

Step 2: Konsep Post ID

Setiap post/page di WordPress memiliki numerical ID unik.

Cara melihatnya:

• Admin → Pages → klik page → lihat URL di address bar
• Contoh: ...post=16 artinya page tersebut ID-nya 16

Fungsi WordPress	Kegunaan
get_the_ID()	Mengembalikan (return) ID dari current page/post yang sedang dilihat
wp_get_post_parent_id(get_the_ID())	Mengembalikan ID parent dari page/post tertentu. Return 0 jika tidak punya parent
get_the_title($id)	Mengembalikan title dari page/post berdasarkan ID (bukan current post)
get_permalink($id)	Mengembalikan URL lengkap dari page/post berdasarkan ID

Step 3: If Statement di PHP

// Syntax dasar
if (kondisi) {
    // kode yang dijalankan jika kondisi TRUE
}

Evaluasi truthy/falsy:

• 0 → false
• Angka selain 0 (1, 16, 24...) → true
• null → false

Ini penting karena wp_get_post_parent_id() return 0 jika page TIDAK punya parent → otomatis false.

Step 4: Implementasi Breadcrumb Dinamis di page.php

📄 page.php — versi dengan breadcrumb:

<?php
get_header();

while(have_posts()) {
    the_post();
    
    // Simpan parent ID ke variabel agar bisa dipakai berulang
    $theParent = wp_get_post_parent_id(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 
      // Breadcrumb hanya tampil di CHILD page
      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 } ?>

      <!-- Menu sidebar (akan diaktifkan di lesson berikutnya) -->

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

<?php }

get_footer();
?>

Penjelasan Kode Key

Variabel $theParent:

$theParent = wp_get_post_parent_id(get_the_ID());

• Menyimpan ID parent dari current page ke variabel
• Jika page punya parent → nilainya angka (misal: 16)
• Jika page TIDAK punya parent → nilainya 0
• Variabel dipakai di 3 tempat: if condition, get_the_title(), get_permalink()

Kondisi if:

if ($theParent) { ... }

• $theParent = 0 → false → breadcrumb TIDAK ditampilkan (parent page)
• $theParent = 16 → true → breadcrumb ditampilkan (child page)

Link ke parent page:

<a href="<?php echo get_permalink($theParent); ?>">
  Back to <?php echo get_the_title($theParent); ?>
</a>

• get_permalink($theParent) → URL parent page (misal: /about-us)
• get_the_title($theParent) → Title parent page (misal: "About Us")

---

Perbedaan the_title() vs get_the_title()

Fungsi	Behavior	Perlu echo?
the_title()	Output title dari current post/page di loop	❌ Tidak, langsung echo
get_the_title($id)	Return title dari page/post manapun berdasarkan ID	✅ Ya, perlu echo

---

Poin Penting

• Setiap post/page punya unique numerical ID — bisa dilihat di URL saat edit
• wp_get_post_parent_id() return 0 jika page tidak punya parent → berguna untuk if statement
• Gunakan variabel ($theParent) untuk menyimpan nilai yang dipakai berulang — mengurangi typing dan membuat kode lebih clean
• Breadcrumb box hanya ditampilkan di child pages berkat if statement
• Semua teks di breadcrumb (title dan link) dibuat dinamis — otomatis menyesuaikan parent page