Customizing the Yet Another Related Posts Plugin

I love WordPress. I really do. Maybe not as much as Olaf, but he’s made a convert out of me. I’m using it more and more for my sites but am getting increasingly frustrated at how many of the “˜standard’ plugins and widgets don’t seem to be as complete as they could be. So many of them don’t seem to implement SEO best practices or take advantage of all of the great related posts most blogs have.

Google’s Panda update has caused me to rethink all of my sites, how they cross-link internally and how I can position my content to gain more visitors. When I’m writing content for static pages or blog sites, I always look for opportunities to link to old posts or future posts that could help support the one I’m writing.

While there’s more to be gained SEO-wise from cross-linking within the paragraphs, adding suggestions for further reading are great for the user experience and SEO. Providing a list of related posts does that perfectly.

One of the most popular WordPress related posts plugin is Yet Another Related Posts Plugin (YARPP). While I sometimes cringe at the choices it makes and wish I could tell it which posts to related to each other, users of the plugin can add their own formatting and customizations to make the output match their theme.

Olaf and I were discussing this the other day and he thought our ideas would make a great tutorial and something that would work great on a new project of mine…

Create your own related posts theme

The perfect situation would be to get a list of related posts where you can choose the 2 or 3 articles which get placed below your article. But, what happens if you change or delete an article? Your related list may end up without posts or if you add the links right into your article you could create dead links. The best solution is a system that can choose those articles for you and will update the list after a new, more relevant article becomes available.

How-to create a stunning related article list

1. Install, 2. enable the YARPP plugin and 3. copy one of the example templates from the plugin directory into your theme directory (f.e. example.php). Enter the settings page and enable the following option:
Automatically display related posts?
Display using a custom template file (choose the template name from the file in your theme directory)

Now visit a recent post and notice the list of comments below the content. We will optimize this list now! Open the your new custom template file in your text editor and replace the code with:

<?php if ($related_query->have_posts()) { ?>
<h3>Related Posts</h3>
<ul id="myRelatedPosts">
	<?php while ($related_query->have_posts()) {
		$related_query->the_post(); ?>
	<li>
		<a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></li>
	<?php } // end while ?>
</ul>
<?php } else { ?>
<p>No related posts.</p>
<?php } // end if/else having posts ?>

Save the file (upload if needed) and refresh the blog post you looked at earlier. You should notice a slightly changed result (we will put some style later).

Since WordPress version 2.9 there is a function called “post_thumbnail”. We would like to have one before each related list item. If your theme does not already utilize thumbnails, you will need to enable them before proceeding. For each theme there is a file called “functions.php”, open this file and add the following code:

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 50, 50 );

This will enable the thumbnail function in your theme and will set the image size to 50 pixel.

Edit one of the articles in your list and look for the box called “Featured Image”. Click the link, upload or select an image and choose “Use as featured image”. It’s not required to use the same image as in your post. Save your article and add this code to your related post template (right before the link/title)

<?php
if (has_post_thumbnail()) {
	the_post_thumbnail(); 
} else { ?>
	<a href="<?php the_permalink() ?>"><img src="<?php bloginfo('template_url') ?>/images/default.jpg" alt="blog post" /></a>
<?php } // end if/else thumbnail ?>

You need to upload the default image to your theme’s image directory as well. Save the script (and upload) and check your post with the related posts again. You will notice some image together with your list items. Let’s add some additional text to each item. We’ll use the function “the_excerpt” for this. This WordPress function will add the first 55 words from your article or the text which is entered in the field “Excerpt” from your article. Safe (upload) and revisit the page an notice the changes. Use this complete code for your theme to include also the “Excerpt” snippet. In our example we’re using a default image for posts where a featured image is not included, if you like download it here.

<?php if ($related_query->have_posts()) { ?>
<h3>Related Posts</h3>
<ul id="myRelatedPosts">
	<?php while ($related_query->have_posts()) {
		$related_query->the_post(); ?>
	<li>
		<?php
		if (has_post_thumbnail()) {
			the_post_thumbnail(); 
		} else { ?>
			<a href="<?php the_permalink() ?>"><img src="<?php bloginfo('template_url') ?>/images/default.jpg" alt="blog post" /></a>
		<?php } // end if/else thumbnail ?>
		<a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a><?php the_excerpt(); ?></li>
	<?php } // end while ?>
</ul>
<?php } else { ?>
<p>No related posts.</p>
<?php } // end if/else having posts ?>

Further optimizations

We like to have the post link for each thumbnail and the we like to use only 15 words for the Excerpt. Add the following filters to your theme functions file:

function my_post_image_html($html, $post_id, $post_image_id) {
	return '<a href="'.get_permalink($post_id).'">'.$html.'</a>';
}
add_filter('post_thumbnail_html', 'my_post_image_html', 10, 3);
 
function set_excerpt_length($newlength) {
	return 15;
}
add_filter('excerpt_length', 'set_excerpt_length');

We used the following CSS style for the related posts on Tutorial Depot:

#myRelatedPosts li a img { float:left;margin-right:5px;border:1px solid #ddd;padding:3px; }
#myRelatedPosts { list-style-type:none;margin:10px;width:480px; }
#myRelatedPosts li { padding-left:0;clear:both;height:65px; }
#myRelatedPosts li p { margin:0; }

Hopefully, you will find this upgrade to the Yet Another Related Posts Plugin useful. We suspect that you’ll have folks asking you how did you do it and we hope that you’ll tell them that you found it right hear on the Web Development Blog.

Comments

  1. The Google Panda update is interesting and nearly all SEO posts I read bring up similar threads however nobody seems to postulate on how we can change the habit of feeding the Google Search Monster. Surely there is more merit in getting 4 or 4 sites with equal share rather than allowing Google to dominate so heavily – feeding Qwiki , Blekko , Bing and not allowing Yahoo to die should be part of the SEO communities mission.It’s in your interest not to have just one large global player!

  2. So what is the criteria that wordpress uses in the $related_query to define related content?

  3. Hello Jimmy,
    I checked the plugin code for a minute to get behind this “mystery”, but it skipped it to trace all the conditions because the result looks good :) This is the information from the plugin author:

    Using a customizable algorithm considering post titles, content, tags, and categories, YARPP calculates a “match score” for each pair of posts on your blog. You choose the threshold limit for relevance and you get more related posts if there are more related posts and less if there are less.

  4. Thanks for such detailed instructions. It’s really helped me out. I have a few questions though. I REALLY like how the related posts are displayed on this website, with it being 2 columns. Any chance of explaining how that’s done?
    Also, for some reason I have 2 odd things happening when I follow the exact steps above. One, I’m seeing bullets next to each thumbnail. I added the “list-style-type:none” and every alternative I could find, but I can’t manage to get rid of them. Also, the 15 word post excerpt is only working for the first post listing. After that, it shows full length. Any idea why that might be happening?

  5. Hi Jim,
    Check the stylesheet I’m using for my site, it’s maybe a little bit “trial and run”. For your bullets, I think you need to overrule previous styles (use an ID for the UL element).
    Right my snippet is a little bit different than the code used in my tutorial: http://pastebin.com/rXTakwyL
    Inside the code I’m using a custom function called “create_short_version()”, you can find it here.

  6. thanks a lot! I’ll play around a bit more and let ya know how it goes!

  7. Well, it still doesn’t look as good as yours, but it’s good enough. I manged to get rid of the long post excerpts by adding your extra bit of code. And no matter what I did, I could not get rid of the bullets while using UL, but when I changed the code and CSS to OL rather than UL, it worked fine. Not sure what the heck was going on… probably some random conflict, but at least I got rid of the stupid bullets. Thanks!

  8. Hi Jim, great that it work for you. If you like to trace the “bullet” problem, inspect the code using Google Chrome. This browser has tools to show which CSS code is used for a specific element.

Because of all the spam attemps I've decided to close the comment form at this time. If you have have any questions or comments please post them by using Google+ or Twitter (the links to my profiles are located at the top of this page).