Code to Display Related Posts by Category in WordPress

If you want to display a related posts section without a plugin that outputs the latest posts in the same category as in the parent post that it is being displayed, you could use the following code. So, you no longer have to depend on a resource-hungry plugin that contains too many functions not necessary for displaying a simple block of related posts. So here we go creating your own related posts section.

The PHP

Just copy-paste this code anywhere you want to display the related posts, probably the single.php file in your theme. This displays the related posts on every single page in your WordPress theme. If you are using the Genesis Framework theme with the Genesis Simple Hooks plugin installed, you can add the code to any hook that you wish to show this code in.

<?php if ( is_single() ) { ?>
<h3>Related Posts</h3>
<div id="grid-container">
      <?php
        $cats = get_the_category($post->ID);
        if ($cats) {
        $first_cat = $cats[0]->term_id;
        $args=array(
        'category_in' => array($first_cat),
        'post_not_in' => array($post->ID),
        'posts_per_page'=>4,
        'ignore_sticky_posts'=>1
        );
        $my_query = new WP_Query($args);
        if( $my_query->have_posts() ) {
        while ($my_query->have_posts()) : $my_query->the_post(); ?>
        <div class="grid-item">
<div class="post-image"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('medium'); ?></a></div>
<h3><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
<div class="post-author"><?php the_author(); ?></div>
<div class="post-date"><?php the_modified_date(); ?></div>
</div>  
        <?php
        endwhile;
        }
        wp_reset_query();
        }
      ?>
</div>
<?php } ?>

The CSS

You might want to style the related posts further. Here is an example of CSS that makes the basic adjustments like responsiveness. Copy-paste in your style.css file or any custom CSS plugins.

#grid-container {
   max-width: 1200px;
   display: flex;
   flex-wrap: wrap;
   margin: 20px 0;
   width: 100%;
	
}
#grid-container h3 {
   font-size: 16px;
   margin-bottom: 5px;
   margin-top: 5px;
}
#grid-container .grid-item {
   margin-bottom: 30px;
   width: 100%;
}
#grid-container .post-image img {
   width: 100%;
}
.post-author {
   font-size: 12px;
   float:left;
   margin-right: 10px;
   color: #777;
}
.post-date {
   font-size: 12px;
   color: #777;
}
@media screen and (min-width: 801px) {
#grid-container .grid-item {
   display: inline-block;
   margin: 0 3% 3% 0;
   width: 22.7%;
}
#grid-container :nth-child(4n) {
   margin: 0 !important;
}
}

After making the changes, be sure to clear the cache if you are not seeing the changes in the front end of the website.