Past Events Page (Custom Query Pagination)

Tujuan

Membuat halaman khusus Past Events yang menampilkan event-event yang sudah lewat, lengkap dengan pagination yang berfungsi.

---

Langkah 1: Buat Page di WordPress Admin

1. Pages → Add New
2. Title: Past Events
3. Biarkan konten kosong
4. Klik Publish

Slug otomatis: past-events

---

Langkah 2: Buat Template File

Buat file baru di folder tema: page-past-events.php

WordPress otomatis akan menggunakan file page-{slug}.php untuk halaman dengan slug tersebut.

Nama File	Cocok Untuk
page.php	Semua halaman (default)
page-past-events.php	Khusus halaman dengan slug past-events
page-about-us.php	Khusus halaman dengan slug about-us

💡 Ini bagian dari WordPress Template Hierarchy: page-{slug}.php memiliki prioritas lebih tinggi dari page.php.

---

Langkah 3: Kode Template + Custom Query

Salin isi archive-event.php sebagai template awal, lalu modifikasi:

File: page-past-events.php

<?php get_header(); ?>

<div class="page-banner">
  <div class="page-banner__content container container--narrow">
    <h1 class="page-banner__title">Past Events</h1>
    <div class="page-banner__intro">
      <p>A recap of our past events.</p>
    </div>
  </div>
</div>

<div class="container container--narrow page-section">

  <?php
    $today = date('Ymd');
    $pastEvents = new WP_Query(array(
      'paged' => get_query_var('paged', 1),
      'post_type' => 'event',
      'meta_key' => 'event_date',
      'orderby' => 'meta_value_num',
      'order' => 'ASC',
      'meta_query' => array(
        array(
          'key' => 'event_date',
          'compare' => '<',
          'value' => $today,
          'type' => 'numeric'
        )
      )
    ));

    while ($pastEvents->have_posts()) {
      $pastEvents->the_post();
      $eventDate = new DateTime(get_field('event_date')); ?>

      <div class="event-summary">
        <a class="event-summary__date t-center" href="<?php the_permalink(); ?>">
          <span class="event-summary__month"><?php echo $eventDate->format('M'); ?></span>
          <span class="event-summary__day"><?php echo $eventDate->format('d'); ?></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(array(
        'total' => $pastEvents->max_num_pages
      ));
    ?>

</div>

<?php get_footer(); ?>

---

Perbedaan dari Upcoming Events Query

Parameter	Upcoming Events	Past Events
compare	'>=' (≥ hari ini)	'<' (< hari ini)
posts_per_page	2 (di home page)	Default 10 (WordPress default)
paged	Tidak perlu	Wajib untuk pagination

---

Pagination dengan Custom Query

Masalah

Pagination di WordPress hanya otomatis berfungsi dengan default URL-based query. Untuk custom query (new WP_Query), perlu konfigurasi manual.

3 Hal yang Harus Dikonfigurasi

1. Parameter paged di Query

'paged' => get_query_var('paged', 1)

Bagian	Penjelasan
get_query_var('paged', 1)	Ambil nomor halaman dari URL (contoh: /past-events/page/2 → return 2)
, 1	Fallback ke halaman 1 jika tidak ada nomor di URL

2. Loop Menggunakan Custom Query Object

while ($pastEvents->have_posts()) {
  $pastEvents->the_post();
  // ...
}

Pastikan loop pakai $pastEvents->have_posts() dan $pastEvents->the_post(), bukan have_posts() / the_post() global.

3. Paginate Links dengan Total Pages

echo paginate_links(array(
  'total' => $pastEvents->max_num_pages
));

Parameter	Penjelasan
'total'	Jumlah total halaman hasil
$pastEvents->max_num_pages	Property dari WP_Query object yang menghitung total halaman

---

Alur Pagination Custom Query

URL: /past-events/page/2
         │
         ▼
get_query_var('paged', 1) → returns 2
         │
         ▼
WP_Query parameter 'paged' => 2
(skip 10 posts pertama, ambil 10 berikutnya)
         │
         ▼
paginate_links() menampilkan link navigasi
(butuh 'total' => max_num_pages dari query object)

---

Langkah 4: Tambahkan Link dari Events Archive

Di archive-event.php, tambahkan link ke Past Events di bagian bawah:

<?php echo paginate_links(); ?>

<hr class="section-break">
<p>Looking for a recap of past events? <a href="<?php echo site_url('/past-events'); ?>">Check out our past events archive</a>.</p>

Fungsi	Penjelasan
site_url('/past-events')	Generate URL absolut berdasarkan domain website

💡 Gunakan site_url() daripada hardcode URL — lebih aman jika WordPress dipasang di subdirectory.

---

Langkah 5: Update Header Navigation

Di header.php, update kondisi untuk events link agar menyala kuning di halaman Past Events juga:

<li <?php if (get_post_type() == 'event' OR is_page('past-events')) echo 'class="current-menu-item"'; ?>>
  <a href="<?php echo get_post_type_archive_link('event'); ?>">Events</a>
</li>

Kondisi	Kapan True
get_post_type() == 'event'	Di archive events atau single event
is_page('past-events')	Di halaman Past Events

---

Ringkasan File Baru & Perubahan

File	Aksi
page-past-events.php	BARU — template untuk halaman past events
archive-event.php	Tambah link ke past events di bawah
header.php	Tambah kondisi is_page('past-events') untuk navigasi