Chapter 5: Building the Blog Section — Blog Listing Page (index.php vs front-page.php)

Ringkasan

Video ini membahas cara memisahkan homepage dan blog listing page di WordPress menggunakan Reading Settings, membuat file front-page.php, dan membangun template blog listing di index.php dengan loop, excerpt, pagination links, dan meta information.

---

Step-by-Step

Step 1: Buat 2 Page Baru di WordPress Admin

1. Admin → Pages → Add New → judul: "Home" → Publish (body kosong)
2. Admin → Pages → Add New → judul: "Blog" → Publish (body kosong)

Step 2: Atur Reading Settings

1. Admin → Settings → Reading
2. Ubah "Your homepage displays" dari "Your latest posts" ke "A static page"
3. Homepage = "Home"
4. Posts page = "Blog"
5. Save Changes

Hasil:

• Root domain (/) → menampilkan page "Home"
• /blog → menampilkan blog listing

Step 3: Buat front-page.php

1. Buka index.php → Select All → Copy
2. Buat file baru: front-page.php → Paste → Save
3. Sekarang front-page.php menangani homepage, dan index.php bebas untuk blog listing

Template Hierarchy Update:

URL	File yang digunakan	Fungsi
/ (homepage)	front-page.php	Custom homepage template
/blog	index.php	Blog listing
/about-us	page.php	Individual page
/2017/06/08/post-name	single.php	Individual blog post
/category/awards	archive.php (nanti)	Category archive

Step 4: Bangun Blog Listing Template di index.php

Hapus semua isi index.php lama dan tulis dari awal:

📄 index.php — versi lengkap:

<?php
get_header(); ?>

  <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">Welcome to our Blog!</h1>
      <div class="page-banner__intro">
        <p>Keep up with our latest news.</p>
      </div>
    </div>
  </div>

  <div class="container container--narrow page-section">
    <?php
    while(have_posts()) {
        the_post(); ?>
        <div class="post-item">
          <h2 class="headline headline--medium headline--post-title">
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
          </h2>
          <div class="metabox">
            <p>Posted by <?php the_author_posts_link(); ?> on <?php the_time('n.j.y'); ?> in <?php echo get_the_category_list(', '); ?></p>
          </div>
          <div class="generic-content">
            <?php the_excerpt(); ?>
            <p><a class="btn btn--blue" href="<?php the_permalink(); ?>">Continue reading &raquo;</a></p>
          </div>
        </div>
    <?php }
    echo paginate_links();
    ?>
  </div>

<?php get_footer(); ?>

Penjelasan Setiap Bagian

Page Banner:

• Title dan subtitle di-hardcode karena halaman blog listing tidak perlu dinamis
• Background image menggunakan get_theme_file_uri()

The Loop:

Kode	Fungsi
while(have_posts())	Loop selama masih ada blog posts
the_post()	Siapkan data untuk post saat ini
the_title()	Output judul post
the_permalink()	Output URL post (untuk link)
the_author_posts_link()	Output nama author sebagai link ke author archive
the_time('n.j.y')	Output tanggal posting dengan format custom
get_the_category_list(', ')	Return daftar kategori (dipisah koma) — perlu echo
the_excerpt()	Output cuplikan singkat dari konten post

Format Tanggal the_time():

Kode	Output	Keterangan
F	January	Nama bulan lengkap
M	Jan	3 huruf bulan
n	1	Nomor bulan tanpa leading zero
j	8	Tanggal tanpa leading zero
Y	2017	Tahun 4 digit
y	17	Tahun 2 digit

Referensi lengkap: Google "WordPress the_time" → Codex → "Formatting Date and Time"

Pagination:

echo paginate_links();

• Otomatis membuat link navigasi halaman (1, 2, 3... Next, Previous)
• Hanya tampil jika jumlah post melebihi setting "Blog pages show at most" di Settings → Reading (default: 10)

Penting tentang get_the_category_list():

• Dimulai dengan get_ → return value → perlu echo
• Argumen ', ' = separator jika post punya multiple categories

Step 5: Setting Author Display Name

1. Admin → Users → klik profile
2. Nickname → isi nama yang diinginkan (contoh: "Brad")
3. Display name publicly as → pilih nickname yang baru
4. Update Profile

---

Poin Penting

• Reading Settings menentukan halaman mana yang jadi homepage dan blog listing
• front-page.php selalu menangani homepage — mengalahkan index.php di template hierarchy
• index.php sekarang menjadi template untuk blog listing (/blog)
• the_excerpt() menampilkan cuplikan singkat — cocok untuk listing
• paginate_links() otomatis membuat pagination — tidak perlu logic manual
• the_author_posts_link() membuat nama author yang clickable ke author archive
• Format tanggal the_time() sangat customizable dengan kode-kode format