Anda sudah mendaftarkan custom post type di WordPress, misalnya untuk portofolio atau produk, tapi daftar itemnya tidak muncul di halaman yang Anda inginkan. Bingung harus mulai dari mana? Ada beberapa metode untuk menampilkan custom post type di WordPress: query manual, template khusus, dan shortcode.
Pastikan Anda sudah membuat custom post type. Jika belum, ikuti panduan Cara Membuat Custom Post Type di WordPress Tanpa Plugin. Setelah itu, kita fokus pada cara menampilkan datanya di frontend.
Mengapa Data Custom Post Type Tidak Muncul Otomatis?
WordPress secara default hanya menampilkan post dan page di arsip dan loop utama. Custom post type yang Anda daftarkan tidak otomatis masuk ke query utama kecuali Anda mengaturnya. Jadi, jika Anda membuat CPT dengan nama portfolio, Anda perlu membuat query terpisah untuk menampilkannya.
Ada beberapa cara untuk menampilkan CPT: menggunakan WP_Query di dalam template, membuat file template khusus, atau menggunakan shortcode agar bisa disisipkan di halaman atau widget. Kita akan bahas satu per satu.
1. Menampilkan dengan WP_Query Manual
Metode paling fleksibel adalah menggunakan kelas WP_Query untuk mengambil data CPT sesuai kebutuhan. Anda bisa menaruh kode ini di file template tema (misalnya page.php atau front-page.php) atau di dalam shortcode.
Contoh query untuk menampilkan 6 item portofolio terbaru:
<?php
$args = array(
'post_type' => 'portfolio',
'posts_per_page' => 6,
'orderby' => 'date',
'order' => 'DESC',
);
$portfolio_query = new WP_Query( $args );
if ( $portfolio_query->have_posts() ) : ?>
<ul class="portfolio-list">
<?php while ( $portfolio_query->have_posts() ) : $portfolio_query->the_post(); ?>
<li>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<?php the_post_thumbnail( 'medium' ); ?>
<?php the_excerpt(); ?>
</li>
<?php endwhile; ?>
</ul>
<?php wp_reset_postdata(); ?>
<?php else : ?>
<p>Belum ada portofolio.</p>
<?php endif; ?>
Setelah loop selesai, panggil wp_reset_postdata() agar query utama kembali normal. Tanpa ini, konten setelahnya bisa kacau.
2. Membuat Template Khusus untuk Custom Post Type
Jika Anda ingin tampilan yang berbeda untuk single item dan arsip CPT, WordPress memungkinkan pembuatan file template khusus. Urutan prioritasnya: single-portfolio.php untuk halaman detail, dan archive-portfolio.php untuk daftar arsip.
Untuk arsip, Anda tidak perlu membuat query manual karena WordPress sudah menyiapkan loop utama. Buat file archive-portfolio.php di folder tema (atau child theme) dan gunakan loop standar:
<?php get_header(); ?>
<div class="container">
<h1>Portofolio</h1>
<?php if ( have_posts() ) : ?>
<div class="portfolio-grid">
<?php while ( have_posts() ) : the_post(); ?>
<article>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_post_thumbnail( 'medium' ); ?>
<?php the_excerpt(); ?>
</article>
<?php endwhile; ?>
</div>
<?php the_posts_pagination(); ?>
<?php else : ?>
<p>Tidak ada item portofolio.</p>
<?php endif; ?>
</div>
<?php get_footer(); ?>
Jika tema Anda menggunakan page builder, pahami hierarki template agar tidak bertabrakan dengan layout builder.
3. Menyisipkan Custom Post Type dengan Shortcode
Jika Anda ingin menampilkan CPT di dalam konten halaman atau widget tanpa mengedit file tema, shortcode adalah solusinya. Daftarkan shortcode di functions.php tema (sebaiknya di child theme).
Contoh shortcode [daftar_portofolio]:
function daftar_portofolio_shortcode( $atts ) {
$atts = shortcode_atts( array(
'jumlah' => 4,
), $atts );
$query = new WP_Query( array(
'post_type' => 'portfolio',
'posts_per_page' => $atts['jumlah'],
) );
if ( ! $query->have_posts() ) {
return '<p>Belum ada portofolio.</p>';
}
$output = '<ul class="portfolio-shortcode">';
while ( $query->have_posts() ) {
$query->the_post();
$output .= '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
}
$output .= '</ul>';
wp_reset_postdata();
return $output;
}
add_shortcode( 'daftar_portofolio', 'daftar_portofolio_shortcode' );
Setelah shortcode terdaftar, Anda bisa menulis [daftar_portofolio jumlah="6"] di editor halaman atau widget teks.
4. Menampilkan Berdasarkan Taksonomi
Custom post type sering dilengkapi taksonomi kustom, misalnya kategori_portofolio. Untuk menampilkan item dari kategori tertentu, tambahkan parameter tax_query pada WP_Query:
$args = array(
'post_type' => 'portfolio',
'tax_query' => array(
array(
'taxonomy' => 'kategori_portofolio',
'field' => 'slug',
'terms' => 'desain-web',
),
),
);
Anda juga bisa membuat template khusus untuk arsip taksonomi dengan nama taxonomy-kategori_portofolio.php.
5. Tips Tambahan: Sorting dan Paginasi
Untuk menampilkan data dengan urutan tertentu, gunakan parameter orderby dan order. Misalnya, 'orderby' => 'title', 'order' => 'ASC' untuk mengurutkan berdasarkan judul.
Jika ingin menambahkan paginasi pada query manual, sertakan parameter 'paged' => get_query_var('paged') ? get_query_var('paged') : 1 dan gunakan paginate_links() atau the_posts_pagination() dengan query kustom.
Untuk pengaturan URL yang lebih rapi, atur permalink WordPress agar slug CPT dan taksonomi mudah dibaca.
Ringkasan
Menampilkan custom post type di WordPress bisa dilakukan dengan tiga pendekatan utama: query manual menggunakan WP_Query, membuat file template khusus seperti archive-portfolio.php, atau mendaftarkan shortcode agar mudah disisipkan di konten. Pilih metode yang paling sesuai dengan kebutuhan dan kemampuan Anda. Jika Anda menggunakan page builder, periksa hierarki template agar tidak konflik.
Pertanyaan yang Sering Diajukan
Apakah bisa menampilkan custom post type tanpa plugin?
Bisa. Anda hanya perlu menambahkan kode query atau shortcode di file tema (sebaiknya child theme) atau di functions.php. Tidak perlu plugin tambahan.
Bagaimana cara menampilkan gambar unggulan (featured image) di custom post type?
Gunakan the_post_thumbnail() di dalam loop. Pastikan tema Anda mendukung fitur post-thumbnails dan custom post type Anda juga mendeklarasikan dukungan tersebut saat registrasi.
Mengapa data custom post type tidak muncul setelah saya tambahkan query?
Periksa kembali nama post_type yang Anda daftarkan, pastikan sudah benar. Jika query masih kosong, coba nonaktifkan plugin cache sementara dan periksa apakah ada error di file tema. Pastikan juga Anda sudah memanggil wp_reset_postdata() setelah loop.
