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.
<?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.
<?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.
/* 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!
Discussion
July 17th, 2009 at 8:10 PM
This looks like a great idea. When I get my new layout done, I’ll have to play around with this for sure.
.-= Bill´s last blog ..Easily rename files with Advanced Renamer =-.
July 18th, 2009 at 7:30 AM
I played around with that for a while and never got it to work how I liked it. Now with your tutorial I can probably get it done. Thanks!
.-= Nicholas Z. Cardot´s last blog ..Fire Up Your Passion for Blogging =-.
July 18th, 2009 at 9:23 AM
thanks for good tutorial, its easy and understandable,but i getting no related post, even though i add three post under same category and tags also named for three post. why it happeing.?? will you reply for this.
[* note. i have only three post for now: newly launched blog :lol: ]
.-= sriganesh´s last blog ..photoshop tutorial on retouching =-.
July 18th, 2009 at 10:28 AM
That’s great, all in one place. Thanks.
.-= T-Law´s last blog ..tomaslau: 40 Sources To Download High-Quality Free #Photoshop PSD Stuff http://tinyurl.com/l68 =-.
July 18th, 2009 at 11:56 AM
@sriganesh
I would recommend that you lower the related threshold. By default, it requires something like 5 commonalities before associating posts. If you have a new blog, it’s entirely possible that no posts meet this requirement.
You can do this through an item in the YARPP options panel.
July 18th, 2009 at 3:41 PM
Thanks a lot for this post :)
I’ve actually never heard of YARPP (I know, I need to catch up).
Shall be giving it a whirl very soon :)
.-= ElanMan´s last blog ..Create Your First AJAX Request (Part Three) =-.
July 19th, 2009 at 9:20 AM
Brilliant tip Zach! I had actually just implemented something very similar on my soon-to-be-launched redesign when I came across this post. I also added a bit of jQuery so that I could have a conventional list of related posts with one image showing next to the list, and then on mouseover the image changes depending on the link being hovered.
.-= Epic Alex´s last blog ..Site Redesign Preview =-.
July 19th, 2009 at 8:52 PM
This is great! I have never thought of using something like this before in my blogs, but now that I can see how easy it is to implement I might have to add it.
.-= Jake Rocheleau´s last blog ..Getting Inside Web Design Dev with Creator Michael Dunlop =-.
July 20th, 2009 at 12:00 AM
Nice tutorial. :) I implemented it with no problem. I give u props for this nice tutorial and will suggest it to others.
Greetz
July 20th, 2009 at 12:26 AM
Thank you for this! Just implemented it on Primer and it works great!
.-= Andrew´s last blog ..Five Terrifying Dinosaurs That Deserve More Attention =-.
July 20th, 2009 at 10:24 AM
Thanks for the tutorial… very interesting and helpful…
July 20th, 2009 at 2:14 PM
Nice, images draw visitors in, and I have been looking for something just like this.
.-= Rob´s last blog ..The Best Search Engine Again – It’s Still Not Google =-.
July 20th, 2009 at 5:36 PM
I have just added thumbnails for related posts to my blog. Thanks for making this so simple!
July 20th, 2009 at 10:08 PM
But filling up custom fields every time is really a headache job.. is there any cure for that??
.-= vinoth´s last blog ..Creating Emergency Boot up Rescue Disk =-.
July 20th, 2009 at 11:04 PM
@ thnaks for the reply and i changer it to 3, even thought it comes. you can see in ma site. and by the way this week i llpost 5 more post. ill try then ill tell u sir.
.-= sriganesh´s last blog ..photoshop tutorial on retouching =-.
July 21st, 2009 at 9:06 AM
Great post thanks, I’m now using it with small adjustments on my site.
.-= Self help blog´s last blog ..How To Lose Weight Without A Diet =-.
July 21st, 2009 at 4:34 PM
Hi Zach, that’s great tutorial. I use ephoto theme from elegantthemes.com. In this theme, I use “thumbnail” custom field by default. will it work for me to change “thumbnail_url” to “thumbnail” basically ?
or how should i mofiy php template ?
Thanks
.-= eddai´s last blog ..Kurdele İşi Klozet Takimi Ornekleri – 2 Yakin Çekim =-.
July 21st, 2009 at 4:50 PM
@Eddai
As long as the “thumbnail” field contains a valid image URL, you should be all set. Just find and replace all instances of “thumbnail_url” with “thumbnail” in the YARPP template. Also, make sure that you update the CSS to reflect the correct size (if it’s different). Good luck!
July 21st, 2009 at 5:50 PM
Yes Zach, did it it really works charm now!
I had requested this feature on elegantthemes forums and had been waiting for a long time until seeing your quite simple tutorial.
Thanks!
.-= eddai´s last blog ..Kurdele İşi Klozet Takimi Ornekleri – 2 Yakin Çekim =-.
July 21st, 2009 at 9:06 PM
excellent!! never realized the templates were in the root of the themes. i was changing/adding template code here in plugins/yet-another-related-posts-plugin/yarpp-templates directory. thanks
July 22nd, 2009 at 5:35 AM
Hey, this is a very cool use of Yet Another Related Post Plugin(YARPP) together with the custom field. Thanks!
.-= Dicky´s last blog ..65 Absolutely Cool And Creative Twitter Backgrounds =-.
July 26th, 2009 at 3:45 AM
Thank you very much. Your hack gave a new, fresh air, at the related posts section of my blog.
.-= Stelios´s last blog ..Παπαδάκης Κωνσταντίνος ή Λυρατζάκι =-.
July 26th, 2009 at 1:51 PM
Thanks, I was just looking for this. Will have to switch WRP for YARPP though.
.-= Martin´s last blog ..Movies 2009-06-22 – 2009-06-29 =-.
July 28th, 2009 at 3:05 PM
Thank you very much for this. Never really considered using YARRP, but thanks to this tutorial I now have related posts at the end of each of my articles and posts!
.-= James White´s last blog ..Controlling www or no www in .htaccess =-.
July 28th, 2009 at 5:45 PM
Zach, this is a great tutorial! I’d like to collect some good examples of such customized related posts “in the wild” to add to the screenshots section of the YARPP website… if you have a site actively using this with nice thumbnails, perhaps I’d like to use such a screenshot.
Linked! :)
July 28th, 2009 at 6:19 PM
@mitcho
Thanks for writing such a great plugin :)! If you’re looking for examples, you can check out our latest blog over at Officeal or take a look at some of those who have commented on this post (They’ve implemented it in a number of ways).
July 31st, 2009 at 7:15 AM
Hmm… Great post. I think it’s very helpful as beginer and as expert :). Thanks
August 6th, 2009 at 7:15 PM
I have a large blog that doesn’t use custom fields. Can your tutorial be modified to use the first image found in the blog post for the thumbnail instead of using a custom field?
August 6th, 2009 at 7:16 PM
@Kelly
That falls outside the scope of this tutorial, however this PHP script should be a good starting point for what you’re looking to do.
August 8th, 2009 at 1:46 AM
I can’t code if my life depended on it. Any chance of a new tutorial or do you do custom work?
August 8th, 2009 at 10:21 AM
@Kelly
There isn’t really much reason to do another tutorial. You can get in touch here, and we can figure something out.
August 11th, 2009 at 5:27 AM
Wow , Great Tutorial ..Thanks for Sharing :) I like It :D
.-= Husien Adel´s last blog ..9 أسرار تسويقية لمصممي الويب =-.
August 18th, 2009 at 5:33 PM
Excellent tutorial. My blog uses timthumb to resize images to thumbnails… is there way to somehow use that to put it into action with YARPP?
.-= Callum Chapman´s last blog ..Giveaway: 1,000 Full Colour Business Cards! =-.
August 23rd, 2009 at 5:32 AM
regarding Callum’s request, I also wonder if we can display resized images to be displayed in related posts.
as with the default settings, the original images are fetched instead thumbnails.
my site also uses timthumb.
Thanks!
.-= eddai´s last blog ..Çiçekli Havlu Kenarı Örneği =-.
August 26th, 2009 at 7:13 PM
You’ve shared some great info but I’d love to read your feedback regarding Callum and Eddai’s request regarding Timthumb (my site also uses it).
Regards,
Karl
.-= Karl Foxley´s last blog ..CommentLuv For Traffic Generation and Increased Blog Exposure [lbtt] =-.
August 27th, 2009 at 4:44 AM
Hi buddy, thanx for nice post though I had nothing to say but then suddenly I happen to notice that your WP -Super cache is not working ;)
I had similar problem and had to shift my WP site to a dedicated box as shared hosts were not allowing it as WP-SUPER CAChe failed.
Just see page creation time in different browser. I had spent lots of hours to fix the issue but I guess its fault with WP-Super Cache latest versions.
Its actually creating new page on every request.
Solution can be using old version of WP-super cache (if you can) or Run it in “Half Mode” .
If this thing helps you then do say thanks to me :)
.-= Linux Guy´s last blog ..How to access my Outside (live ip) form inside . =-.
August 27th, 2009 at 11:45 AM
it’s really2 cool
August 27th, 2009 at 12:04 PM
Cool tutorial! I’d love to try this but like what vinoth mentioned, it would be a tedious job to fill up custom fields every time for each related post. It would be cool to have the plugin automatically detect the image, create a thumbnail and resize it using the TimThumb script which my theme also uses.
If that’s not possible with YARPP, maybe you can create a new plugin that does all that?
Anyways, good job with this tutorial and looking forward to more cool tutorials. :)
.-= Jaypee´s last blog ..Google Certified Ad Networks =-.
August 28th, 2009 at 4:32 AM
I have applied following to my yaarp template and now it fetches thumbnails..change the code in line 23 with the following
<img src="/timthumb.php?src=” alt=”" />
August 28th, 2009 at 4:35 AM
sorry..code does not completely appear..i do not know how to post full code here..
August 28th, 2009 at 5:35 AM
Lots of stuff to do =.=
I just need a simple one :(
.-= Amazooo´s last blog ..Swine Flu Vaccine Urged For Pregnant =-.
August 30th, 2009 at 6:17 AM
I hope someone will create a free plugin for this, which will also automatically fetch the first image from each of the related posts (and alternately display a default image).
.-= Pallab´s last blog ..Monitor Your Bandwidth Usage With Networx =-.
August 31st, 2009 at 7:15 AM
This is really a helpful plug-in to keep your visitors. But I just noticed that this site doesn’t use it.
.-= Ezuca´s last blog ..70 FREE and Most Downloaded WordPress Themes =-.
August 31st, 2009 at 10:33 AM
I’ve gotten it to work in the way that it fetches the first image of each related post. Will be putting up a post on that on my site later on.
It is rather simple actually, just search up on how to fetch the first image and then edit the code accordingly.
Thanks for the great idea of putting images besides related posts, never actually thought of that before! Great stuff!
.-= Swift´s last blog ..Happy Teachers’ Day 2009 =-.
September 1st, 2009 at 1:41 PM
Thankyou very much for this article. It has helped me a lot!! You’re great! :)
September 2nd, 2009 at 9:26 AM
@Jaypee That is possible with an excisting addon:
WP-Choose-Thumb: http://wordpress.org/extend/plugins/wp-choose-thumb/
In this script change on line 16 “thumbnail_url” to “wct_thumb”
Awesome combination =)
(sad thing is, i was using another plugin at first, so have to change all my thumb)
.-= Freakenstein´s last blog ..Dikke Duim voor HTC =-.
September 10th, 2009 at 2:14 PM
what a GREAT, thanks for the thumbnails Bos,pram from Indonesia say Hello, and best wish for you Zach.
.-= info bisnis´s last blog ..Badan Penanaman Modal Kabupaten Banyumas =-.
September 12th, 2009 at 3:00 PM
I’ve tried following your tutorial, but am having issues with it showing up. I’m using the “Atahualpa” theme. I do not have a single.php file, and I think that is the problem that is preventing the related posts from showing up. Where would you recommend inserting that function?
.-= Greg´s last blog ..September 11th, Patriot Day and Baked Macaroni and Cheese =-.
September 12th, 2009 at 3:03 PM
@Greg
You’re going to have a difficult time adding in minor tweaks without a single.php. I recommend you make a single.php based on the index.php page. Then you’ll be able to work in things like this tutorial without any headache.
September 21st, 2009 at 8:36 AM
Hi Zach,
Many templates doesn’t use thumbnails for posts. So I guess it would be nice to add a feature to automatically insert the first image file in posts as a thumbnail image. There is such a plug called linkwithin and I use it on one of my blogs http://www.freemoneyguide.com
.-= bedava´s last blog ..bedava sms: freesms ile bedava sms gönderme =-.
September 22nd, 2009 at 2:28 AM
I am already running a blog without using costume code for posts. Does this plugin grab the first image or do I have to edit all my posts? (it will very difficult to do so, I have almost 800 posts so far).
September 26th, 2009 at 2:43 AM
Awesome tips…
Please make intergration between autothumbnailer with existing custom field
timb thumb:
http://www.darrenhoyt.com/2008/04/02/timthumb-php-script-released/
would be less maintenance and easy to post content without extra effort to post thumbnail images.
sorry for my englsih…
.-= Mansur´s last blog ..Apprecite Beauty =-.
September 29th, 2009 at 11:39 AM
yarpp is worst plugin i have come across
you can check Contextual Related Posts which give u better result, i did testing with only 3 post same topic about the same product in my test blog where yarpp give no related post and Contextual Related Posts give me all the 3 post as Related Posts
September 29th, 2009 at 1:13 PM
@Roger
Sorry to hear that you didn’t have much luck with YARPP, but based on your experience I wouldn’t rule it out so quickly.
I suspect you overlooked some of the settings in the YARPP panel that allows you to set minimum related level. This means that instead of matching posts based on title alone, other criteria (tags, category, etc) must also be present. It helps keep things related on deeper levels, and is a common thing to overlook.
I think it’s a wonderful plugin, and hopefully you’ll give it a second look.
October 22nd, 2009 at 5:30 PM
Maybe windows installed in your house are not as good Sweden but the one I have installed are. ,
October 23rd, 2009 at 12:28 AM
Zach, works great, thanks for the tutorial, If I want to display 10 related posts with 5 in each row, can you suggest the css modifications, i’ve tried changing the css but its not uniform for all posts, i mean in some cases the the related posts in the second row are not in one line, would appreciate your help..
.-= Avinash´s last blog ..Copytrans Manager – Free, Portable iTunes Alternative =-.
October 27th, 2009 at 7:12 AM
just one question: does’t it work if my custom field has already images that are hosted on imageshack?or it works only with images hosted on the site domain?
November 4th, 2009 at 8:30 AM
the zip can never be installed because it has an invalid header….any solution to this? i’ll cordially appreciate it..
.-= Ezuca´s last blog ..Top 20 of the Best Wii Games =-.
November 4th, 2009 at 9:22 AM
@Ezuca
The zip attached is just of source code to be used inside of WordPress. It is not simply a plugin file to be installed. Sorry for any confusion!
November 8th, 2009 at 3:41 AM
Master Zach, lol.
Is there a way to Customize with CSS, so that the image size will just be 70×70? please..
.-= BryanV´s last blog ..PINOY KALAMAY =-.
November 18th, 2009 at 6:12 AM
Really useful article !
BryanV, I just put a 70×70 image with the thumbnail_url name, and it works. You just need to change the width (in CSS) 120px by 60 or 70 px.
Is there a way to remove the text, and only display the images ?
Thanks.
November 18th, 2009 at 11:45 AM
Is there any way to customize this? Instead of getting the thumbnail image from the custom fields, the script will just get the thumbnail from the first image uploaded in the post? Woooooooot…
November 18th, 2009 at 8:32 PM
Thanks Zach for such a wonderful post, Though earlier I was using link within widgets to show related posts with thumbnail, recently I started using wp-thumbie plugin which picks up the first image from the post to show related post.
November 20th, 2009 at 12:12 PM
$default_thumbnail = ‘default-image.jpg’;
<img src="” alt=”" />
Where should I upload the imge for default-image.jpg ?
Please help..
November 20th, 2009 at 9:58 PM
The images are showing up too big. How to solve this?
November 22nd, 2009 at 12:05 AM
Hi, can you tell me what code can I add to the php file so the thymbnails are resized to lets say 100px x 100px
I’m already using a custom field, but now the pictures are huge and I need to set custom size, please help.
November 22nd, 2009 at 10:40 AM
@Bryan V
Just put the URL of your image there. I recommend using absolute paths to avoid any confusion.
@Inglid and paff
From the looks of it, I don’t see anything in this script that would cause the images to be different sizes. Perhaps some of your theme’s CSS is conflicting? If so, you’ll want to add in styles to specify the size.
November 23rd, 2009 at 1:50 AM
Thx for the tutorial, so far I manage to get thumbnail display on all related post, but need some time to add thumbnail for all older posts.
November 24th, 2009 at 4:19 AM
Anyone know how to diplay only the thumbnails and remove the title of the article ?
Thanks.
November 24th, 2009 at 10:48 AM
Thank you!
There is some problem – I add custom field, write image url, but there is no thumbnails, just text… How to solve this???
December 2nd, 2009 at 6:31 AM
many thanks .. helped me alot :) ♥
December 2nd, 2009 at 10:03 AM
This is a bit miserable, since i have to add a image every post i make. This makes my time fly away.
At first impression it sounds like the 100% related posts plugin, but it isnt.
December 5th, 2009 at 3:59 PM
This simply rocks and works flawless, I do have one small question though. Is it possible to extend the script somehow to include a line or something from the text within the post, not only the headline? Best of regards :)
December 8th, 2009 at 6:01 AM
i m using wp-thumbie plugin which does this work..
December 8th, 2009 at 6:01 AM
I m using wp-thumbie plugin which does my work..
December 8th, 2009 at 8:06 PM
I have updated in my website, after doing some little fixes in css.
December 13th, 2009 at 4:07 PM
Thanks for this share. I make use of recent-posts-plugin.2.6.2.0 & post-plugin-library plugin for “recent post with thumbnail option”.
Now after reading your article, I have turned my related post into thumbnail option.
December 14th, 2009 at 11:45 PM
Great plugins, tried it on my site, works well. Still need to play around with my css.
To show only thumbnail remove php the_title() in the template.
For poster whose used other plugins to get the thumbnail, have a look at your postmeta table and see the value and just change the template “thumbnail_url” to that.
Theres also get post image plugins which you can use if you dont have custom field, but it requires a bit of work.
Make sure you have a look at your html source code to see is the thumbnail is properly pathed.
Tips to anyone whose play around with css, use css refresh for firefox plugin so you get intant refresh everytime you modify your css. Its beta but it works.
December 17th, 2009 at 1:52 PM
Thanks for the tutorial!
I’ll echo @Rajesh with a recommendation for “wp-thumbie”, which automatically generates thumbnails.
Your CSS looks better though :P Some tinkering might be in order…
December 23rd, 2009 at 9:40 PM
Hi,
Is there a way to use get_bloginfo() and template_directory in yarpp-thumbnails-template.php to link to default-image.jpg ?
Thanks
December 28th, 2009 at 7:49 PM
Thanx alot for a great tutorial!!!
I managed to get auto thumbnail resize work on my site. It’s because i already used a Coldstone theme which have thumbnail custom field and auto resize function included. So i just replaced
“$related_thumbnail = get_post_meta($post->ID, “thumbnail_url”, $single = true);”
with
“$related_thumbnail = get_post_meta($post->ID, “Thumbnail”, $single = true);”
and added resize function:
<img src="/timthumb.php?src=&h=100&w=100&zc=1&q=100″ alt=”" />
Full code of the template:
“have_posts()):?>
have_posts()) : $related_query->the_post(); ?>
ID, “Thumbnail”, $single = true);
$default_thumbnail = ‘default-image.jpg’;
?>
<a href="” rel=”bookmark”>
<img src="/timthumb.php?src=&h=100&w=100&zc=1&q=100″ alt=”" />
<img src="” alt=”" />
No related posts found
”
You can see examples on my site
http://www.djkrypton.de i think almost in every post)
Thanx once again!
December 28th, 2009 at 7:53 PM
Sorry, but i think the whole php code is not shows
I’ll try it once again
have_posts()):?>
have_posts()) : $related_query->the_post(); ?>
ID, “Thumbnail”, $single = true);
$default_thumbnail = ‘default-image.jpg’;
?>
<a href="” rel=”bookmark”>
<img src="/timthumb.php?src=&h=100&w=100&zc=1&q=100″ alt=”" />
<img src="” alt=”" />
No related posts found
December 29th, 2009 at 3:00 PM
another really simple way to resize your thumbs is to change this:
<img
src="”
alt=”" />
to something like this:
<img
src="”
height=”100″ width=”120″ alt=”" />
at least, it’s working so far…
January 4th, 2010 at 2:52 AM
Helpful post. Thanks a lot for this good direction.
January 6th, 2010 at 11:15 AM
finally my YARP working with thumbnail.. thanks guys. i have made changes in yarp template to work with timthumb..
January 7th, 2010 at 5:31 AM
how to create it without customfield? so it automatically grab first attached image in post. because it is hardwork to edit 500 post in my blog.
January 16th, 2010 at 8:54 AM
Thank you for this easy tutorial.
January 22nd, 2010 at 7:32 AM
build in one step (plugin) please :)
January 22nd, 2010 at 7:36 AM
Hi.. better if, all step create in one plugin?
im confuse implementate in my blog :)
Your comment is awaiting moderation.
January 27th, 2010 at 7:42 AM
This is great! I have never thought of using something like this before in my blogs, but now that I can see how easy it is to implement I might have to add it
January 27th, 2010 at 1:45 PM
hi..its a really great tutorial. i have follow all the step. but there appear this messages “Parse error: syntax error, unexpected ‘}’ in /home/lapadeh/public_html/wp-content/themes/irresistible/single.php on line 21″when i click on my post!
what happen????
January 27th, 2010 at 9:32 PM
I’ve modified this template to do show the first image that is found in a post. It actually combines that with the custom-field. So we have (in order):
1) Use the custom field “template_url” image
2) If not found, then use the first-image found in post
3) If not found, then use a default image
Hope this helps someone! Sorry, i’m no good with php, but its pretty simple and can probably be tidied a bit.
http://www.actionscriptstuff.co.uk/ianwebb/yarpp-template-thumbian2.zip
February 20th, 2010 at 3:23 AM
I think we can use WordPress 2.9′s new feature “Post-Thumbnail” for this plug-in.
Is anyone using it?
March 1st, 2010 at 3:41 PM
Thanks for the code. I was looking for a way to customize my related post.
March 1st, 2010 at 6:19 PM
I use this, and its perfect.
But i wonder – how can I use this in the sidebar/ widget with Recent posts or most popular?
Any tips?
March 14th, 2010 at 7:20 PM
@Arvid
Same question.
Can i use this for, Popular or Recent post, in SIDEBAR??
March 15th, 2010 at 12:38 PM
Hi Thanks for this plugin
Works perfectly with TimThumb – I used it on my website http://www.redkoaladesign.pl/
Looks awesome!
March 17th, 2010 at 7:18 PM
I keep getting an error: Parse error: syntax error, unexpected T_DNUMBER in /hermes/web08/b1485/moo.cruthas/wp-content/themes/arras-theme/yarpp-template-thumbnails.php on line 16…
Anyone have any idea whats up? I have followed the directions to a T and have gone over them again.
Any help would be great…
March 30th, 2010 at 8:47 PM
Great write up! I really like how you presented your tutorial.
I created a similar custom YARPP template with thumbnails using timthumb to generate my thumbnails as it is already being used extensively by my blog.
April 2nd, 2010 at 2:38 AM
Thanks! I’m using this idea in my new WP theme :)
April 7th, 2010 at 1:29 PM
Hey thanks a bunch for the tutorial, I went from deactivating the plugin bc of the no thumbnail to now being able to use it again! It all seems to make sense and I am closer to the final but I dont see where you put that extra code under the “the_content() tag” on the single.php page…I dont see the “the_content() tag”, what is this snippet for anyway? Also, on a short post how do I get the “Related Posts” text to align down with the posts, it keeps wanting to sit directly beneath the post, see > (http://www.pubagenda.com/2010/03/23/la-pubagenda-guest-bartending-sharkeez-hermosa-beach/)
Here is a good example where I have the 4 related posts but the CSS is off…I used your CSS example but added the auto resize part to it..
/* Related Posts */
ol.related-posts {clear:both; text-align:center; margin:10px 0px 0px 0px; padding:0;}
ol.related-posts li{width:105px; float:left; display:inline; margin-right:15px;; padding:0;}
ol.related-posts img{width: auto; height: 91px; 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:10px;}
Please help me get it right! : ) oh PS how would I align everything if I wanted to do 6 total related posts and wanted to do 3 on top and 3 on bottom?
Thanks, Matt
April 7th, 2010 at 1:32 PM
whoops here was the link to the good example for the 4 posts not being aligned http://www.pubagenda.com/2010/03/17/happy-st-patricks-day/
April 7th, 2010 at 6:35 PM
don’t mean to spam your comments but I was thinking, instead of displaying 2 lines of image related posts how could I display say 4 image posts across then below those show additional “text” suggestions?
April 12th, 2010 at 7:36 PM
anybody can help (step by step like for dummies :)
how use YARPP + timthumb
for connect thumbnails from first image
not from custom field
April 14th, 2010 at 1:58 AM
ok after messing with it forever I seemed to have gotten the images aligned but I cant get the text to wrap the width of the image, it also is aligned to the left even if I put “align center”..how do I get the text to begin and wrap to the width of the image? See below for my css and here is a URL that shows a good example of 6 posts. http://www.pubagenda.com/worlds-strongest-beer-2/40
/* Related Posts */
ol.related-posts {clear:both; text-align:left; margin:10px 0px 0px 0px; padding:0;}
ol.related-posts li{width:105px; float:left; display:inline; margin-right:50px;; padding:50;}
ol.related-posts img{width: 110px; height: 110px; clear:both; padding:5px; background:#F7F7F7; border:1px solid #DDD;}
ol.related-posts a{clear:both; display:block; align:center; border:none; text-decoration:none;}
ol.related-posts li{font-size:10px;}
April 15th, 2010 at 4:28 PM
Hey guys, and thanks Zach for a great tutorial.
I wanted to get the first thumbnail from the post, so im using get_the_image plugin from Justin Tadlock.
My code is as follows:
´You might be deligted to read
have_posts()):?>
have_posts()) : $related_query->the_post(); ?>
<a href="” rel=”bookmark” class=”relatedimage” title=”"> array( ‘Thumbnail’ ), ‘default_size’ => ‘thumbnail’ ) ); ?>
<!– ()–>
No related posts.
´
Using a plugin to display php, i intered the ´1.
2.
3. ´ code into a text widget and looking at the source code for some css styling this is what it looks like:
´#text-23{padding-left:15px;padding-right:15px;border:none;width:640px;display:block}
#text-23 .thumbnail{
width:93px;height:93px;}
#text-23 .H3{color:#000;font-size:20px;padding-top:10px}´
Do observe that im only displaying the thumbs and NO text.
Just wanted to share my way of using thumbs in related posts. Hope you can use it.
Zack – thumbs up for the tutorial.
April 16th, 2010 at 7:25 AM
This was easy to follow, took 5 minutes to set up, and could not have worked more brilliantly. Why can’t everything be as easy as this?
April 20th, 2010 at 4:55 PM
Hi Kristian,
I was looking for connection get_the_image wit yarpp. And you are the first one who made it.
I tried to implement your version of code, but I can’t do it. Is this full code or just piece of them. Can you paste here how exactly it should look?
April 20th, 2010 at 5:56 PM
@hendrix,
Sorry – didnt know what went wrong when i posted the code, but not sure how to post it, so it doesnt break.
Can someone tell me how to display the code so it doesnt break, so i can post my code?
April 21st, 2010 at 12:29 PM
@Kristian
We’ve had success with the PRE tag in the past. If that fails, try throwing it up on Sniplr in the meantime. We don’t have any non-standard filters on the comments, so typical WordPress tags should work.
April 21st, 2010 at 6:21 PM
Thank you Zach: Ive posted it on Sniplr here:
http://snipplr.com/view/32616/images-with-get-the-image-plugin-for-yarpp/
Hope you guys can use it
April 22nd, 2010 at 3:50 PM
great stuff thanks for the share
thanks again
April 26th, 2010 at 1:35 PM
I receive in error concerning line 16 in the yarpp-template-thumnails.php file. I tried to change “thumbnail_url” in line 16 to “thumb” since my theme uses thumb as customfield for thumbnails but nothing has changed so far. I receive the same error!
Could you please help me, I want to use the feature as soon as possible!
Thanx a lot!
April 27th, 2010 at 6:04 PM
Hi Everyone,
Based on some of the email lately, I’ve uploaded an additional demo page demonstrating how multiple rows of posts might work. You can find that demo here.
May 1st, 2010 at 4:41 AM
Just installed plugin and have a few issues:
1) When I insert function to a single.php file, I have two absolutely similar Related Posts blocks. Without adding any additional code to single.php file, Related Posts are shown only ones.
2) No thumbnails are displayed
3) For some reason box “Display using a custom template file” is inactive (can not be checked) :(
I really like this plugin but can’t figure out how to make it work, can you please help me?
May 1st, 2010 at 6:02 AM
please disregard my comment, I managed to make it work :) thank a lot for a great tutorial!
May 3rd, 2010 at 6:25 AM
It’s works for me )) thnx
May 10th, 2010 at 2:28 PM
May I ask how to get it to auto add thumbnail based on last image. Rather than having to manually add it via custom fields.
Been trying to figure this one out for a long time now but with no success. It is possible though isn’t it?
May 11th, 2010 at 9:48 AM
Hey Mark, and everybody who’s wondering how to add auto thumbnail based on first image in a post.
In a glance of my version of the code:
-Looks for specific thumbnail for a post, if not found:
-Looks for first image in a post, and displays it with fixed sizes, if not found:
-Displays default thumbnail.
In addition:
My CSS makes the list of related posts vertically, where there’s one line of text per each related post, I have added additional function that will add “…” in the end of the text if it exceeds that length; this way it looks better.
To add auto thumbnail as first image from a post, just insert this line at the end of your functions.php, just above ?> end tag.
—————-
function catch_that_image() {
global $post, $posts;
$first_img = ”;
ob_start();
ob_end_clean();
$output = preg_match_all(‘//i’, $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){ //Defines a default image
$first_img = “”;
}
return $first_img;
}
—————-
And add this code in your YARPP template file:
$imgthumb = catch_that_image();
And then just “echo $imgthumb” where you need it to be displayed; of curse all that within the loop.
for further reading:
http://www.alivethemes.com/how-to-create-style-related-posts-using-yarpp-plugin/
Robert
May 14th, 2010 at 12:47 PM
This is useful instruction. I want to put the thumbnails under each of my blog post too. thks
May 15th, 2010 at 5:44 AM
Super cool tutorial Zach, thanks! I’m trying to get it work with Timthumb if you familiar with, it creates a thumbnail on the fly when adding the thumb image source(url) to the custom field for improved speed and caching as I’m using quite big images and it’s really not worth to get the page rendered for very small thumbs of the related posts. Do you think you will be able to call Timthumb from the YARPP template you made in this tutorial? I’ve tried to play with it myself but no luck, couldn’t make it work.
In case you’re not familiar with Timthumb here is a link the :
http://www.darrenhoyt.com/2008/04/02/timthumb-php-script-released/
Cheers
A.
May 21st, 2010 at 12:30 PM
I’ve been trying to get this work with the new wordpress 2.9 thumbnail feature with no success. Not a wordpress wiz so i think the answer must be obvious and right under my nose.
Anyone else having success getting the image the designate the thumbnail (via the wordpress editor) to appear with this widget?
May 21st, 2010 at 4:04 PM
I’ve managed to get it work with ‘Timthumb’ over here:
http://archondigital.com/studio/wordpress/plugins/linkwithin-inspired-yarpp-template/
Anyone who is thinking 2 steps ahead and want to optimize his blog for quick loading should try using YARPP with Timthumb. Hope it helps …
Just to stress the idea of,If for example your original images that you inserting to the WP custom Fields are quite big/heavy then what you actually doing is resizing them via CSS/HTML, this is way wrong to do as the browser actually loading the full image and just show them small as thumbs, Timthumb on the other hand CROPS the images you add to the WP Custom fields ON THE FLY and put them in a cache folder for even better page loading. so it’s highly recommended if your source images are high..
May 21st, 2010 at 10:03 PM
Bravo Well done !! very good tut and i put it on my site as well http://www.designzzz.com there were a few errors , was showing no related posts to guest and related posts with thumbs to loged in users. also i managed to play around and added function so it can automatically grab first image of post so no need of custom fields anymore :) thx alot for the great start !
May 23rd, 2010 at 7:04 PM
How to use tables?
3 Top and 3 bottom
May 24th, 2010 at 10:11 AM
I love you so much! XD
I was looking for a solution for posts related but until now I wasn’t found anything… but now it’s done! Yeeeah *-*
May 24th, 2010 at 12:18 PM
I found https://buildinternet.s3.amazonaws.com/live-tutorials/yarpp-thumbnail/yarpp-thumbnail-rows.htm#
June 6th, 2010 at 9:28 AM
/* 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;}
How can i modify the thumbnail size to: 90px × 130px
June 6th, 2010 at 10:52 AM
I made it, here it is the CSS code, you can change it very easly:
/* Related Posts */
ol.related-posts {clear:both; text-align:left; margin:10px 0px 0px 0px; padding:0;}
ol.related-posts li{width:105px; float:left; display:inline; margin-right:0px;; padding:0;}
ol.related-posts img{width: 90px; height: 130px; clear:both; padding:5px; background:#F7F7F7; border:1px solid #DDD;}
ol.related-posts a{clear:both; display:block; align:center; border:none; text-decoration:none;}
ol.related-posts li{font-size:11px;}
Thanks A LOT !
June 8th, 2010 at 3:09 PM
It looks impressive. Let me give it try, I’ll see how it works out for me.
June 9th, 2010 at 9:44 AM
How can i move the thumbnails somewere else? i know the code for thumbnails, but i don’t know how i can delete thee previews code to add the new one somewhere else.
June 10th, 2010 at 10:05 AM
this worked perfectly–thanks so much!!
June 14th, 2010 at 11:48 PM
thanks for this tutorial, i will use it
June 25th, 2010 at 10:31 AM
Hi I have followed the instructions to the letter, the only thing I have changes is inputting the absolute file path to my default image, but for whatever reason I am getting double results for my related images (see image here: http://yfrog.com/2mpicture6gep) please can some one help as this is really quite annoying.
June 28th, 2010 at 10:31 PM
i’ve implemet this one. the related posts show before and after post . but i want related post just show after post. coul you show me the way …
thanks
June 29th, 2010 at 9:17 AM
Absolutely awesome tutorial. Easy to understand codes well separated and well made. Simply great. Thanx a lot. I used it on my new website http://www.starbrushes.net.
There is not much there yet cause I just opened it but thanx a loooot
June 29th, 2010 at 11:41 PM
Great tutorial, seems pretty easy, can’t wait to use it!
Thanks,
July 1st, 2010 at 12:08 PM
I did it and it worked fine, I had to modified some of the lines in order to work for me but over all this is great.
Thanks again!
Check it out in action http://bit.ly/9PWCmc
July 5th, 2010 at 2:13 AM
Thanks. This is what I’m looking for. Can’t wait to play with the code again. Seem pretty easy tutorial to me. Thanks again.
July 20th, 2010 at 4:45 PM
Man you are the best . I try this tutorial and was the only one who works for my website . Tnx alot for this good tutorial and if you want to see this in action you find on http://www.downloadfreegraphics.info
July 22nd, 2010 at 6:04 PM
Hi,
I have copied the code from the tutorial (template), activated the plugin using this new template, but no image is shown.
I use WordPress 3.0 multiblog and my theme does not use extra “custom fields”, but it uses the new function of WordPress 3 “post thumbnails”.
Each post has an image, that is uploaded, attached and used as “post thumbnail”.
What need I to modify, that these images are shown in the related posts area?
Within the grey boxes of the following screenshot there should be the images:
http://i25.tinypic.com/xml7jd.jpg
July 23rd, 2010 at 2:41 AM
Did anyone make the plugin yet? I’m currently using LinkWithin but they put their near the thumbnails. It’s free though.
July 24th, 2010 at 9:46 AM
Hay man thanks for this tutorial and so the code files but i have a little problem. When i click on a post it shows the related posts and the images but it doubles it. Here is a screenshot > http://img409.imageshack.us/img409/7060/screenshotb.png
Join the Conversation!
Remember: Life's not all doom and gloom, so please keep it constructive. If we've made an error or missed something big, please let us know! Learning is revisions, after all.