Add Related Posts, with Images, to WordPress without a Plugin

We all know that WordPress is highly extensible with the use of plugins. These added files can instantly transform your website in ways you may not have considered from the onset. But, sometimes, you will run into situations where a plugin just cannot perform the exact task you are looking for.

That was the case for me recently, when I was looking for a related post solution that would not simply display a list of links, but a list of images. I also wanted this list to be generated by using tags. There are quite a few plugins that do the trick of generating related post links very well, and some also had an image solution, but none hit the mark of what I needed. That was until I found this helpful tutorial, entitled Show Related Post in WordPress Without a Plugin by Binny V A. He provides a solution for both tags and categories, which is perfect. (In fact, this is a part of a series he is working on that I highly recommend you read and follow.) But, I still needed a way to display thumbnail images instead of post titles.

The Tutorial

And, like a lightning bolt, it hit me. If I store thumbnail images in a custom field for each post, I can simply call that custom field when querying for the related post. Here is my modified code for this process using tags. Open your single.php file and place the code where you would like the related items to appear before the endwhile statement. Please refer to Binny V A’s original post for his original code snippets for both tags and categories.

<?php
	$backup = $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),
		'showposts'=>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 '<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_attribute(); ?>"><img src="<?php echo get_post_meta($post->ID, 'Image',true) ?>" width="149" height="96" alt="<?php the_title_attribute(); ?>" /></a><?php the_title(); ?></li>
 
<?php
	}
		echo '</ul>';
		}
	}
		$post = $backup;
		wp_reset_query();
?>

As you can see, I’ve changed what is displayed in my unordered list item to an image by calling for a predetermined custom field I called “Image”. After that, you can style your unordered list to match your page mock up. Now, how simple was that?

Tutorial Update

With the recent release of WordPress 2.9, we no longer have to store a thumbnail image related to a post in a custom field. We can now leverage the core functionality of <?php the_post_thumbnail(); ?>, which, when properly implemented, will add an option in your Write Post sidebar to choose a post thumbnail from any of the images inside of your post.

First, open your functions.php file and add the following code. Note that I am using the the thumbnail size from the above code snippet and you should replace it with your own dimensions.

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 149, 96, true );

Once you have saved and uploaded your edited file, you will now have a new option in your Write Post sidebar. All that is left to do is replace the following line of code…

<li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><img src="<?php echo get_post_meta($post->ID, 'Image',true) ?>" width="149" height="96" alt="<?php the_title_attribute(); ?>" /></a><?php the_title(); ?></li>

with this line of code:

<li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(); ?></a><?php the_title(); ?></li>

You now have an incredibly easy solution of adding a thumbnail, without using custom fields, with the related list of post links. If you want backwards compatibility with posts written for older versions of WordPress, replace that line of code with this conditional statement:

<?php
if ( has_post_thumbnail() ) {
<li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(); ?></a><?php the_title(); ?></li>
} else {
<li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><img src="<?php echo get_post_meta($post->ID, 'Image',true) ?>" width="149" height="96" alt="<?php the_title_attribute(); ?>" /></a><?php the_title(); ?></li>
}
?>

You will now have backward compatibility with themes that were developed for previous versions of WordPress.

Was that good for you? Well, we aim to please. Don't ever want to miss out on feeing this good again? Simply subscribe to our RSS Feed and you will experience this euphoria everytime we post something new. Ok, that is an exaggerartiion, but you will be up to date. You can also have updates sent directly to your inbox with our handy dandy email subscription.

• RSS Feed
• Email Subscription

If you liked this, you may find the following posts interesting as well.

• Styling a Simple Form using CSS3
• Automatically Update your Website Copyright Year with Javascript
• Create a Filterable Portfolio Page in WordPress with jQuery
• Simple CSS Code Snippets for Coda
• Case Study: pixel8 Launches new website for Coopers Kids

We believe in paying all things forward that comes to us. Please do the same by sharing this post with your family, friends and neighbors. We truly appreciate it.

• del.icio.us
• Share
• StumbleUpon

1. How to Speed Up Your WordPress Blog by Having Less Plugins | WebTechWise
2. Add Related Posts, with Images, to WordPress without a Plugin | pixel8