Pada modul ini, kita akan membuat custom field yang digunakan untuk membuat relasi antar post. Kita akan buat relasi antara event dengan program studi, contoh: event E berelasi dengan program P.
Untuk itu, kita buat dahulu custom post program. Tidak akan dibahas disini detailnya, karena sudah dibahas sebelumnya membuat custom post event. Lihat disini untuk tutorial membuat custom post type.
Perhatian, setelah selesai membuat custom post program, kita akan memiliki 2 file baru yaitu, single-program.php, archive-program.php. Untuk registrasi custom post program dilakukan pada file php yang berada dalam folder mu-plugins.
Setelah selesai proses diatas, buat beberapa program studi. Misalnya: Data Science, AI, Programming atau bebas sesuai keinginan Anda.
Setelah program ditambahkan, Kita akan buat relasi antara program dengan event. Jadi bila program studi P dibuka, bila ada event yang berhubungan, maka akan ditampilkan list event tersebut. Begitu juga jika event E dibuka, akan tampil program studi apa yang terhubung.
Untuk itu, kita perlu membuat custom field baru untuk mengatur relasi ini. Custom field yang dibuat diberi nama Related Program, dan hanya tampil pada tipe post event. Dengan setting field seperti gambar dibawah.
Perhatian, untuk tutorial custom field detail, silakan lihat modul Menggunakan Custom Field.
Langkah selanjutnya adalah edit event dan pilih related program. Jangan lupa untuk tekan tombol Update.
Langkah berikutnya adalah menampilkan related program pada event dengan menambahkan code berikut (lihat bagian $relatedProg = get_field(‘related_program’) dan seterusnya).
<?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.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>JANGAN LUPA NANTI DIGANTI</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'); ?>"><i class="fa fa-home" aria-hidden="true"></i> Events Home</a> <span class="metabox__main"><?php the_title(); ?></span></p>
</div>
<div class="generic-content"><?php the_content(); ?></div>
<?php
$relatedProg = get_field('related_program');
if ($relatedProg){
echo '<hr class="section-break">';
echo '<h2 class="headline headline--medium">Related Program</h2>';
echo '<ul class="link-list min-list">';
foreach ($relatedProg as $prog){ ?>
<li><a href="<?php echo get_the_permalink($prog); ?>"><?php echo get_the_title($prog); ?></a></li>
<?php
}
echo '</ul>';
}
?>
</div>
<?php
}
get_footer();
?>
Kita juga akan tampilkan event yang akan berlangsung pada halaman program. Buka single-program.php edit bagian sesudah perintah the_content(); menjadi seperti dibawah..
<?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.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>JANGAN LUPA NANTI DIGANTI</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('program'); ?>"><i class="fa fa-home" aria-hidden="true"></i> Programs Home</a> <span class="metabox__main"><?php the_title(); ?></span></p>
</div>
<div class="generic-content"><?php the_content(); ?></div>
<?php
$today = date('Ymd');
$relEvents = new WP_Query(array(
'post_per_page' => 2,
'post_type' => 'event',
'meta_key' => 'event_date',
'orderby' => 'meta_value_num',
'order' => 'ASC',
'meta_query' => array(
array(
'key' => 'event_date',
'compare' => '>=',
'value' => $today
),
array(
'key' => 'related_program',
'compare' => 'LIKE',
'value' => '"' . get_the_ID() . '"'
)
)
));
if ($relEvents->have_posts()){
echo '<hr class="section-break">';
echo '<h2 class="headline headline--medium">Upcoming event</h2><br/>';
while($relEvents->have_posts()){
$relEvents->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
if (has_excerpt()){
echo get_the_excerpt();
}else{
echo wp_trim_words(get_the_content(), 15) ;
}
?> <a href="<?php the_permalink();?>" class="nu gray">Learn more</a></p>
</div>
</div>
<?php
}
}
?>
</div>
<?php
}
get_footer();
?>
