How to: Related Posts with Thumbnails in WordPress without Plugins
Related posts can be easily displayed with plugins, but did you ever wonder how you could display related posts with a Thumbnail without using a Plugin? In this article, we will share two different algorithm which you can use to generate related posts with thumbnails and avoid using any plugin.
Note: We will utilize the built-in WordPress Post Thumbnail Function. So it is best if you implement this.
Related Posts by Tags
WordPress has this amazing taxonomy known as “Post Tags” which you can use. You can tag each of your posts with multiple keywords. This algorithm would find other posts with any one of the tag that the current post has and will list them.
<?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'=>5, // 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 id="relatedposts"><h3>Related Posts</h3><ul>';
while( $my_query->have_posts() ) {
$my_query->the_post(); ?><li><div class="relatedthumb"><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></a></div>
<div class="relatedcontent">
<h3><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
<?php the_time('M j, Y') ?>
</div>
</li>
<? }
echo '</ul></div>';
}
}
$post = $orig_post;
wp_reset_query(); ?>
The above code is looking at the current post ID and all tags which are associated with it and it uses the wp_query function to look for all other posts that matches any original tag and display them. You can style the post anyway you want them.
Advantage: Most codes on the web cannot be used within the main post loop. Because the related posts are placed right after the main post and above the comments, this code is very helpful. We are saving the current post ID of the main loop and then recalling it at the end of our related posts code. Usually when you don’t do it this way, the two post ID codes gets mixed up and then the comments start acting weird which can break the comments, other plugins related to comments such as numbering system etc. So this code is good and it works.
Usage: Place this code anywhere you like in your single.php and it will work. But most of the time it is placed right above the comments in the main loop.
Related Posts by Category
This algorithm would find other posts within the same category as the current post, and it will list them as related posts. The advantage of this technique is that you will never have a blank spot for your related posts section.
<?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, // 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 id="related_posts"><h3>Related Posts</h3><ul>';
while( $my_query->have_posts() ) {
$my_query->the_post();?><li><div class="relatedthumb"><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></a></div>
<div class="relatedcontent">
<h3><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
<?php the_time('M j, Y') ?>
</div>
</li>
<?
}
echo '</ul></div>';
}
}
$post = $orig_post;
wp_reset_query(); ?>
This technique utilizes the same functions as the one above except we are just using the different criteria.
If you are creating a new project, or working on a client’s site, this could be very helpful.
Example

Additional Sources:
Creating a Mini Plugin to Show Related Posts via Functions.php
Comments
17 Responses to “How to: Related Posts with Thumbnails in WordPress without Plugins”Share Your Opinions
Tell us what you're thinking...
and if you want a pic to show with your comment, then get gravatar!
Please make sure that you have read our Comment Policy.










Thanks for this article. i am searching for lot of time to show the thumbnails with my article i am unable to perform this. i have tried many wordpress plugin but couldn’t done this. hope this might help me out
You guys r really doing a great job. thankz a lot.
Nice tutorial!
Right now i am using YARPP but would love to give this a try!
Thanks
Great tutorial. Would someone mind showing me a working single.php with this code?
I’m still learning php.
Unfortunately
Parse error: syntax error, unexpected T_ENDIF in C:\xampplite\htdocs\mock\wp-content\themes\scwd\single.php on line 76
Here is a working example Flowtown Blog.
Note that this code is so it will work inside the loop. Where are you trying to post this? If it is outside the loop then just add the end if code endif; << like that.
http://pastebin.com/m60c96f5f
I hope the link works. Thank you.
Don’t know what could be going wrong. After the clearfloat class it should work fine. That is how we put it in flowtown and it is working perfectly.
I will finish the theme and try it on a live site instead of xamp. I will let you know.
Very use article, thanks for updating
All that first code did was put two instances of the same post on the page. It didn’t show any related anything.
Doug please contact us using the form with a live link example, and we can help. We know this code is working because a few of our client’s site is using it.
Thanks for sharing. I’m using this code for a while now but it has a problem: when adding tags to a post, WP sorts them alphabetically regardless of the priority I added them. So this code displays related posts matching the first tag only which are less relevant sometimes.
Maybe you have an idea how to prevent this auto sorting of tags by WordPress or any other solution?
It is not using the first tag. This code is using all tags from the posts to find related posts.
Thanks for this, exactly what I was looking for! I love how straight to the point your articles are, no confusion.
HI!
Thanks for this information! This is exactly what I was looking for.
Is there a way to add an excerpt to this, along with the photo?
Thanks again for your help!
Yes. Just add the_excerpt(); where you want it to display excerpt.
My posts are now enriched thanks to you and this tutorial.