Sebelum kita membahas apa itu custom field, akan lebih jelas jika kita bahas apa itu default field. Default field adalah field yang sudah disediakan, contoh title, content dan excerpt.
Sementara custom field adalah field yang dapat kita tambahkan sendiri. Custom field dapat ditambahkan pada default post-type (post dan page) ataupun pada custo post-type (pada tutorial ini adalah post-type Event).
Mari kita akan gunakan contoh post event untuk membahas modul ini. Saat ini, bila kita buka front-page.php, tanggal yang ditampilkan pada event adalah tanggal published dari event, bukan tanggal dari eventnya sendiri.
Tentu akan lebih tepat, bila saat membuat post event, kita bisa menginput tanggal event. Nah, disini guna dari custom field.
Custom field dapat kita develop sendiri, dengan menambahkan support pada post type registration (file fungsi yang kita buat pada folder mu-plugins). Kita bisa membuat program baru untuk menghandle custom field.
Namun untuk apa kita reinvent the wheel, bila sudah ada plugin yang dapat menangani custom field dengan baik. Plugin yang sudah dapat dikatakan standar dalam menangani custom field adalah
- Advanced Custom Field, By Elliot Condon
- CMB2 (Custom Metaboxes 2), By CMB2 team
Pada tutorial ini kita gunakan Advanced Custom Field.
- Buka menu Plugins – Add New.
- Pada search box isi Advanced Custom Field.
- Setelah plugin yang dimaksud tampil, tekan tombol Install Now.
- Aktifkan setelah proses instalasi selesai.
Mari kita buat custom field baru dengan pergi ke menu Custom Fields pada Dashboard. Tekan tombol Add New.
Langkah Membuat Custom Field Event Date
- Screen diatas adalah tempat kita membuat custom field baru. Silakan masukan Title custom field yang Anda inginkan. Pada tutorial digunakan Event Date.
- Table Location digunakan untuk mengatur dimana custom field akan ditampilkan. Pada tutorial ini kita akan tampilkan hanya pada post type Event.
- Kemudian tekan tombol Add Field untuk membuat custom field. (lihat gambar dibawah untuk panduan mengisi custom field date.)
- Isi Field Label, contoh Event Date.
- Field Name, akan otomatis dibuat oleh plugin. Biarkan saja default.
- Field Type, pilih date picker.
Sisanya biarkan default, atau bila Anda ingin bereksperimen silakan ubah settingnya.
- Setelah custom field selesai dibuat tekan tombol Publish.
Jika kita edit event yang ada, maka custom field akan tampil (lihat gambar dibawah). Jika kita click, maka akan ditampilkan date picker.
SIlakan isi tanggal event, tanggal ini akan digunakan untuk ditampilkan di file template front-page.php.
Buka file front-page.php dan ubah bagian menampilkan tanggal dan bulan pada bagian event.
<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>
Yang perlu diperhatikan adalah jika Anda mengubah format return pada saat membuat custom field. Sesuaikan format tersebut dengan format saat membuat DateTime pada program php.
Pada program codenya adalah $eventDate = DateTime::createFromFormat(‘d/m/Y’, get_field(‘event_date’)); Karena pada saat membuat custom field event date, tutorial menggunakan format ‘d/m/Y’
Ordering Menggunakan Custom Field
JIka Anda perhatikan, saat ini ordering dari event post yang ditampilkan pada front-page.php adalah berdasarkan published date. Untuk mengubah ordering, dapat dilakukan pada custom query pada front-page.php
Berikut custom query untuk melakukan orderby berdasarkan meta_value, dengan meta_key adalah event_date, dengan order ASC atau ascending.
Tentu tidak masuk akal menampilkan event yang sudah lewat. Kita dapat filter akan custom query mengambil data diatas tanggal hari ini. Lihat bagian meta_query.
$today = date('Ymd');
$homeEvents = 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
)
)
));
Berikut adalah code lengkap 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/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
$today = date('Ymd');
$homeEvents = 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
)
)
));
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
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
}
?>
<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
if (has_excerpt()){
echo get_the_excerpt();
}else{
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();
?>