Featured image atau sering disebut thumbnail post dapat diakses dari navigasi disebelah kanan saat membuat posting wordpress.
Agar theme support featured image, pada functions.php harus dideklarasikan. Tambahkan perintah add_theme_support(‘post-thumbnails’); Jika Anda mengikuti tutorial dari awal, maka pada fungsi dibawah tambahkan perintah tersebut.
function aftertheme(){
register_nav_menu('headerMenu', 'Header Menu');
register_nav_menu('FooterMenu1', 'Footer Menu 1');
register_nav_menu('FooterMenu2', 'Footer Menu 2');
add_theme_support('title-tag');
add_theme_support('post-thumbnails');
}
add_action('after_setup_theme', 'aftertheme');
Untuk keperluan tutorial ini, coba buat post type baru yaitu Instructor. Jika lupa bagaimana cara membuat post type baru, lihat modul Custom Post Type.
Berikut isi dari registrasi post type Instructors. Jika Anda ingin memiliki archive page silakan tambahkan. Untuk tutorial ini, archive page tidak digunakan.
//post type Instructor
register_post_type('instructor', array(
'supports' => array('title', 'editor', 'thumbnail'),
'public' => true,
'labels' => array(
'name' => 'Instructors',
'add_new_item' => 'Add New Instructor',
'edit_item' => 'Edit Instructor',
'all_items' => 'All Instructors',
'singular_name' => 'Instructor'
),
'menu_icon' => 'dashicons-money'
));
Buat juga file template single-instructor.php untuk menampilkan halaman profil. Jangan lupa untuk melakukan save ulang permalink. Berikut isi code dari single-instructor.php. (Dicopy dari single-event.php dengan memodifikasi beberapa bagian.
<?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="generic-content">
<div class="row group">
<div class="one-third"><?php the_post_thumbnail(); ?></div>
<div class="two-thirds"><?php the_content(); ?></div>
</div>
</div>
<?php
$relatedProg = get_field('related_program');
if ($relatedProg){
echo '<hr class="section-break">';
echo '<h2 class="headline headline--medium">Program Studi</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();
?>
Ubah custom field related porgram untuk menghubungkan instructor dengan program studi.
Ubah juga file template single-program.php untuk menampilkan instructor yang mengajar program studi bersangkutan.
Perhatian, pada single-program.php digunakan fungsi wordpress baru, wp_reset_postdata(); Fungsi digunakan karena kita menggunakan 2 query loop, yaitu untuk menampilkan data instructor dan related program. Setelah selesai menampilkan data instructor, kita perlu reset postdata agar kembali ke main query. Untuk dokumentasi detail, lihat disini.
<?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
//menampilkan instructor
$relInstructor = new WP_Query(array(
'post_per_page' => -1,
'post_type' => 'instructor',
'orderby' => 'title',
'order' => 'ASC',
'meta_query' => array(
array(
'key' => 'related_program',
'compare' => 'LIKE',
'value' => '"' . get_the_ID() . '"'
)
)
));
if ($relInstructor->have_posts()){
echo '<hr class="section-break">';
echo '<h2 class="headline headline--medium">Related Instructor(s)</h2><br/>';
echo '<ul class="professor-cards">';
while($relInstructor->have_posts()){
$relInstructor->the_post();
?>
<li class="professor-card__list_item">
<a class="professor-card" href="<?php the_permalink();?>">
<img class="professor-card__image" src="<?php the_post_thumbnail_url();?>">
<span class="professor-card__name"><?php the_title();?></span>
</a>
</li>
<?php
}
echo '</ul>';
}
wp_reset_postdata();
//menampilkan event
$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();
?>
Mari kita tambahkan 1 atau 2 instructor baru, silakan isi nama dan konten sesuai keinginan Anda. Lalu tambahkan featured image untuk foto instructor dan mengisi custom field program studi. Berikut tampilan dari single-instructor.php dan single-program.php
