Skip to content

Ikhtisar Chapter 5: Building the Blog Section

Apa yang Dipelajari?

Cara membangun sistem blog lengkap di WordPress — dari listing, single post, archive, custom query, sampai navigasi — sehingga pengunjung bisa membaca, menjelajah, dan menemukan artikel dengan mudah.


Poin Utama

1. Memisahkan Homepage & Blog Listing

WordPress perlu tahu halaman mana yang jadi homepage dan mana yang jadi blog. Caranya:

  1. Buat 2 page kosong di admin: "Home" dan "Blog"
  2. Settings → Reading → pilih "A static page" → Homepage = Home, Posts page = Blog

Setelah itu:

  • front-page.php → menangani homepage
  • index.php → menangani blog listing (/blog)

2. Template Files & Fungsinya

FileDipakai untukURL contoh
front-page.phpHomepage/
index.phpBlog listing/blog
single.phpSatu blog post/2024/01/01/judul-post
page.phpHalaman statis/about-us
archive.phpArsip (kategori, author, tanggal)/category/awards

3. Blog Listing (index.php)

Di dalam loop, setiap post menampilkan:

ElemenFungsi WordPress
Judul (link)the_title() + the_permalink()
Authorthe_author_posts_link()
Tanggalthe_time('n.j.y')
Kategoriecho get_the_category_list(', ')
Cuplikanthe_excerpt()
Paginationecho paginate_links()

4. Single Blog Post (single.php)

Mirip dengan blog listing, tapi:

  • Pakai the_content() (isi lengkap), bukan the_excerpt() (cuplikan)
  • Ada tombol "Blog Home" untuk kembali ke /blog
  • Menampilkan info author, tanggal, dan kategori di bagian atas

5. Archive Pages (archive.php)

Satu file menangani semua jenis arsip:

FungsiKegunaan
the_archive_title()Otomatis tampilkan judul sesuai jenis arsip ("Category: Awards", "Author: Brad", dll)
the_archive_description()Tampilkan deskripsi kategori atau bio author

Body content-nya sama persis dengan index.php (loop yang sama).


6. Custom Query (WP_Query)

Untuk menampilkan konten di luar query default (misal: 2 post terbaru di homepage):

php
$homepagePosts = new WP_Query(array(
    'posts_per_page' => 2
));

while($homepagePosts->have_posts()) {
    $homepagePosts->the_post();
    // tampilkan post...
}
wp_reset_postdata(); // WAJIB dipanggil setelah selesai
Hal PentingPenjelasan
new WP_Query(array(...))Buat query baru dengan parameter sendiri
$object->have_posts()Pakai method dari object, bukan fungsi global
wp_trim_words(get_the_content(), 18)Potong konten jadi 18 kata saja
wp_reset_postdata()Reset data setelah custom query — jangan lupa!

7. Navigasi Highlighting

Agar link "Blog" di menu menyala saat di halaman blog-related:

php
<?php if (get_post_type() == 'post') echo 'class="current-menu-item"'; ?>

get_post_type() return 'post' di semua halaman blog (listing, single, archive) — satu kondisi untuk semua.


Satu Kalimat

Chapter ini membangun seluruh sistem blog dari nol — listing, single post, archive, custom query, dan navigasi — semuanya dinamis dan otomatis menyesuaikan konten dari database WordPress.