Wordpress Related Posts With Horizontal Thumbnails For Thesis Theme

Having related posts with thumbnails at the end of your Wordpress single posts page really does helps to maintain a low bounce rate.

Most of us do like the related posts widget that linkwithin provides,but there is almost no customizations you can make in that widget.

Here you have it horizontal Related posts(similar posts) for your Wordpress blog with thumbnails with all of the customizations you want.

Note:-Please do read this post as I have considered  almost all the possible things you folks wanted in a related post plugin such as:-

  • The plugin does not have the authors url any where displayed (so no seo problem).
  • It is far better than linkwthin widget and even much more compact.
  • You can set the size of you thumbnails to whatever you want.

As of now this tutorial is only applicable to thesis users, but in a couple of days I shall post a tutorial for other themes too.

Step-1 : Download plugins

Download the similar posts plugin and post plugin library by Rob Marsh from the Wordpress repository.

Once downloaded activate the plugin and go to the output settings

step-2

Paste this code at the box for output

<div id="similar-posts"><li><a href="{url}"><img src="{custom:thesis_post_image}" width="100" height="100" alt="" /></a><h1>{link}</h1></li></div>

Wordpress Related posts

Once you have pasted the code in their,remember to have text codes before and after the list as <ul> and </ul>

and save the output settings.

Step-3

Now open your themes custom.css and paste these codes in their.

#similar-posts li {         margin-left: 6px;         float: left;         font-weight: bold;        background: #f9fdfd;        font-family: Times, "Times New Roman", serif;     line-height: 1.4em;         overflow: hidden; } #similar-posts img { float: left; border: 2px solid #222; margin-top:4px; } #similar-posts h1 { clear:left; font-size:13px; font-weight:bold; height:auto; line-height:17px; margin:0; overflow:hidden; text-transform:capitalize; width:126px }

Step-4

That done now all you need to do is place the following code  in thesis open hook “after the post hook”

<?;php similar_posts(); ?>

This is how your Related posts show look like:-

Wordpress related posts with thumbnails

As I have mentioned above that this method of displaying related posts with thumbnails works only for thesis, so please have patience as in a day or two I’ll post something that works with all the wordpress themes.

Do let me know which plugin you are using to show related posts with thumbnail?

Related posts:

  1. Thesis Open Hook Wordpress Plugin : Easily customize Thesis Wordpress Theme
  2. How to show related posts in wordpress without plugin
  3. Show Related Post In Wordpress With Thumbnails : Wordpress Plugin
  4. How to add Digg and Tweetmeme Button In Thesis Wordpress Theme
  5. Adding Adsense Into Thesis Wordpress Theme

0 comments: