How to Show Related Posts With Thumbnails Without a Plugin in Thesis

Showing related posts at the end of your post is a great way to keep visitors on your site, and make older posts more accessible. You don’t necessarily need a plugin for this and it’s fairly easy to show related posts with a thumbnail without a plugin.

For an example, you can see the related post thumbnails at the end of posts on this blog as I’m using the same method I’m sharing below.

Related Posts With Thumbnails Without a Plugin

Step 1: Add the PHP code

The method used to determine whether a post is related to the one being viewed is through the use of WordPress Post Tags. I’m actually using the code from this tutorial and have modified it only slightly. You can tag similar posts with the same word or phrase and the algorithm will return other posts with any one of the tags that the current post has. I also added a line to display the related posts randomly.

For the thumbnail images, we are using the WordPress Featured Image functionality, so you will need to upload your image using this. The code below includes both the related post code as well as the code necessary to enable and define your thumbnail images.

Paste this into your custom-functions.php file:

// Add Featured Image Support
add_theme_support( 'post-thumbnails' );
add_image_size( 'related-posts', 100, 100, true );

// Related Posts By Tag
function related_posts() {
if ( is_single() ) { 
$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,
'orderby'=>'rand' // Randomize the posts
);
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
echo '<div id="related_posts" class="clear"><h3>Related Posts</h3><ul>';
while( $my_query->have_posts() ) {
$my_query->the_post(); ?>
<li>
	<a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>">
		<?php the_post_thumbnail( 'related-posts' ); ?>
	</a>
	<div class="related_content">
		<a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>
	</div>
</li>
<? }
echo '</ul></div>';
} }
$post = $orig_post;
wp_reset_query(); ?>
<?php } else { } }

add_action('thesis_hook_after_post','related_posts');

You should set your desired thumbnail size over on line #3. If you’re using a WordPress theme other than Thesis, you can still use this code, just insert it in the applicable place in your single.php file. But I’d recommend you use the version that you see on the post I referenced above where I found this code snippet. The Featured Image definitions would need to go in your functions.php file.

Step 2: Add the CSS

Now that you have the code to show your related posts with thumbnails using post tags, you need to style them. I’ve provided some basic styling, but you will need to adjust where needed to work with your blog from a design standpoint.

.custom #related_posts ul {
	margin:0; 
	overflow:hidden; 
}

.custom #related_posts li {
    float: left;
    list-style: none;
    margin: 0 0 0 20px;
}

	.custom #related_posts li:first-child { 
		margin-left:0; 
	}

.custom #related_posts li a {
	display:block;
	font-size:12px;
	line-height:16px;
	text-align:left;
	text-decoration:none;
	width:100px;
}

	.custom #related_posts li a:hover {
		text-decoration:underline;
	}

And Your’re Done!

Let us know how it worked out for you in the comments or if you have questions.

• WP Beginner Post
• Mark Jaquith Post on WordPress Featured Images
• Justin Tadlock Post on WordPress Featured Images

Image attribution: dicktay2000, Larry Johnson, spettacolopuro, treyevan

Tagged as: Post Thumbnails, thesis tips