Adding related post with thumbnail at the end of all post become needed thing for any blog and many of have seen many plugins but every one require to have added featured image when we make post. Who really have done that? May be few people. Check out demo at end of post or below image.

For this trick, you need to use plugins. I know you don’t like plugins, but without feature image, you need to use it.

Things you need for this Tricks

Post-plugin Library.

Tutorials: How to Install Plugins in wordpress?

Steps to show Related Post with Thumbnail

After installing both plugins, go to similar post plugins setting page. You will see some options like General, Output and Filter. On general page, you can set number of post to show and many more other option to show related post based on category and tags.

Click on Output setting which is main part to change. In output template, paste following code:

<div id="similar-posts"><li><a href="{url}"><img src="{imagesrc}" width="125" height="125" alt="" /></a><h1>{link}</h1></li></div>

Change height and width of image as you want.

Click on placement stetting and make sure that you have same code as below:

prefix=<h4>You might also like:</h4><ul>&suffix=</ul>

You can change text for “You might also like:” as you want or change it with image.

Activate to “Yes” if you don’t want to put manual code in theme. If you are planning to mess with theme, make sure to take a back up.

For thesis theme users.

If you are using thesis theme and want to put code manually than add below code in thesishook plugin in thesis_hook_after_post

<?php similar_posts (); ?>

Or below code in custom_function.php

function relatedposts(){
if (is_single()){
?>

<div><?php similar_posts (); ?></div>
<?php }
}
add_action('thesis_hook_after_post', 'relatedposts');

Css Code for Similar Post for thesis Theme (These are my settings) :

#similar-posts img {
border: 2px solid #CCCCCC;
float: left;
height: 70px;
margin-top: 4px;
width: 70px;
}

#similar-posts li {
background: none repeat scroll 0 0 #FFFFFF;
float: left;
font-family: Times,"Times New Roman",serif;
font-weight: bold;
line-height: 1.3em;
margin: 0 10px 24px 0;
overflow: hidden;
}

#similar-posts h1 {
clear: left;
font-size: 12px;
font-weight: bold;
height: auto;
margin: 0;
overflow: hidden;
text-transform: capitalize;
width: 106px;
}

Change it as you want according to your theme layout and colors.

If you need more help, leave it in comment and I will make sure that you get help you want.

Tagged as: How-to, posts, Thesis, thumbnail, Tips, Tricks, Tutorials, Wordpress