Monday, December 22, 2008

Hack WordPress

Hack WordPress

How to: Using Thumbnails in your Sidebar “Recent Post” Listing

Posted: 22 Dec 2008 12:00 AM PST

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!

Related posts:

  1. How To: Display the Recent Posts of Specific Categories
  2. Code: Adding Recent Comments To Your WordPress Theme
  3. How To: Creating Sidebar Tabs In Your WordPress Theme
  4. How To: Display The Most Recent Comment First

Post a Comment
Related Posts Plugin for WordPress, Blogger...

Popular Posts