Pada modul ini kita akan mengubah file front-page.php untuk menampilkan Event custom post type yang dibuat pada modul sebelumnya.
Hampir mirip dengan menampilkan post biasa, hanya parameter post_type diisi dengan ‘event’. Lihat code dibawah (code hanya pada bagian yang diubah saja, bukan keseluruhan isi front-page.php, file lengkap front-page.php bisa dilihat dibawah).
<h2 class="headline headline--small-plus t-center">Upcoming Events</h2>
<?php
$homeEvents = new WP_Query(array(
'post_per_page' => 2,
'post_type' => 'event'
));
while($homeEvents->have_posts()){
$homeEvents->the_post();
?>
<div class="event-summary">
<a class="event-summary__date t-center" href="<?php the_permalink();?>">
<span class="event-summary__month"><?php the_time('M'); ?></span>
<span class="event-summary__day"><?php the_time('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
}
?>
<p class="t-center no-margin"><a href="<?php echo get_post_type_archive_link('event'); ?>" class="btn btn--blue">View All Events</a></p>
Bila kita click link untuk membuka single post dari event, maka halaman yang dicari tidak ada. WordPress akan menampilkan kurang lebih seperti gambar dibawah.
Jangan khawatir, yang perlu dilakukan adalah kita rebuild permalink melalui Dashboard. Buka menu Settings – Permalink. Anda tidak perlu mengubah, cukup tekan tombol Save Changes dibawah.
WordPress akan memberikan pesan bahwa permalink sudah diupdate.
Jika Anda buka kembali post event, maka event akan ditampilkan dengan baik. Namun saat ini WordPress masih menggunakan file template single.php. Dapat dilihat pada bagian breadcrumb, tertulis Blog Home. Dan pada bagian category tidak tampil.
Untuk menampilkan custom post type tertentu, kita perlu membuat file baru untuk menangani event post type. Format nama file harus single-nama_custom_post_type.php, dalam hal ini single-event.php.
Isi single-event.php akan mirip dengan single.php, kita hanya akan mengubah pada bagian breadcrumb saja.
<?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 site_url('/events'); ?>"><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>
</div>
<?php
}
get_footer();
?>
<p class="t-center no-margin"><a href="<?php echo get_post_type_archive_link('event'); ?>" class="btn btn--blue">View All Events</a></p>
Pada breadcrumb berwarna kuning, kita hanya akan tampilkan judul event.
Untuk breadcrumb berwarna biru, diubah menjadi Events Home. Perlu diperhatikan, saat ini kita belum memberitahu WordPress bagaimana menghandle archive dengan custom post type event.
Kita buka lagi untuk melakukan registrasi post type pada folder mu-plugins, yaitu my-custom-posttype.php (nama bisa berbeda). Kita tambahkan beberapa parameter baru pada fungsi register_post_type. Berikut perubahan yang dilakukan:
rewrite, untuk mengubah permalink dari event menjadi events.
has_archive, untuk memberitahu WordPress bahwa custom type event memiliki archive page.
<?php
function post_types(){
register_post_type('event', array(
'rewrite' => array('slug' => 'events'),
'has_archive' => true,
'public' => 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-alt'
));
}
add_action('init', 'post_types');
?>
Anda perlu melakukan permalink rebuild kembali untuk permalink, karena kita melakukan rewrite permalink pada file diatas.
Jika Anda ingin file template khusus untuk menangani archive dari custom post type, sama seperti single-event.php, kita bisa juga buat untuk archive-event.php (Perhatikan penamaan harus dengan forma archive-nama_custom_post_type.php
Silakan bereksperimen untuk isi file, pada tutorial akan mengcopy dari archive.php dengan mengubah beberapa bagian tertentu saja dengan menggunakan desain dari front-page.php.
<?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">All Events</h1>
<div class="page-banner__intro"><p>Event penting didunia IT</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"><?php the_time('M'); ?></span>
<span class="event-summary__day"><?php the_time('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();
?>
</div>
<?php
get_footer();
?>
<?php
get_header();
?>
<div class="page-banner">
<div class="page-banner__bg-image" style="background-image: url(<?php echo get_theme_file_uri('images/library-hero.jpg'); ?>);"></div>
<div class="page-banner__content container t-center c-white">
<h1 class="headline headline--large">Welcome!</h1>
<h2 class="headline headline--medium">We think you’ll like it here.</h2>
<h3 class="headline headline--small">Why don’t you check out the <strong>major</strong> you’re interested in?</h3>
<a href="#" class="btn btn--large btn--blue">Find Your Major</a>
</div>
</div>
<div class="full-width-split group">
<div class="full-width-split__one">
<div class="full-width-split__inner">
<h2 class="headline headline--small-plus t-center">Upcoming Events</h2>
<?php
$homeEvents = new WP_Query(array(
'post_per_page' => 2,
'post_type' => 'event'
));
while($homeEvents->have_posts()){
$homeEvents->the_post();
?>
<div class="event-summary">
<a class="event-summary__date t-center" href="<?php the_permalink();?>">
<span class="event-summary__month"><?php the_time('M'); ?></span>
<span class="event-summary__day"><?php the_time('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
}
?>
<p class="t-center no-margin"><a href="<?php echo get_post_type_archive_link('event'); ?>" class="btn btn--blue">View All Events</a></p>
</div>
</div>
<div class="full-width-split__two">
<div class="full-width-split__inner">
<h2 class="headline headline--small-plus t-center">From Our Blogs</h2>
<?php
$homePosts = new WP_Query(array(
'posts_per_page' => 2
));
while($homePosts->have_posts()){
$homePosts->the_post();
?>
<div class="event-summary">
<a class="event-summary__date event-summary__date--beige t-center" href="<?php the_permalink(); ?>">
<span class="event-summary__month"><?php the_time('M'); ?></span>
<span class="event-summary__day"><?php the_time('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">Read more</a></p>
</div>
</div>
<?php
}
wp_reset_postdata();
?>
<p class="t-center no-margin"><a href="<?php echo site_url('\blog') ?>" class="btn btn--yellow">View All Blog Posts</a></p>
</div>
</div>
</div>
<div class="hero-slider">
<div class="hero-slider__slide" style="background-image: url(<?php echo get_theme_file_uri('images/bus.jpg'); ?>);">
<div class="hero-slider__interior container">
<div class="hero-slider__overlay">
<h2 class="headline headline--medium t-center">Free Transportation</h2>
<p class="t-center">All students have free unlimited bus fare.</p>
<p class="t-center no-margin"><a href="#" class="btn btn--blue">Learn more</a></p>
</div>
</div>
</div>
<div class="hero-slider__slide" style="background-image: url(<?php echo get_theme_file_uri('images/apples.jpg'); ?>);">
<div class="hero-slider__interior container">
<div class="hero-slider__overlay">
<h2 class="headline headline--medium t-center">An Apple a Day</h2>
<p class="t-center">Our dentistry program recommends eating apples.</p>
<p class="t-center no-margin"><a href="#" class="btn btn--blue">Learn more</a></p>
</div>
</div>
</div>
<div class="hero-slider__slide" style="background-image: url(<?php echo get_theme_file_uri('images/bread.jpg') ?>);">
<div class="hero-slider__interior container">
<div class="hero-slider__overlay">
<h2 class="headline headline--medium t-center">Free Food</h2>
<p class="t-center">Fictional University offers lunch plans for those in need.</p>
<p class="t-center no-margin"><a href="#" class="btn btn--blue">Learn more</a></p>
</div>
</div>
</div>
</div>
<?php
get_footer();
?>