Chapter 5: Building the Blog Section — Blog: Few Quick Edits & Improvements

Ringkasan

Video terakhir Chapter 5 berisi perbaikan kecil pada blog section: memperbaiki link "View All Blog Posts" di homepage, memperbaiki link Blog di header navigation, dan menambahkan current page highlighting untuk link Blog menggunakan get_post_type().

---

Step-by-Step

1. Fix Link "View All Blog Posts" di Homepage

📄 front-page.php — cari tombol "View all blog posts":

Sebelum:

<a href="#" class="btn btn--yellow btn--large">View all blog posts</a>

Sesudah:

<a href="<?php echo site_url('/blog'); ?>" class="btn btn--yellow btn--large">View all blog posts</a>

Kode	Fungsi
site_url('/blog')	Generate URL absolut ke halaman blog
Mengganti #	Link sebelumnya hanya placeholder, sekarang mengacu ke /blog

2. Fix Link Blog di Header Navigation

📄 header.php — cari link Blog di nav:

Sebelum:

<li><a href="#">Blog</a></li>

Sesudah:

<li><a href="<?php echo site_url('/blog'); ?>">Blog</a></li>

3. Tambahkan Current Page Highlighting untuk Blog Link

Saat user berada di halaman blog-related (blog listing, individual post, category archive, author archive), link Blog di header harus menyala kuning.

📄 header.php — pada <li> Blog:

<li <?php if (get_post_type() == 'post') echo 'class="current-menu-item"'; ?>>
  <a href="<?php echo site_url('/blog'); ?>">Blog</a>
</li>

Penjelasan:

Kode	Fungsi
get_post_type()	Return post type dari konten yang sedang di-query
== 'post'	Cek apakah post type-nya adalah "post" (blog post)
'class="current-menu-item"'	Class CSS yang membuat link menyala kuning

Mengapa get_post_type() lebih baik daripada alternatif lain?

Pendekatan	Problem
is_home()	Hanya true di blog listing — false di individual post dan archives
is_single()	Hanya true di individual post — false di blog listing dan archives
is_archive()	Hanya true di archive screens — false di blog listing dan individual post
get_post_type() == 'post' ✅	True di SEMUA halaman blog-related karena semuanya berhubungan dengan post type "post"

Testing:

Halaman	get_post_type()	Highlight?
/blog	'post'	✅ Ya
/2017/06/08/post-name	'post'	✅ Ya
/category/awards	'post'	✅ Ya
/author/brad	'post'	✅ Ya
/about-us	'page'	❌ Tidak
/ (homepage)	'page'	❌ Tidak

---

Recap: Post Type Concept

WordPress memiliki 2 post type bawaan:

Post Type	Digunakan untuk
'post'	Blog posts — ditampilkan di blog listing, archives
'page'	Halaman statis — About Us, Privacy Policy, dll

Di chapter selanjutnya, kita akan belajar membuat custom post types (Events, Programs, Professors, Campuses) — ini yang membuat WordPress sangat powerful dan fleksibel.

---

Gambaran Header Navigation Lengkap

<nav class="main-navigation">
  <ul>
    <li <?php if (is_page('about-us') or wp_get_post_parent_id(0) == 16) echo 'class="current-menu-item"'; ?>>
      <a href="<?php echo site_url('/about-us'); ?>">About Us</a>
    </li>
    <li <?php if (get_post_type() == 'post') echo 'class="current-menu-item"'; ?>>
      <a href="<?php echo site_url('/blog'); ?>">Blog</a>
    </li>
  </ul>
</nav>

Link	Kondisi Highlight
About Us	is_page('about-us') ATAU parent page ID = 16
Blog	get_post_type() == 'post'

---

Poin Penting

• site_url('/blog') → cara standar membuat link ke blog page (absolut URL)
• get_post_type() → return post type dari konten saat ini — satu function bisa handle semua blog-related pages
• 'post' = blog posts, 'page' = halaman statis — nanti akan ada custom post types
• Class current-menu-item → CSS class standar WordPress untuk nav highlighting
• Chapter berikutnya akan membahas custom post types — langkah besar dari dasar ke intermediate WordPress development