Wordpress: Add Images to Related Posts

One of the popular plugins for WordPress is Related Posts by René Ade, which scours the WP database for related content in published posts and displays the info on relating posts or in the sidebar through a widget. In this tutorial I will show you how to add thumbnail images to related posts featured in a sidebar using custom fields.

1. Download Related Posts Plugin

Grab the Related Posts plug-in on René’s site. The last build was compatible with WP 2.3, but it does work with WP 2.5.1.

2. Tweak Plugin

Before you upload the plugin, we need to edit it to use custom fields. First look for a section to ‘replace placeholders’, it should be the second part from the top. If you can’t find it, this is what it looks like below.

// replace placeholders
function rp_replace_placeholders( $post, $string ) {

  // replace placeholders
  $string = str_replace( '%title%',
    get_the_title($post->ID), $string );
  $string = str_replace( '%permalink%',
    get_permalink($post->ID), $string );

  // return
  return $string;
}

All that is needed next is to add the part for the custom field. Simply declare a placeholder of your liking and the name of the variable for the custom field. In this case we will use ‘%thumbnail%’ for the placeholder and ‘thumbnail’ for the custom field variable.

$string = str_replace ( '%thumbnail%',
	get_post_meta($post->ID, 'thumbnail', $single = true), $string);

3. Install & Activate Plugin

Once you’ve downloaded the plugin, upload it to your WordPress platform and activate. To add related posts to the sidebar, navigate to Design/Widgets and drag the widget to the sidebar of your choosing. At this point you can start editing the appearance of the plugin by adding CSS classes.

4. Adding Images

To add images we need to code the image tag with the placeholder that was declared earlier.

<li><a href="%permalink%"><img src="../../images/%thumbnail%" alt="%title%" align="left" /></a><h3><a href="%permalink%">%title%</a></h3></li>

5. Write a Post

Write up a new post and go down to the custom fields section. For the key type ‘thumbnail’ and the value will be the filename of the image.

Not much to it. The only drawback to this operation is that if you do not have an image in the post meta data, then the sidebar’s html markup will not be validated. Further editing of the plugin’s file to include an if statement could be done.