How to Show WordPress Related Posts Without a Plugin

By showing related posts on a webpage increase the reader engagement with your contents.  There are several  Plugins to show WordPress related posts . We often already used a lot of plugins for our site to perform other tasks so it is better to do something without the plugins. Because a big number of plugins increase the server load time of the WordPress webpage.  This extra load time also effects on SEO of the webpage. But I am going to teach you a technique to show WordPress related posts after the contents without use of a plugin. At the end of the page giving related post is a good idea. The reader may go to the bottom of page after reading your contents. And if he shows interest in your contents, he will like to have more similar articles. So here relative posts Snapshot give him a quick reference to pick someone from the list of related articles. The code will produce result like this as given below:

related-posts-tipsmoon

In this example we are using our theme’s “single. php” file located in the theme directory. This file is responsible to show single post in WordPress website. Put the following code just before the function calls for comments and footer in single.php file.

<!--Code to show WordPress related posts after contents-->

<?php $orig_post = $post;
global $post;
$categories = get_the_category($post->ID);
if ($categories) {
$category_ids = array();
foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
$args=array(
'category__in' => $category_ids,
'post__not_in' => array($post->ID),
'posts_per_page'=> 10, // Number of related posts that will be shown.
'caller_get_posts'=>1
);
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
echo '<div class="tip_relatedposts"><h3>Related Topics</h3><ul>';

while( $my_query->have_posts() ) {
$my_query->the_post();?>

<li>

<div class="tip_relatedthumb">
<a href="<?php the_permalink();?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_post_thumbnail(); /*echo catch_that_image(); */?></a>
</div>

<div class="tip_relatedcontent">
<h3><a href="<?php the_permalink();?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
<?php the_time('M j, Y') ?>
</div>


</li>
<?php

}

echo '</ul></div>';
}
}
$post = $orig_post;
wp_reset_query(); ?>

Explanation of Code

First of all we assign current post status to a php variable named “orig_post” which will be used at the end of the code to restore original Post parameters. Then we get current category. In for each loop we will set the number of related posts to show. We set the variable ‘post__not_in’ to exclude the post which is currently being shown up on the page. Then we use wp-query to filter desired posts from the WordPress database and show them with the help of while loop. At the end we restore the post data to its previous state.

We need to do some CSS for the code above to show the posts in proper design and format. So we put following  CSS Code to our theme style sheet named “style.css”.It is located in our theme directory.

<!-- style code for wordpress related posts -->

.tip_relatedposts {width: 500px; margin: 0 0 20px 75px; float: left; font-size: 12px; }
.tip_relatedposts h3 {font-size: 20px; margin: 0 0 5px 0;  }
.tip_relatedposts ul { width:450px;  }
.tip_relatedposts ul li { width:450px; display:block; height:100px;background-color: #EBF0FE; border-bottom:groove 1px;   }

.tip_relatedthumb {margin: 0 1px 0 1px; }
.tip_relatedthumb img {margin: 0 0 3px 0; padding-right:5px; float:left;}
.tip_relatedthumb a {color :#333; text-decoration: none; display:block; padding: 4px; width: 100px;}
.tip_relatedthumb a:hover {color: #000;}

.tip_relatedcontent { position:relative;  margin-left:23%; margin-right:2%; margin-top:5px;}
.tip_relatedcontent h3 { font-size:16px;}



<!--End style code for wordpress related posts-->

Leave a Reply

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