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.

Published in: WordPress Development