WordPress: How To Show Related Posts With Thumbnails Without Plugin

In a Nutshell:

To reduce the bounce rate of your blog, it is important that you focus on keeping your readers involved by providing them as many interesting links as possible within your blog based upon their interest. Also, once a visitor finds a particular post interesting, he would surely be looking have a few more of something similar to it. “Related Posts” (i.e. the Posts/Articles similar to the one on the current page) is one of them.


related posts

This article focuses on helping the WordPress Webmasters to display a set of “RELATED POSTS” at the end of an post/article page without the use of any plugins. It will just cost you a few minutes [about 10-15 minutes at the max.] to independently copy a few lines of code to your current WordPress theme file. Do not worry, we will provide you the code.

Also check our article on How To Show Most Commented Posts With Thumbnail Without Plugin.
Some might even think of directly integrating a plugin for this purpose as this fulfills the purpose within a matter of a few clicks. But remember that using plugins for this is really not feasible as plugins are considered to be resource hoggers and in order to keep your blog flowing smoothly without any downtimes, it is advisable to minimize the plugin usage on your blog.

In this article I will show you about a couple of easy ways to put up the related articles of your WordPress blog without the use of plugins. You can display the Related Posts based on Categories or Tags. It is advisable that you display the ‘Related Posts’ based on category although we will be showing you both the methods i.e. using category and tags. Choose the one which suites your blog the best.

[alert-announce] NOTE [/alert-announce]

This method is set to work only with the standard WordPress themes and not with Genesis or Thesis based themes.

Using cPanel or Filezilla, navigate to ‘wp-content/themes/your-theme-folder‘. First of all, you need to make a backup of you theme files. After that open your ‘single.php‘ file which should be located in your theme folder. Just before the code for ‘Author Bio Box’ [We are looking for the Author Bio code as it comes immediately after the post], you need to paste the code given below.

Here is the code snippet using which you can displayed the ‘Related Posts‘ based on category:

<!---Related Posts --->
<div class="relatedposts">  
	<h5>Related Articles</h5>  
		<?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'=> 2,
		'caller_get_posts'=>1
		);
$my_query = new wp_query( $args );  
  
    while( $my_query->have_posts() ) {  
    $my_query->the_post();  
    ?>  
      
    <div class="relatedthumb">  
        <a rel="external" href="<? the_permalink()?>"><?php the_post_thumbnail(array(100,100)); ?><br />  
        <?php the_title(); ?>  
        </a>  
    </div>  
      
    <? }  
    }  
    $post = $orig_post;  
    wp_reset_query();  
    ?>  
</div>   
<!---Related Posts --->

In case if you would like to display the ‘Related Posts‘ based on tags, all you need to do is to replace the instances of ‘category‘ with ‘tag‘. Do not do it manually, just copy this piece of code:

<!---Related Posts --->
<div class="relatedposts">  
	<h5>Related Articles</h5>  
		<?php $orig_post = $post;
		global $post;
		$tags = wp_get_post_tags($post->ID);
		if ($tags) {
		$tag_ids = array();
		foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
		$args=array(
		'tag__in' => $tag_ids,
		'post__not_in' => array($post->ID),
		'posts_per_page'=> 2,
		'caller_get_posts'=>1
		);
		$my_query = new wp_query( $args );  
  
    		while( $my_query->have_posts() ) {  
   		 $my_query->the_post();  
   	 ?>  
      
    <div class="relatedthumb">  
        <a rel="external" href="<? the_permalink()?>"><?php the_post_thumbnail(array(100,100)); ?><br />  
        <?php the_title(); ?>  
        </a>  
    </div>  
      
    <? }  
    }  
    $post = $orig_post;  
    wp_reset_query();  
    ?>  
</div>   
<!---Related Posts --->

[alert-announce] IMPORTANT [/alert-announce]

In the above code, I have set ”posts_per_page” to 2 as I am willing to show just the 2 ‘Related Posts’. If you want to show more, change the number as per your wish.

I am displaying a ‘100 x 100’ pixel thumbnail for the post. In order to show a thumbnail for the specified size, you need to create a thumbnail of that size for the featured image of every post else the image will not be displayed.

To create a 100×100 thumbnail for every post image, first open the ‘functions.php‘ in your theme folder and add the following code below ‘add_theme_support( ‘post-thumbnails’ )‘ code:

add_image_size( 'related', 100, 100, true ); //related

After this, install the ‘Regenerate Thumbnails‘ plugin. Go to Tools>Regenerate Thumbnails and click on ‘Regenerate All Thumbnails‘. Doing so will create a 100 x 100 pixel image for all your existing image and thus thumbnail will be displayed on your related posts.
[adsense]
If you do not want to increase the code length or the file size of your current ‘single.php’ file, then it is advisable to ponder with your files depending on the complexity of your theme.

Also Read: Display Adsense In Between Posts Without Plugin

Create a new directory in your theme folder. In this example, I shall name the directory as ‘components‘.

Path should be like this: /wp-content/themes/your-theme/components

Now create a new PHP file and add the above code into this file. Save the file as ‘related-posts.php‘. This should be saved inthe directory you just created – ‘components‘.

Now add the following code in the file ‘single.php‘ at the desired location:

<?php include(TEMPLATEPATH. ‘/components/related-posts.php’ ); ?>

But if you are a beginner and are finding it difficult to figure out this whole thing, then forget it. Just move on to the next step as it hardly matters. Creating a different file for this purpose is of no real advantage, it is just to keep the code files neat.


Next open the Stylesheet file of your theme. It is usually named ‘style.css‘.

There paste the following code:

/*----------[ Related Posts ]----------*/
.relatedposts {width: 640px; margin: 0 0 20px 0; float: left; font-size: 12px; font-weight:bold;}
.relatedthumb {margin: 0 1px 0 1px; float: left; }
.relatedthumb img {margin: 0 0 3px 0; padding: 0;}
.relatedthumb a {text-decoration: none; display:block; padding: 4px;}

Remember that I have used a width of ‘640px’ as that is the width supported by my theme. If your theme supports a larger size or a smaller size, change it accordingly. The result should be something similar to this:

related articles

If you find that image or the title is not being displayed in the right manner or in the right place, modify the ‘css‘ accordingly. You could use the ‘Inspect Element‘ feature in Google Chrome browser to make the necessary changes with ease.

In case if you would like the Post title to be displayed below the thumbnail, then just include “width: 150px” in the code to be included in ‘style.css’. It should be like this:

/*----------[ Related Posts ]----------*/
.relatedposts {width: 640px; margin: 0 0 20px 0; float: left; font-size: 12px; font-weight:bold;}
.relatedthumb {margin: 0 1px 0 1px; float: left; }
.relatedthumb img {margin: 0 0 3px 0; padding: 0;}
.relatedthumb a {text-decoration: none; display:block; width: 150px; padding: 4px;}

The resultant ‘Related Posts‘ section will look something like this:

related articles 2

Also refer to [sources] WPbeginner and Hongkiat for a better understanding.

10 Comments

  1. Sandee July 24, 2013
    • Nikhil P Naik August 2, 2013
  2. Anu August 2, 2013
  3. Shevaa August 13, 2013
  4. Osman Musa August 31, 2013
  5. Osman Musa August 31, 2013
    • Nikhil P Naik August 31, 2013
  6. cécile January 13, 2015
  7. Laszlo Gyuricza January 30, 2017

Leave a Reply

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