• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

WP Thinker

The WordPress Playground

  • Snippets
  • Best
  • Guides
  • Reviews
Home / Guides

July 2, 2020 Muhammed Swalih

Code to Display Related Posts by Category in WordPress

How-to-Display-Related-Posts-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.

Avatar for Muhammed Swalih

Muhammed Swalih

A WordPress expert who has been tweaking WordPress functions, plugins, themes and almost everything related to WordPress for the past 5+ years.

Primary Sidebar

Related Articles

Footer

WP Thinker is a website that publishes everything related to WordPress, Plugins, Themes, SEO, Blogging, etc.

  • Facebook
  • Twitter
  • Pinterest

Copyright © 2023 · WP Thinker

  • About Us
  • Advertise
  • Write for Us
  • Privacy Policy
  • Terms and Conditions
  • Contact Us
This website uses cookies to serve you better. By continuing to use this website, you agree to our cookie and Privacy Policy.