How to show Related post with post image in Worpress
October 27, 2008 Poster: Jim Views: Category: Hacks
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
And you are done. If you have any problem let me know. Have fun with your traffic.
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
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
How can I do this tricks in blogger? Thankyou for your nice articles.
Sorry to say that it’s only for wordpress.
the related post plugin displays the related post but not the image what should i do.
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..
I have the same problem as MJ. Where should I specify the thumbnail image for each post?
make a directory named .pthumbs on your root directory.. it should fix the problem..
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!
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.
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