Sometimes you have to put your pride aside and resort to the talents of WordPress Plugin Developers – Yet Another Related Post Plugin is the perfect example. One of the problems you might find in your search for a Related Post Plugin is customization and this is exactly where the latest version of YARPP really shines. In the latest version, 3.1.3 at the time of writing this guide, you can now select a custom template file which allows you to modify both the format and style of your related posts. One of my personal favorite features of YARPP is the “Show only posts from the past X months” option. Of course being able to disallow certain categories and tags is also a great feature, but in terms of the relevance of the related posts for your readers – only showing posts from the past 6 months is priceless. In this guide I will be showing you how I created and style the related posts that you see on TechBlogStartup using The Thesis Theme for WordPress.
Step One: Download and Install the Yet Another Related Posts Plugin
You can download YARPP here or you can install the plugin within your WordPress dashboard in the Plugins/add new section (just search “YARPP”). Once you have the plugin installed you will need to copy the yarpp-template-example.php file into your theme directory – in this case I copied the file into my thesis_16 folder (/wp-content/thesis_16/).
Step Two: Open and Edit yarpp-template-example.php
Personally I use Dreamweaver 9 for all of my HTML and CSS editing. If you do not have Dreamweaver you can use the file editor within WordPress or you can open yarpp-template-example.php in your favorite text editor. If you decide to edit the file in your text editor be sure to upload the file back to your theme folder to overwrite the file we previously copied to that location. With the yarpp-template-example.php file open you will replace it with the following code:
<?php /*
Example template
Author: mitcho (Michael Yoshitaka Erlewine)
*/
?><h3>Related Posts</h3>
<?php if ($related_query->have_posts()):?><?php while ($related_query->have_posts()) : $related_query->the_post(); ?>
<div><div><a href=”<?php the_permalink() ?>” rel=”bookmark”><img src=”<?php bloginfo(‘template_url’); ?>/lib/scripts/thumb.php?src=/<?php $values = get_post_custom_values(“thesis_post_image”); echo $values[0]; ?>&w=80&h=50&zc=1″ alt=”<?php the_title(); ?>”/></a></div>
<div>
<div><a href=”<?php the_permalink() ?>”><?php the_title(); ?></a></div>
<div><?php the_excerpt(); ?></div>
</div>
</div>
<?php endwhile; ?><?php else: ?>
<p>No related posts.</p>
<?php endif; ?>
This is the code I use to call the Thumbnail file that is created in the Thesis theme, display a link to the post and also display an excerpt of the post. In my testing I’ve found that the style of related posts works the best to increase the page views on my network of tech blogs and on TechBlogStartup. If you would not like to show an excerpt or you would like to format these thumbnails differently feel free to edit the code at your leisure. I can also assist you if you run into trouble – just click the submit blog link in the navigation bar up top and send me a message or drop a comment below.
Step Three: Edit your Style Sheet – CSS
Since this guide is focused on The Thesis Theme for WordPress, the file we will be editing is the custom.css file which is located in /thesis_16/custom/. Copy and paste the following code into your custom.css file and save the changes. If you are not using Thesis, you can add this code into the style.css file for your current theme – note: some themes might have a style sheet with a different name, but the default WordPress theme uses style.css.
.custom .related_holder {display:block; height:90px; margin-bottom:10px; background:transparent url(/bg-dotts03.gif) repeat-x scroll 0 100%;}
.custom .related_pic {float:left; width:100px;height:90px;}
.custom .related_pic img {padding: 2px; margin-right:10px; margin-top:10px; border: #666666 solid 1px; display:inline;}
.custom .related_contents {float:right; width:520px; height:90px;}
.custom .related_title {font-size:12px;}
.custom .related_title a{color:#008800; text-decoration:underline;}
.custom .related_excerpt {font-size:12px;}
.custom .related_excerpt p{margin:0;}
For my setup of Thesis I use a 640px width content area – 520px is used for the text of my related posts and then my thumbnail images are set to 150px by 126px. You can change this setting in the Thesis Theme under Thesis Options / Post Images and Thumbnails / Default Thumbnail Settings. You will notice that I use a bg-dotts03.gif image which creates the horizontal row beneath each of my related posts. If you would also like to use this image download it here (right click, save as). Save the changes to your custom.css file after you’ve made the necessary adjustments for your setup.
Step Four: Go into Settings / YARPP
You will now need to go into your WordPress Dashboard and visit your Settings. Inside Settings find YARPP and scroll down to section Display Options section and check the box for “Display using a custom template file”. Select yarpp-template-example.php from the list then go down to the very bottom of the page and choose Update Options. You have now completed the setup of your Related Posts – time to refresh your website. Click a post on your blog and check down at the bottom see how your related posts are formatted — If things are looking good you can proceed
Step Five: Customize the Location of Your Related Posts
In the Thesis theme we live and die by Hooks. In the custom_functions.php file I have made the follow change so that my related posts are displayed at the end of my posts. Note: you can also use Open Hooks to accomplish the same goal – in this case all you need is to insert <?php related_posts() ?> in the thesis_hook_after_post section. Here’s the code I use in my custom.php file:
function post_footer() { ?>
<?php if (is_single()) { ?>
<?php related_posts() ?>
<?php } ?><?php }
add_action(‘thesis_hook_after_post’, ‘post_footer’);
The last step in the process requires that we go back into the WordPress Dashboard and uncheck the “automatically display related posts” option in the Display Options section. Once you’ve complete this step you should be good to go and on your way to some Killer Related Post in The Thesis Theme for WordPress. If you found this guide helpful or you have any questions please feel free to leave a comment below, we love to hear from readers.