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>

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(); ?>

Article by Shoaib Hussain

Shoaib has written 10 articles.

If you like This post, you can follow ShoutMeLoud on Twitter. Subscribe to ShoutMeLoud feed via RSS or EMAIL to receive instant updates.

Follow @ShoutMeLoud