- Jul 17, 2009
- 270 Comments
- Tutorials
Display Thumbnails For Related Posts in WordPress
In this tutorial you’ll learn how to increase pageviews by adding thumbnails to related posts using the popular YARPP plugin and WordPress custom fields.
The Goal
Before we start, let’s take a look at the result of what we’re building:
The sample above comes from the theme of a new One Mighty Roar blog launching next Monday. As you can see, WordPress will place a thumbnail and title for each related post it finds. This will add some bonus attention to the posts, and hopefully generate additional pageviews. Sound good? Let’s get started.
Download the YARPP Plugin
The basis for this tutorial is the popular (and well named) plugin “Yet Another Related Post Plugin” or YARPP for short. We’ve used it on this blog right from the start, and it’s great for generating additional traffic for posts in the same subject. Thanks to the plugin’s latest update, we can now build our own template to display results.
Go ahead and download the plugin now if needed. If you’re installing YARPP for the first time and have questions, I’m going to refer you to the official site for more. This tutorial will start assuming that you have it up and running already.
Create a Related Post Template File
You’ll notice that when you install the plugin, it includes a folder of preset templates for a variety of display options. They are a great starting point for learning the ropes, but since what we’ll be doing is relatively simple we can start from scratch. Begin by creating a new file named “yarpp-template-thumbnails.php” in the root of your theme folder. This file will contain the structure of our related posts display.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<?php /* Post Thumbnail Template Author: Zach Dunn (www.buildinternet.com) */ ?> <h4 class="meta">Related Posts</h4> <?php if ($related_query->have_posts()):?> <ol class="related-posts"> <?php while ($related_query->have_posts()) : $related_query->the_post(); ?> <?php //Set Default Thumbnail Image URL's $related_thumbnail = get_post_meta($post->ID, "thumbnail_url", $single = true); $default_thumbnail = 'default-image.jpg'; ?> <li> <a href="<?php the_permalink() ?>" rel="bookmark"> <?php if ($related_thumbnail != "") : ?> <img src="<?php echo $related_thumbnail; ?>" alt="<?php the_title(); ?>" /> <?php else : ?> <img src="<?php echo $default_thumbnail; ?>" alt="<?php the_title(); ?>" /> <?php endif; ?> <?php the_title(); ?></a> </li> <?php endwhile; ?> </ol> <?php else: ?> <p>No related posts found</p> <?php endif; ?> |
The code above says that if related posts exist, it will go through each and display the thumbnail image URL stored in the custom field thumbnail_url which has been temporarily saved into the $related_thumbnail variable. If no URL exists there, it will display the contents of the $default_thumbnail. This check keeps posts from being stuck without thumbnail previews.
Feel free to tweak it as needed. This is a stripped down version meant to demonstrate the inclusion of images and text, but there’s really no limit as to how in depth your template can become.
Insert into Single Template
In order to make sure that our related posts show up as intended, let’s manually insert the function into the single.php using the code below. I recommend placing it somewhere under the_content() tag.
|
1 2 3 |
<?php if (function_exists('related_posts')){ ?> <?php related_posts();?> <?php }?> |
Put simply, this code checks to see if the YARPP plugin is active, and shows the related posts if so.
Customize with CSS
To keep things simple, we’ll just stack the results so that the thumbnail displays on top and the post title on the bottom. Paste the following CSS into your theme’s stylesheet for a good starting point.
|
1 2 3 4 5 6 |
/* Related Posts */ ol.related-posts {clear:both; text-align:center; margin:10px 0px 0px 0px; padding:0;} ol.related-posts li{width:120px; float:left; display:inline; margin-right:15px;; padding:0;} ol.related-posts img{clear:both; padding:5px; background:#F7F7F7; border:1px solid #DDD;} ol.related-posts a{clear:both; display:block; border:none; text-decoration:none;} ol.related-posts li{font-size:12px;} |
Activate The New Template
Now that you’ve built a form for YARPP to render the related posts from, you’ll have to let the plugin know that you want to use the template. This can be done from within the plugin’s option panel in the WordPress dashboard.
Look for the “Display Options” section, and check the “Display using a custom template file” box. This will give you a chance to select the correct template from a dropdown box. If you’ve been following along with my naming conventions, you’ll want to pick “yarpp-template-thumbnails.php” and then save your changes.
Specifying Thumbnail in Custom Fields
The frameworks are in place, but how do you specify what thumbnail a post will use? The solution is surprisingly simple. When you’re editing a post in WordPress, you’ll notice a section below the write panel titled “Custom Fields.” This is where we’ll paste the URL of the thumbnail to be used for each post.
Once you’ve pasted in the URL of the thumbnail image to use, update the post and then YARPP should show it when displaying related posts. No extra headache involved here.
Grab More Attention
With image previews for each of your posts, there’s a better chance someone might see something that inspires them. To help you get started, I’ve included a ZIP file below that contains my version of the YARPP template. At the very least, it should help you get started with your own ventures.
Have I left anything out? Need clarification on a step? Leave a comment below. Good luck!
