Menggunakan Custom Page

Pada modul ini kita akan membuat custom page yang isinya untuk menampilkan event yang sudah terlewat. Pendekatanya seperti archive, namun kali ini kita gunakan template dari page.php.

Langkah pertama buat dulu page dengan content blank. Perhatikan slug name dari page dibuat.

Lalu buat file php template dengan nama file page-slug_name_page_yang_dibuat.php. Pada tutorial maka nama file php akan page-past-events.php

Isi dari page-past-events.php akan menggunakan archive-event.php. Dengan beberapa perubahan yaitu

• Menambahkan custom query.
• Mengubah pagination menjadi custom pagination.

<?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">Past Events</h1>
    <div class="page-banner__intro"><p>Rekapitulasi Event Yang Sudah Berlalu</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
            ))
        ));

    while($pastEvents->have_posts()){
        $pastEvents->the_post();
?>
    <div class="event-summary">
    <a class="event-summary__date t-center" href="<?php the_permalink();?>">
              <span class="event-summary__month">
              <?php                 
                if (get_field('event_date') != NULL) {
                  $eventDate =  DateTime::createFromFormat('d/m/Y', get_field('event_date'));
                }else{
                  $eventDate = DateTime::createFromFormat('d/m/Y', '01/01/2020');;
                }
                
                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(), 15) ?> <a href="<?php the_permalink();?>" class="nu gray">Learn more</a></p>
    </div>
    </div>
<?php
  }
  
  echo paginate_links(array(
      'total' => $pastEvents->max_num_pages
  ));
?>
</div>

<?php
    get_footer();
?>

Setelah page-past-events.php berjalan dengan baik, berikutnya kita perlu menambahkan link untuk mengakses halaman ini. Dapat ditambahkan pada archive-event.php. Pada tutorial link akan ditambahkan dibawah sesudah pagination.

// file archive-event.php
// code hanya diambil sebagian, bukan seluruh isi archive-event.php

  echo paginate_links();
?>
<hr class="section-break">
<p>Untuk event yang sudah berlalu silakan <a href="<?php echo site_url('/past-events');?>">Click disini</a></p>
</div>

<?php
    get_footer();
?>