Create your own custom related posts for WordPress (No plugin)

Creating your own Related posts for WordPress custom post types or for your blog isn’t that hard. You can use my example code below to set it up.

Before we start, I assume you already have experience with editing PHP and working with your WordPress child theme.

Okay, let’s get started. First we open our custom single post where we want to show our related posts. let’s say we have a custom post type tutorials and we want to create related posts for the related categories of tutorials.

First we need to add a new Query as below. Change 'post_type' to your custom post type slug or if it’s for your blog, you can use post. We also use 'post__not_in' to avoid our current post showing up as a related post.

$related = new WP_Query(
        array(
                'post_type'      => 'tutorials', //YOUR CPT SLUG
                'category__in'   => wp_get_post_categories( $post->ID ),
                'posts_per_page' => 3,
                'post__not_in'   => array( $post->ID ),
        )
);

On the same single post page, we need to loop our existing posts and while there are posts, we show our custom related posts layout. Add the following code as below. We use our featured image as a background-image and use the wp_trim_words() function to trim our text from get_the_content().

if ( $related->have_posts() ) : ?>
   <h3><?php _e( 'You might like this too!', 'hoolite' ); ?></h3>
   <ul class="related-posts">
        <?php
        while ( $related->have_posts() ) :
                  $related->the_post();
                        ?>
                        <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                        <li>
                                <?php if ( has_post_thumbnail( $post->ID ) ) { ?>
                                <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
                                <div class="related-post-thumb" style="background-image: url('<?php echo $image[0]; ?>')"></div>
                                <?php } ?>
                                        <div class="related-post-text-inner">
                                                <h4><?php the_title(); ?></h4>
                                                        <?php echo wp_trim_words( get_the_content(), 25 ); ?>
                                        </div>
                        </li>
                </a>
                <?php
          endwhile;
           wp_reset_postdata();
        ?>
   </ul>
<?php endif; ?>

After that, you can add the following CSS and fine-tune it for your website usage. This is just a basic layout.

/* EXAMPLE CSS */
.related-posts li {
        margin: 8px;
        background:#FFF;
        display:inline-block;
        width: calc(33.3% - 8px);
        box-shadow: 4px 8px 40px 0 rgba(0, 0, 0, .1);
}

.related-posts li .related-post-text-inner {
        padding: 16px;
}

.related-post-thumb {
        height: 200px;
        background-size:cover;
        background-position: center;
}

That’s it! You now created your own custom related posts without the use of any plugin.

You might like this too!

Leave a Reply

Your email address will not be published. Required fields are marked *