WordPress: How To Show Related Posts With Thumbnails Without Plugin

By

8 Comments Last modified on August 18th, 2013

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.

NOTE

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 --->

IMPORTANT

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.


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.

8 Responses to “WordPress: How To Show Related Posts With Thumbnails Without Plugin”
  1. Sandee

    Great tutorial! Always best to do as much as we can without plugins, so I appreciate the help! Will surely be a boost with my redesign! Thanks again!

    • Nikhil P Naik

      All the very best with your redesigning. I am glad it helped you.

  2. Anu

    Really helpful..Thanks :)

  3. Shevaa

    Hmm Nice Man… I used this code in my Blog…. Thx for sharing

  4. Osman Musa

    Thanks, I will try this on my site techlivewire dot com. I am using a plugin now but it doesn’t display thumbnails. When I searched “related posts with thumbnails without plugins” in Google, I saw lots of people but I chose you because you looked like you are smart.

  5. Osman Musa

    By the way, you don’t need Cpanel or filezilla just to edit single.php, you can do it from inside using Appearance > Editor

    • Nikhil P Naik

      Hello Osman,

      Yes indeed that can be done conveniently. But in the few of the hostings, the theme files are appear to be read-only without write permissions [in the editor section]. Also, using cPanel is more feasible as you can easily identify the error line in case if it occurs.

Bloggercent is a Dofollow blog. Tick the 'Commentluv' button for your link to carry a "dofollow" tag.

Leave a Reply (Our Comment Policy)

CommentLuv badge