Related Post with Thumbnail WordPress Plugin

Related Post with Thumbnail WordPress Plugin is one of the most important WordPress plugin that you must have. It provides the blogger internal links and other important benefits that can add value to the blog.
 
One of the most effective Related Post WordPress Plugin that many WordPress bloggers use is YARPP or Yet Another Related Post Plugin. Unfortunately, the said Related Post WordPress Plugin doesn’t carry a post thumbnail which really sucks. But due to the improvements made by the WordPress Plugins experts, YARPP Related Post with Thumbnail come to life. The user of the Related Post WordPress Plugin just need to tweak a little to be able to display automatically the 1^st image in the blog post.

Note: This Related Post with Thumbnail WordPress Plugin Tutorial is now deprecated. Yet Another Related Post Plugin (YARPP) now comes with thumbnail. It is easier to use now. Stay tune for my update on how we can easily design our Yarpp (Related Post) through CSS.

Tweaking the YARPP WordPress Plugin is very easy. You just have to download and upload few files and modify a little the PHP codes.

To start the tutorial, first thing to do is you need to…

Download YARPP

Download the Yet Another Related Post WordPress Plugin (YARPP). You can go directly to the Yet Another Related Post WordPress Plugin (YARPP) Download page and upload it in your WordPress plugins folder using your FTP.

Second option is to head down to your WordPress Plugin Download Page then search for the keyword “YARPP” or “Yet Another Related Posts Plugin” then install it!  (I prefer the second one because it’s much easier).

Download RELATED POST WITH THUMBNAIL  WORDPRESS PLUGIN TEMPLATE

After installing the YARPP in your WordPress Blog you can now download the Related Post With Thumbnail  Wordpress Plugin Template file or open a notepad then copy and paste the php scripts down below and name it  “yarpp-template-thumbnails.php” then upload it to your themes folder together with the Index.php, Single.php and other  theme files. The file contains the whole framework of your Related Post with Thumbnail.

Related Posts:

have_posts()) : $related_query->the_post(); ?> post_content; $output = preg_match_all( ‘/<img.+src=[\'"]([^\'"]+)[\'"].*>/i’, $content, $matches); if ( $output > 0 ) $thumb = $matches[1][0]; else $thumb = $default; ?>
1. 

No related posts found

Going Through the Codes.

If you have a know-how on HTML, CSS and PHP then this thing will be just so easy for you. But if you don’t have, you just have to know the two important details to successfully implementing your Related Post with Thumbnail in your WordPress Blog.

The first item is the image size the Related Post with Thumbnail that will display. By default, it displays a 120×120 pixel size. If you want to modify it, you just have to find this line and change it to whatever you like.

<img src="<?php echo get_bloginfo('template_directory');?>/timthumb.php?src=<?php echo $thumb; ?>&w=120&h=120" alt="" />

Modify the “w=120″ and h=”120″ if you want to adjust the size of the images.

The second is the default image that the Related Post with Thumbnail WordPress Plugin is using. This part is very useful because you have to assign an image if your blog post doesn’t have one. What’s happening inside the WordPress plugin is that it will search for the first image in your blog post then grab it to be displayed as a link. I recommend that you upload it within your website (ex: www.bendaggers.com/default_thumbnail.jpeg) so that you will not encounter any errors with the related post with thumbnail plugin.

To assign a value to the default image, look for this line:

$default = ' '; //default image url

Then add your image url, just like this:

$default = ' www.bendaggers.com/default_thumbnail.jpeg '; //default image url

Download the CSS

In styling the Related Post with Thumbnail WordPress Plugin, you need to add the CSS Styles then paste it in your style.css file. You can download the Related Post with Thumbnail WordPress CSS File here.

ol.related-posts {clear:both; text-align:center; margin:10px 0px 15px 0px; padding:0;}
 
ol.related-posts li{width:120px; float:left; display:inline; margin-right:15px; padding-right:12px; font-weight:bold;}
 
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;}
 
p.related-posts{margin-top:20px; font-size:15px; font-weight:bold; color:#141414;}

Create cache and temp

Before you hit refresh to see if its working you need to create two folders and name it “cache” and “temp” then upload it together with your theme files. Don’t forget to set the of Permission of the two folders to 775. If you are using Filezilla, you can do this by simply doing a right click to the folder then select File Permissions.

Open a notepad then copy paste Timthumb.php from Google Code. Save it with a filename of “timthumb.php” then upload it together with your theme files.

Go to YARPP Setting page

We’re almost done!

Go to your WordPress Dashboard then Settings and select Related Post (YARPP).

On the YARPP WordPress plugins page, do the following:

Uncheck the “Automatically display related posts?”

And Check the “Display using a custom template file”

On the “Template File”, on the drop down arrow, select the “yarpp-tempalte-automatic-thumbnail.php”

On the Screen Options (located below your username, upper right) check the Relatedness option.

Adjust the Match Threshold to 3.

We’re finished with the tutorial on how to implement a Related Post with Thumbnail WordPress Plugin in your WordPress Blog. Hit the refresh button and see if it’s working.

For Live Demo, you can see mine, down below. Hit me in the comments section if you find any troubles with the plugins. Cheers everyone!

Tweet

Ben Daggers is the creator of BenDaggers.com. He graduated from Adamson University (Philippines) with a Degree in Bachelor of Science in Accountancy dating back 2009 and earning his MBA in Polytechnic University of the Philippines. He is currently employed as a General Accountant in a well known Global Business Process Outsourcing. He enjoys learning new things. He consumes his spare time in front of his Computer with Adobe Photoshop and Dreamweaver.