Displaying recent posts as thumbnails in sidebar
This tutorial will show you how to display your recent posts as thumbnails.
I have been busy working on a custom word press theme for one of my clients. One request was to display recent posts as text AND as thumbnails. Specifically, they wanted to pull an image from the post to display in the side bar. I tried a variety of plugins but none worked for our exact needs. I played around with some code and finally came up with something that worked. It doesn’t create thumbnails automatically, they have to be created first, but it works close enough for the client.
NOTE: I have only tested this code with WordPress 2.7
The first thing you will need to do is edit your sidebar.php (or similar) file in WordPress. I am assuming you already know how to edit your theme files, but just in case…
1. Login to your admin area for WordPress
2. Click on Editor under “Appearance” in the left side menu
3. Open the sidebar.php file
Okay, now you will need to decide where you want the thumbnails to appear in your side menu. Once you have the spot picked, copy and paste the following code into the file:
<?php $myposts = get_posts(‘meta_key=post_thumbnail’);
foreach($myposts as $post) 
>
<?php $thumbnail = get_post_meta($post->ID, ‘post_thumbnail’, true); ?>
<a href=”<?php the_permalink(); ?>”>
<img src=”<?php echo $thumbnail; ?>” alt=”<?php the_title(); ?>” />
</a>
<?php endforeach; ?>
You can add special parameters for the way thumbnails are displayed including:
- orderby=title (to display thumbnails in order by post title)
- order=ASC (to display ABC order)
- order=DES (to display ZYX order)
- numberposts=XX (number of thumbnails to display)
These would be added directly after meta_key=post_thumbnail using the symbol “&” to separate each.
Save your sidebar.php file
We can now add in the thumbnails to your posts.
Click to edit the post you would like to add a thumbnail for. Once the post has opened, scroll down until you see a section titled “Custom Fields” as shown below:
Click on “Enter New” and type in post_thumbnail
FYI: After adding it the first time, you will be able to select this option from a drop down menu in the future
In the “Value” box, type in the URL to your thumbnail image.
Click on the button “Add Custom Field” to add your thumbnail image.
That’s it! Your thumbnail should now appear in your sidebar.
Related tutorials that might interest you:
- How to widgetize your WordPress theme
Recommended plugins for wordpress
How to add an author box after my post in WordPress
How to add HTML into a WordPress post
How to add a post in WordPress 2.6
Tags: Recent Posts, Thumbnails, WordPress
wow, I’ve been searching for two days trying to make this happen. you’ve made it so simple.
thank you!
Hi,
I am able to show recent post thumbnail using your code. How can I use post title, excerpts after thumbnail?
Thank you.
Hum
Thanks! I was hunting around for a little bit of code instead of a plugin. This is excellent.
You are welcome! Glad the tutorial helped