Menampilkan Custom Post Types di Frontend

Tujuan

Menampilkan event posts secara dinamis di halaman depan (home page), membuat template untuk single event, dan mengaktifkan archive untuk events.

---

Bagian 1: Menampilkan Events di Home Page

Custom Query di front-page.php

Buka file front-page.php di folder tema. Cari area "Upcoming Events", lalu tambahkan custom query:

<?php
  $homepageEvents = new WP_Query(array(
    'posts_per_page' => 2,
    'post_type' => 'event'
  ));

  while ($homepageEvents->have_posts()) {
    $homepageEvents->the_post(); ?>

    <div class="event-summary">
      <a class="event-summary__date t-center" href="#">
        <span class="event-summary__month">Mar</span>
        <span class="event-summary__day">25</span>
      </a>
      <div class="event-summary__content">
        <h5 class="event-summary__title headline headline--tiny">
          <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </h5>
        <p><?php echo wp_trim_words(get_the_content(), 18); ?></p>
      </div>
    </div>

  <?php }
?>

Bagian Kode	Penjelasan
new WP_Query(array(...))	Membuat custom query — WordPress tidak otomatis query event di home page
'posts_per_page' => 2	Ambil hanya 2 post
'post_type' => 'event'	Hanya ambil post dari CPT "event"
$homepageEvents->have_posts()	Cek apakah masih ada post untuk di-loop
$homepageEvents->the_post()	Persiapkan data untuk setiap post
the_permalink()	URL permalink ke single event
the_title()	Judul event
wp_trim_words(get_the_content(), 18)	Ambil 18 kata pertama dari konten

---

Bagian 2: Template Single Event

Masalah Permalink

Saat pertama kali klik link event, muncul "Page Not Found". Solusi:

1. Buka WordPress Admin → Settings → Permalinks
2. Klik Save Changes (tanpa mengubah apapun)
3. WordPress akan rebuild struktur permalink-nya

⚠️ Ini perlu dilakukan setiap kali kamu mendaftarkan custom post type baru.

Membuat File single-event.php

WordPress otomatis mencari file single-{post_type}.php untuk single post view. Buat file baru di folder tema:

File: single-event.php

Copy isi dari single.php sebagai template awal, lalu modifikasi:

<?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.jpg') ?>);">
  </div>
  <div class="page-banner__content container container--narrow">
    <h1 class="page-banner__title"><?php the_title(); ?></h1>
    <div class="page-banner__intro">
      <p><?php the_title(); ?></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 get_post_type_archive_link('event'); ?>">
        Events Home
      </a>
      <span class="metabox__main"><?php the_title(); ?></span>
    </p>
  </div>

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

<?php get_footer(); ?>

Perubahan dari single.php	Penjelasan
Meta box: hapus author, date, category	Event tidak perlu info author
Ganti teksnya dengan the_title()	Tampilkan judul event di meta box
"Blog Home" → "Events Home"	Sesuaikan label link
get_post_type_archive_link('event')	Ambil URL archive event secara dinamis

---

Bagian 3: Mengaktifkan Archive Events

Tambah has_archive di Register Post Type

Buka wp-content/mu-plugins/university-post-types.php:

<?php

function university_post_types() {
  register_post_type('event', array(
    'has_archive' => true,
    'rewrite' => array('slug' => 'events'),
    'public' => true,
    'show_in_rest' => true,
    'labels' => array(
      'name' => 'Events',
      'add_new_item' => 'Add New Event',
      'edit_item' => 'Edit Event',
      'all_items' => 'All Events',
      'singular_name' => 'Event'
    ),
    'menu_icon' => 'dashicons-calendar'
  ));
}

add_action('init', 'university_post_types');

Parameter	Nilai	Penjelasan
has_archive	true	Mengaktifkan halaman archive di URL /event
rewrite	array('slug' => 'events')	Ubah URL dari /event (singular) menjadi /events (plural)

💡 Setelah menambah has_archive atau mengubah rewrite, jangan lupa ke Settings → Permalinks → Save Changes untuk rebuild permalink.

Membuat File archive-event.php

WordPress otomatis mencari archive-{post_type}.php. Buat file baru di tema:

File: archive-event.php

Copy isi dari archive.php sebagai template awal, lalu modifikasi:

<?php get_header(); ?>

<div class="page-banner">
  <div class="page-banner__content container container--narrow">
    <h1 class="page-banner__title">All Events</h1>
    <div class="page-banner__intro">
      <p>See what is going on in our world.</p>
    </div>
  </div>
</div>

<div class="container container--narrow page-section">
  <?php
    while (have_posts()) {
      the_post(); ?>

      <div class="event-summary">
        <a class="event-summary__date t-center" href="<?php the_permalink(); ?>">
          <span class="event-summary__month">Mar</span>
          <span class="event-summary__day">25</span>
        </a>
        <div class="event-summary__content">
          <h5 class="event-summary__title headline headline--tiny">
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
          </h5>
          <p><?php echo wp_trim_words(get_the_content(), 18); ?></p>
        </div>
      </div>

    <?php } ?>

    <?php echo paginate_links(); ?>
</div>

<?php get_footer(); ?>

---

Pola Template WordPress untuk Custom Post Types

Theme Folder/
├── single.php          ← Default untuk semua single posts
├── single-event.php    ← Khusus single event post
├── archive.php         ← Default untuk semua archives
├── archive-event.php   ← Khusus event archive

Hirarki Template	Prioritas
single-{post_type}.php	Lebih tinggi dari single.php
archive-{post_type}.php	Lebih tinggi dari archive.php

Ini bagian dari WordPress Template Hierarchy — WordPress akan selalu gunakan file yang paling spesifik.