Cara Custom Related Post di WordPress Tanpa Plugin

Related post atau artikel terkait adalah elemen penting yang sering diabaikan oleh banyak pemilik website. Padahal, fitur ini membantu meningkatkan pageviews, menurunkan bounce rate, dan membuat pembaca lebih lama berada di situs kita. Kalau kamu menggunakan WordPress, sebenarnya ada banyak plugin untuk menampilkan related post. Namun, plugin sering menambah beban loading dan kadang tampilannya tidak sesuai selera.

Karena itu, di tutorial kali ini kita akan membahas cara custom related post di WordPress secara manual, seperti yang sudah kita lakukan sebelumnya. Dengan metode ini, kamu bisa mengontrol tampilan, struktur, dan logika artikelnya sepenuhnya tanpa plugin tambahan. Tutorial ini cocok untuk pemula maupun pengguna WordPress berpengalaman.

Mengapa Perlu Custom Related Post?

Sebelum masuk ke teknis, berikut manfaat yang kamu dapat jika membuat related post secara custom:

1. Loading lebih cepat karena tidak memakai plugin ekstra.
2. Tampilan bisa disesuaikan dengan gaya desain website.
3. Query lebih akurat, bisa berdasarkan kategori, tag, atau keduanya.
4. Ramah SEO, karena struktur HTML bisa kita optimalkan.
5. Tidak menggantungkan diri pada plugin pihak ketiga.

Dengan membuatnya sendiri, kamu punya kontrol penuh atas tampilan dan fungsinya.

Langkah 1: Membuka Theme Editor atau Child Theme

Agar tetap aman saat update tema, sangat disarankan menggunakan child theme. Jika kamu sudah pakai child theme, lanjutkan ke langkah berikutnya.

Masuk ke:
Appearance → Theme File Editor → single.php
atau
Appearance → Theme File Editor → template-parts/post/content-single.php

Lokasi file bisa berbeda tergantung tema. Intinya, kita harus mencari bagian yang menampilkan konten artikel.

Langkah 2: Menambahkan Kode PHP Related Posts

Setelah menemukan area yang tepat (biasanya di akhir konten artikel), tambahkan kode berikut:

 <?php
// Custom Related Posts by Category
$categories = get_the_category($post->ID);
if ($categories) {
    $category_ids = array();

    foreach ($categories as $cat) {
        $category_ids[] = $cat->term_id;
    }

    $args = array(
        'category__in' => $category_ids,
        'post__not_in' => array($post->ID),
        'posts_per_page' => 4,
        'orderby' => 'rand'
    );

    $related = new WP_Query($args);

    if ($related->have_posts()) : ?>
        <div class="custom-related-posts">
            <h3 class="related-title">Related Posts</h3>
            <div class="related-wrapper">
                <?php while ($related->have_posts()) : $related->the_post(); ?>
                    <a class="related-item" href="<?php the_permalink(); ?>">
                        <?php if (has_post_thumbnail()) : ?>
                            <div class="related-thumb">
                                <?php the_post_thumbnail('medium'); ?>
                            </div>
                        <?php endif; ?>
                        <p class="related-text"><?php the_title(); ?></p>
                    </a>
                <?php endwhile; ?>
            </div>
        </div>
    <?php endif;
    wp_reset_postdata();
}
?>

Kode ini melakukan hal berikut:

– Mengambil kategori dari artikel saat ini
– Mencari artikel lain dalam kategori yang sama
– Memilih 4 artikel secara acak
– Menampilkan thumbnail dan judul artikel
– Memastikan artikel saat ini tidak ikut muncul

Struktur HTML dibuat simpel agar mudah di-style.

Langkah 3: Menambahkan CSS Agar Tampilan Rapi

Agar related post terlihat modern dan rapi seperti yang kita buat kemarin, tambahkan CSS berikut ke:

Appearance → Customize → Additional CSS

.custom-related-posts {
    margin-top: 28px;
    border-top: 2px solid #e5e5e5;
    padding-top: 16px;
}

.related-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 14px;
}

.related-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.related-item {
    width: calc(50% - 6px);
    background: #f6f6f6;
    border-radius: 6px;
    padding: 10px;
    text-decoration: none;
    display: block;
    transition: .3s ease;
}

.related-item:hover {
    background: #e0edf7;
}

.related-thumb img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

.related-text {
    font-size: 14px;
    margin-top: 8px;
    color: #333;
}

CSS ini membuat tampilan related post lebih modern:

– layout grid 2 kolom
– thumbnail persegi
– judul kecil rapi
– hover ringan
– margin dan padding proporsional

Kamu bisa memodifikasi radius, warna, atau ukuran sesuai kebutuhan.

Tips SEO untuk Related Post

Agar fitur ini semakin menguntungkan secara SEO:

Pakai judul lengkap
Jangan memotong judul artikel. Biarkan Google memahami konteks penuh.

Gunakan thumbnail berkualitas
Gambar yang jelas meningkatkan CTR dan keterlibatan.

Jangan tampilkan terlalu banyak artikel
4–6 artikel adalah jumlah ideal agar tidak mengganggu fokus pembaca.

Pastikan struktur HTML rapi
Heading, link, dan alt image membantu SEO.

Kesimpulan

Membuat custom related post di WordPress tanpa plugin ternyata tidak sulit jika kamu memahami struktur tema dan tahu di mana harus menempatkan kodenya. Dengan menambahkan query khusus berbasis kategori, lalu menambahkan CSS modern yang responsif, kamu bisa menghasilkan tampilan related post yang:

– Lebih ringan dibanding plugin pihak ketiga
– Bisa disesuaikan penuh (warna, hover, grid layout, overlay, ukuran thumbnail)
– Lebih konsisten dengan identitas visual websitemu
– Lebih SEO-friendly karena meningkatkan internal linking

Pendekatan manual seperti ini membuat website tetap cepat, bersih, dan stabil, tanpa ketergantungan plugin tambahan.

Semoga tutorial ini membantu kamu dan pembaca lain yang ingin meningkatkan tampilan serta performa WordPress mereka lewat related post yang benar-benar rapi dan profesional. Jika ingin melangkah lebih jauh, kamu bisa mengembangkan efek animasi, lazy load, atau conditional related post berdasarkan kategori.

Selamat mencoba, dan semoga websitemu semakin keren serta ramah pengunjung!