On the WP Recipes forum, a guy just asked me how I managed to insert thumbnails on the recent post widget located on the sidebar of my blog Cats Who Code. That’s a lot simpler than it seems.

If you’d like to see a live demo of this tutorial, just click here.

1) – Make sure you’re using a custom field in your posts, with the thumbnail url.

There’s a lot of tutorials available online to add a custom field to your pots. This one is good in my opinion, so you should read it if you don’t know how to define a custom field.

2) – Download the required plugins

In order to customize your recent posts widget, you have to download the Recent Posts plugin by Sebastian Schmieg.

You’ll also need to download and install the Post-Plugin Library, which contains all the php functions needed by the Recent Posts plugin.

3) – Upload and activate the plugins

Once you downloaded the plugin and the library, unzip the files and upload it to your wp-content/plugins directory. Then, login to your WordPress dashboard, Go to “Plugins” and activate both the library and the Recent Posts plugin.

4) – Configure the plugin

After having the plugin and the library uploaded and activated, you have to configure the options so you’ll be able to display the post thumbnail on your sidebar.

To do so, login to your WordPress dashboard and navigate to “Settings”, “Recent Posts”.
On “General”, you can tell the plugin how many posts to be displayed, if it should display posts and pages or only posts, and a lot more.

Once you configured the “General” options to fits your needs, go to the “Output” options. In order to display your custom field thumbnail on your sidebar, you have to enter a bit of html as well as the special parameter to embed the custom field.

Here’s the code that I entered:

<li><img src="{custom:Image}" width="48" height="48" alt="" />{link}
<div class="clear"></div>
</li>

The special parameter {custom:Image} tells the plugin to embed the Image custom field. Don’t forget to replace Image with the name of your custom field!

5) – Add the widget to your sidebar

Simply go to “Design”, “Widgets” and add the Recent Posts + widget to your sidebar. Visit your blog, your thumbs are showing in the sidebar along with your recent posts!

Jean-Baptiste Jung is a blogger/web developer/web designer who lives in the French-Speaking part of Belgium. Jean-Baptiste maintains two blogs: Cats Who Code.com where he and other authors write about Web Development, Web design, Blogging tips and WordPress, and WPRecipes.com where Jean shares useful WordPress snippets on a daily basis. When he's not blogging or having fun with codes, Jean loves to spend time with his wife and cat, and traveling everywhere he can.

  1. This seems like one way to do it. There is somewhat more straightforward plugin out there called Visual Recent Posts. I am using it on my site now. You can check it out at http://www.castmedium.com

    The only problem I have with it is the quality of the thumbnails shown is less than I would like. I might give this version a try, but does this only word in a sidebar?

  2. SuperMario290 says:

    Amazing tutorial. I’m trying this out on all of my sites now, check it out at http://defaultprime.com! :D Thanks a ton!

  3. vinoth kumar says:

    It was a nice trick.. but what is called image custom field.. i am unable to conclude that.. can u please explain that…

  4. chay says:

    I tried this but I couldn’t align the title/link in a way so it’s actually “centered” like you have on your other site.

  5. Roy says:

    Hi, great article. I tried it and it worked but the text doesn’t line up nicely with the image. Any idea why?
    ( http://philomene.nl/?p=35 )

    Thanks

  6. Nick says:

    Is there a way to do this for the popular posts? Just like what is found on Huffingtonpost?

  7. Guga says:

    Hello Nick,
    If you follow this steps, you’ll have the same results with Popular posts. Check my blog.
    Regards

  8. Roy says:

    Hi, I figured it out (as you can see on my website). Another question. I have another site where I want to display the same articles with image. Is it possible to rss feed this in some way to that site? (with image of course)

  9. kelly says:

    How would you add thumbnails of recent posts to the sidebar without plugins?

  10. Engadgeteer says:

    I have find a quick and easy to install and customize Recent Post Widget with thumbnails. You can install it in minute with hassle-free complicated manual code installation.

    You may look at this link for more information : http://www.engadgeteer.com/2009/07/recent-posts-widget-with-thumbnails.html

  11. Thanks for sharing this great article. I implemented your code on my new blog http://premiumwpthemes.in/

    but the problem is “thubmnail” are not properly placed. The text begins at the end of thubnail which makes some space at top.

    Please suggest where I went wrong?

  12. Gojeg says:

    Nice tutorial.. :P
    Thank you, how to implement that on Blogger?

  13. missinema says:

    recent posts thumbnail ?

  14. Brandon says:

    thank’s for this recent post with thumbnail tutorial, i will try later… :D

  15. Phillip Dan says:

    Hey,

    I don’t want use plugin for it,more plugin will make my site slowly ?

    Can you writing script php to do it ? I found script, but it not beautiful, I need some css tips !

    Thanks for your suggestion !

  16. Candy says:

    I’m using YD Recent Post, it work well on my sites.

Trackbacks/Pingbacks »