Ikhtisar Chapter 4: Pages
Apa yang Dipelajari?
Cara mengelola halaman (pages) di WordPress — mulai dari template interior, hubungan parent-child, sidebar menu dinamis, navigasi, sampai best practice HTML/responsive.
Poin Utama
1. Interior Page Template (page.php)
Semua halaman selain homepage menggunakan template page.php. Di dalamnya kita taruh:
| Elemen | Fungsi |
|---|---|
| Page Banner | Gambar latar + judul halaman (the_title()) |
| Content Area | Isi halaman dari editor (the_content()) |
| Sidebar Menu | Link ke child pages (opsional) |
Judul di tab browser diatur otomatis lewat functions.php:
add_theme_support('title-tag');Link antar halaman pakai site_url('/slug') — lebih aman daripada hardcode URL.
2. Parent & Child Pages
WordPress mendukung hierarki halaman: satu page bisa jadi "induk" dari page lain.
- Saat buat page di admin → di Page Attributes → pilih Parent Page
- Setiap page punya ID unik (lihat di URL saat edit, contoh:
post=16)
Fungsi penting:
| Fungsi | Kegunaan |
|---|---|
get_the_ID() | Ambil ID halaman saat ini |
wp_get_post_parent_id(get_the_ID()) | Ambil ID parent (return 0 kalau tidak punya parent) |
get_the_title($id) | Ambil judul page berdasarkan ID |
get_permalink($id) | Ambil URL page berdasarkan ID |
Breadcrumb (tombol "Back to ...") hanya tampil di child page berkat if statement:
$theParent = wp_get_post_parent_id(get_the_ID());
if ($theParent) { /* tampilkan breadcrumb */ }3. Echo vs Return di WordPress
Ini aturan sederhana yang WAJIB diingat:
| Prefix Fungsi | Perilaku | Perlu echo? | Contoh |
|---|---|---|---|
the_ | Langsung tampilkan ke halaman | Tidak | the_title() |
get_ | Hanya mengembalikan nilai | Ya | echo get_the_title(16) |
Kalau bingung, cek dokumentasi resmi di developer.wordpress.org.
4. Sidebar Menu Dinamis (Child Page Links)
Menu sidebar yang otomatis menampilkan daftar child pages:
wp_list_pages(array(
'title_li' => NULL, // hilangkan label "Pages"
'child_of' => $findChildrenOf, // ID parent
'sort_column' => 'menu_order' // urutan sesuai setting admin
));Logic menentukan ID yang benar:
- Di child page → tampilkan saudara-saudaranya (pakai ID parent)
- Di parent page → tampilkan anak-anaknya (pakai ID sendiri)
Menu disembunyikan total jika page bukan parent DAN bukan child:
if ($theParent or $testArray) { /* tampilkan menu */ }5. Best Practice HTML (header.php)
Empat perbaikan kecil tapi penting:
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body <?php body_class(); ?>>| Kode | Fungsi |
|---|---|
language_attributes() | Beri tahu browser bahasa website (misal lang="en-US") |
bloginfo('charset') | Atur encoding karakter (biasanya UTF-8) |
| Viewport meta tag | Agar website tampil benar di HP — wajib untuk responsive |
body_class() | Tambahkan class CSS otomatis sesuai halaman (berguna untuk styling) |
6. Navigation Menu — Dua Pendekatan
| Pendekatan | Kelebihan | Cocok untuk |
|---|---|---|
Dynamic Menu (register_nav_menu + wp_nav_menu) | Bisa dikelola dari admin, drag-and-drop | Theme yang dijual / dibagikan |
Custom HTML (hardcode + is_page()) | Kontrol penuh, lebih presisi | Theme custom untuk 1 project |
Highlighting halaman aktif pakai custom HTML:
<?php if (is_page('about-us') or wp_get_post_parent_id(0) == 16)
echo 'class="current-menu-item"'; ?>Satu Kalimat
Chapter ini mengajarkan cara membangun sistem halaman yang lengkap — dari template, hierarki parent-child, sidebar menu otomatis, sampai navigasi — semua dibuat dinamis agar konten apapun yang ditambahkan dari admin langsung tampil sempurna.