How to show Related post with post image in Worpress

 
Welcome, Visitor. Subscribe to our RSS Feed and consider adding this article/site to your favorite social bookmark site if you find it useful. Thank you!

I saw some blog showing related post, random post and popular post  with post image on the side. Its a good idea to show post with post image. Do you know that showing post with pictures can get more views? Few days ago i started to test my web traffic from referrers and search engines. I found that My post with image get more views than others.. Then i posted tips and articles with image and it doubled my page views. If you don’t add image to your posts in wordpress you should test it. But you should decide that what would be best for your blog. You can also add some new options in your blog like showing related post or random post at the bottom of your post. You can add this option in your theme in a easy way. Just all you have to do is use a wordpress plugin with right settings. You can even edit the looks and styles by editing css code. So here is a little tutorial about how to show related post with image thumb.

1. At first download this plugin from Here Related post with Thumb Revised. This plugin is a modified version of WordPress Plugin Related Post Thumb from ZioGeek. But that plugin can’t re size image to thumb. But with revised version you can change the size of the thumbnail page configuration. Related lists are generated using tag. Download and activate that Plugin.

2. Before going to setting options you have to add a some css code on your theme style.css. To do this go to theme editor from your admin panel and edit style.css or manually add css from your ftp client.
Example CSS code by plugin author. Modify the css as you like.

. related_post ()
#post_div { (# post_div
height:70px; height: 70px;
border-bottom:1px solid #ccc; border-bottom: 1px solid # ccc;
margin-bottom:5px; margin-bottom: 5px;
} )
.img_related_post{ . img_related_post (
float:left float: left
} )
.text_related_post{ . text_related_post (
float:left; float: left;
text-align:left; text-align: left;
width:500px; width: 500px;
} )
.related_post img { . related_post img (
align:left; align: left;
border: 1px solid #ccc; border: 1px solid # ccc;
margin: 0px 6px 0px 0px; margin: 0px 6px 0px 0px;
padding: 2px 2px 2px 2px; padding: 2px 2px 2px 2px;
} )

3. Then go to login to wp-admin then settings> WordPress Related Posts then you can write Related Posts Title., limit how many post to show ETC. Then check mark Auto insert Related post option in Other settings. Or you you can show related post on your theme by adding

 <? Php wp_related_posts ();?> 

And you are done. If you have any problem let me know. Have fun with your traffic.

Tags for the article:

    related posts with image,Related Post Plugin with images

,

11 Responses to How to show Related post with post image in Worpress

  1. Rick December 20, 2008 at 10:15 pm #

    Hi,
    this plugin works perfectly for me, thanks for the instruction and great work on plugin.
    But I have a problem that it seems the funtion of Exclude(category IDs) no works. it always display the posts of Exclude(category IDs).

    Can you please give more tips?
    Thanks.
    Rick

    • Jim December 20, 2008 at 11:30 pm #

      Rick, i am glad to see that this tutorial helped you to show related post with image on wordpress. Sorry to say that I m not the plugin developer. I wrote this tutorial to make things easy for wordpress users. Plugin download link is the plugin developers website link. Go to fabrizio.zellini.org and check wordpress catagory. Then report your problem. Thanks.. Again

  2. gardener January 30, 2009 at 2:17 pm #

    How can I do this tricks in blogger? Thankyou for your nice articles.

    • Jim January 31, 2009 at 2:43 am #

      Sorry to say that it’s only for wordpress.

  3. MJ April 20, 2009 at 8:29 pm #

    the related post plugin displays the related post but not the image what should i do.

    • Jim April 21, 2009 at 2:19 pm #

      In my blog its working fine.. Did you checked the settings for wordpress related post? Also make a directory named .pthumbs on your root directory..

  4. Laura September 28, 2009 at 4:28 pm #

    I have the same problem as MJ. Where should I specify the thumbnail image for each post?

    • Jim September 29, 2009 at 2:08 am #

      make a directory named .pthumbs on your root directory.. it should fix the problem..

  5. Laura September 28, 2009 at 4:31 pm #

    Oh, also I have php included in most of my posts, and the ‘related posts’ text shows it as ordinary text. Is there a way not to show it?

    Thanks!

    • Jim September 29, 2009 at 2:01 am #

      Use only one of the method to show related post. I used the php code to show related post. And customized my wordpress theme and css code to show related post in a new style.

  6. DTech Gadget November 11, 2009 at 6:18 am #

    He there,

    May you give me implementation code synronize with css please?

    I tried put the code:

    The result show not like yours and the image show in above title.

    Any something wrong? How to show like yours?

    Thanks

Leave a Reply

eighteen + 2 =