How to Show Related Posts with Thumbnails in Thesis Theme

Simple tutorial on How to Show Related Posts with Thumbnails in Thesis Theme without a plugin. Use this code to show related posts along with thumbnails after the content in single post page of your thesis theme. In this tutorial, thumbnails will be generated based on thesis custom post image fields and if you like to use any alternate method, check 3 Ways to Generate Thumbnails in Thesis Theme.

Is it necessary to Show Related Posts ?

There are many benefits of displaying related posts after content section. It will give an option for the readers to read another article in the same category. This way related posts will help you to generate more page views and reduced bounce rate. If you dont wish to have thumbnails, check our previous article on How to Display Related Posts in Thesis Theme.

Show Related Posts with Thumbnails in Thesis Theme

Here is the working code that helps to display related posts with thumbnails after single post in your thesis theme. Just Add this code to custom_functions.php file and update it. Here is an article on how to Customize Thesis Theme Using FTP without breaking theme files.

/* Start of Related Posts with Thumbnails after Single Post in Thesis */
function related_posts_thumbnails() {
if (is_single()) { ?>
<?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'=> 4,'caller_get_posts'=>1);
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
echo '<div id="related-posts"><h4>Related Articles</h4><ul>';
while( $my_query->have_posts() ) {
$my_query->the_post();?>
<li>
<a href="<?php the_permalink(); ?>"><img src="<?php echo bloginfo('template_url'); ?>/lib/scripts/thumb.php?src=/<?php $values = get_post_custom_values("thesis_post_image"); echo $values[0]; ?>&w=125&h=90&zc=1&q=100" alt="<?php the_title(); ?>" width="125" height="90" /></a>
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>
</li>

<?php $post = $orig_post; wp_reset_query(); }
echo '</ul></div>';
} } ?>
<div></div>
<?php } }
add_action('thesis_hook_after_post_box', 'related_posts_thumbnails');
/* End of Related Posts with Thumbnails after Single Post in Thesis */

Tweaking Related Posts with Thumbnails Code

This can be modified to make it perfectly fit for your requirements. Just check the highlighted parts and you will get a clear idea on what I’m talking about. Change the number of related posts to be displayed, specify thumbnail image width and height, replace the title “Related Articles” with your own text.

CSS for Related Posts with Thumbnails in Thesis Theme

Final step is to style the related posts and to make them align horizontally. This simple CSS will help you to properly align related posts with perfect margins and paddings. Add below CSS to custom.css file in your thesis theme and save it.

/** Start of CSS for Related Posts with Thumbnails */
#related-posts {
float: left;
margin: 20px 10px;
width: 620px;
}
#related-posts h4 {
border-bottom: 3px solid #333333;
font-family: arial;
font-size: 18px;
font-weight: bold;
line-height: 36px;
margin: 0 0 12px 10px;
width: 600px;
}
#related-posts ul {
list-style: none outside none;
}
#related-posts ul li {
border-right: 1px solid #DDDDDD;
float: left;
padding: 0 14px;
width: 125px;
}
#related-posts ul li:last-child {
border:none;
}
#related-posts .img {
float: left;
}
#related-posts .link {
float: left;
font-size: 13px;
line-height: 18px;
margin: 5px 0 0;
text-align: center;
}
#related-posts .link:hover {
color: #000;
}
#related-posts ul li:hover .link {
color: #000;
}
/** End of CSS for Related Posts with Thumbnails */

You can make changes to this CSS code and can add some other properties to make related posts in your thesis theme look more attractive. Also, you can align them in a vertical order with thumbnails in the left and links in the right side.

If you are looking for a plugin that can accomplish this task, then check how to Display Related Posts in WordPress More Relevantly using a simple plugin.

If you have faced any difficulty in installing related posts with thumbnails code in your thesis theme, then drop a comment here and we will get back to you.