Chapter 5: Building the Blog Section — Blog Continued (single.php)

Ringkasan

Video ini melanjutkan pembangunan blog section dengan memperbaiki template single.php (individual blog post), menambahkan banner area, meta box dengan author/date/category, dan link "Blog Home" yang mengarah ke halaman blog.

---

Step-by-Step

Step 1: Tambahkan Banner ke single.php

Copy div page-banner dari page.php ke single.php:

📄 single.php — versi lengkap:

<?php
get_header();

while(have_posts()) {
    the_post(); ?>

    <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">

      <div class="metabox metabox--position-up metabox--with-home-link">
        <p>
          <a class="metabox__blog-home-link" href="<?php echo site_url('/blog'); ?>">
            <i class="fa fa-home" aria-hidden="true"></i> Blog Home
          </a>
          <span class="metabox__main">
            Posted by <?php the_author_posts_link(); ?> on <?php the_time('n.j.y'); ?> in <?php echo get_the_category_list(', '); ?>
          </span>
        </p>
      </div>

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

    </div>

<?php }

get_footer();
?>

Penjelasan Key Changes

Meta Box — Blog Home Link:

<a href="<?php echo site_url('/blog'); ?>">
  <i class="fa fa-home" aria-hidden="true"></i> Blog Home
</a>

Kode	Fungsi
site_url('/blog')	Generate URL absolut ke halaman blog (misal: http://fictionaluniversity.local/blog)
<i class="fa fa-home">	Icon home dari Font Awesome
Teks "Blog Home"	Mengganti teks "Back to [parent page]" yang ada di page.php

Meta Box — Post Information:

Posted by <?php the_author_posts_link(); ?> 
on <?php the_time('n.j.y'); ?> 
in <?php echo get_the_category_list(', '); ?>

• Kode ini di-copy dari index.php — reuse dari blog listing template
• Menampilkan author (klikable), tanggal, dan kategori

Content Area:

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

• Menggunakan the_content() (bukan the_excerpt()) karena ini halaman full post
• Class generic-content memberikan styling yang proper untuk paragraf, heading, dll

Perbedaan single.php vs page.php

Aspek	single.php	page.php
Digunakan untuk	Individual blog posts	Individual pages (About Us, dll)
Meta box atas	Link ke Blog Home + author/date/category	Link ke parent page (breadcrumb)
Content	the_content() — full blog post	the_content() — full page
Sidebar menu	Tidak ada	Child page links (jika ada)

---

Alur Navigasi Blog

Homepage (front-page.php)
    ↓ klik "View All Blog Posts"
Blog Listing (/blog → index.php)
    ↓ klik judul post
Individual Post (/2017/06/08/post-name → single.php)
    ↓ klik "Blog Home"
Blog Listing (kembali)
    ↓ klik category link (misal: "awards")
Category Archive (/category/awards → archive.php nanti)

---

Poin Penting

• single.php untuk individual blog posts — berbeda dari page.php untuk pages
• Meta box di single.php berisi link ke blog home + info author/date/category
• site_url('/blog') selalu menghasilkan URL absolut — reliable di semua environment
• the_content() digunakan di single.php (full content), sedangkan the_excerpt() di index.php (listing)
• Kode meta info (author, date, category) bisa di-reuse dari index.php