How to Display Recent Posts with Thumbnails in WordPress
15th Nov 2010 | Posted by Eko S. | 43 CommentsIn the previous tutorial, we have explained how to add wordpress thumbnail features on your theme. As we all know, since WordPress 2.9 added an image thumbnail feature which allows you to assign an image to an article to make it the post image like it’s often used in magazine style themes.
In this tutorial we will show you how to add post thumbnails to your recent posts on sidebar without a plugin. Let’s started!
Step 1. Add WordPress Thumbnail Feature
Make sure your theme has supported WordPress post thumbnail feature, you can check this feature in post editor (Posts > Edit) below the categories.
If your theme doesn’t support that feature, you can see our previous tutorial, Quick Tip : Make A Post Automatic Excerpt With Image Thumbnail on WordPress 2.9+
Step 2. Call the Function
Open file sidebar.php (We use twenty ten theme) and insert the following code, start from line 54
<li id="meta" class="widget-container">
<h3 class="widget-title"><?php _e( 'Recent Post', 'twentyten' ); ?></h3>
<?php
$the_query = new WP_Query('showposts=5&orderby=post_date&order=desc');
while ($the_query->have_posts()) : $the_query->the_post(); ?>
<div class="twentyten-latest-post">
<?php the_post_thumbnail(array(50,50), array ('class' => 'alignleft')); ?>
<a title="<?php the_title(); ?>" href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a>
<div class="clear"></div>
</div>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
</li>
As shown below
-Click the image to more clearly-
Explanation of the code
- The tag <li> is for widget container
- The tag <h3> is for widget title
- $the_query = new WP_Query(‘showposts=5&orderby=post_date&order=desc’); is to make new post query, we have 5 post, ordered by date (post_date) and the latest post (desc)
- The tag <div class=”twentyten-latest-post”> is for post title container with their thumbnails
- the_post_thumbnail(array(30,30), array (‘class’ => ‘alignleft’)); is to display the post thumbnail, you can set the thumbnail size too.
- wp_reset_query(); is to reset a new query made earlier.
Step 3. Making it pretty
Now we will style the CSS, so the widget will render correctly. Open the style.css and at the very bottom add:
.twentyten-latest-post {margin-bottom: 2px;}
.twentyten-latest-post a {float: none;}
.twentyten-latest-post img {float: left; margin: 4px 4px 0 0;}
.twentyten-latest-post .clear {clear: both;}
If this all goes according to plan, it should look rather nice, something similar to this (with your own content of course):
So this is how you add recent posts with thumbnails without using a WordPress Plugin. Remember to activate WordPress post thumbnails using our main WordPress post thumbnail tutorial before adding it to your recent posts widget. Hope it helps.
This tutorial we made solely to the TwentyTen theme, if you have difficulty in applying this tutorial on your theme. We are willing to provide premium support to you, please contact us via email: dynamicwp[at]gmail[dot]com
About The Author
38 Comments to “How to Display Recent Posts with Thumbnails in WordPress”
Add Comments (+)-
Salam Eko and Dynamic Team,
With all this information and clear walk through, I finally managed to upgrade my old free theme
compatible with WordPress 3+ new feature. InsyaALLAH, will up the new layout soon.Again Thank You so much.
Wil keep in touch. -
@brandy, @Fazia, @auto blog car, and @Brett Widmann: We’re glad this post helpful, stay tune with our next tutorials
-
Scott says: I needed to add !important to the margin…
.twentyten-latest-post img {float: left; margin: 4px 4px 0 0 !important;}
-
GM Coffi says: Great job!
Your explanation is really detailed and make it easy for a newcomer like me
QUESTION: How do I insert also a “small excerpt” along with the thumbnail and title of the post on the sidebar?cheers!
-
in the script above just add
<?php the_exceprt(); ?>
right before
<div class=”clear”></div>
-
-
Great tutorial you can find another tutorial in http://techsloution4u.com/wordpress/how-to-create-recent-posts-with-thumbnails-in-wordpress.html
-
Very useful tip, but I don’t use twenty ten themes, How can I use for other templates ?
-
Hi Philip,
Thanks…
Of couse, you can use this code for the other themes, but maybe to insert the code not from line 54 as the instructions of tutorial above.Or if you are still experiencing difficulties, we are willing to give a premium support.
Regards,
-
-
Hi, just what I was looking for, but for other reasons, I do not have my images on my server, so I cannot define the featured image.
How can I use this and get the image from the custom field named “Thumbnail”
Thanks
-
Hi Karl,
I apologize, this tutorial doesn’t support with custom field feature.
I recommend you this tutorial: How to: Using Thumbnails in your Sidebar “Recent Post” Listing.Regards,
-
-
Lars says: thanks for the great tutorial.
is there a way to show a image placeholder for posts which have no featured image associated with them? thanks! -
Hey, thanks a lot for this tutorial. was working on a client website and have been trying diffrent plugin to display recent posts with thumbs on sidebar, then stumbled on your tutorial and it was easy like… FLY!
-
David says: thanks for this, just what I was looking for.
-
Hi !
Thank you for this very nice tutorial..
I have one question about it, is it possible to have a vertical display ? -
Hi !
Thank you for this very nice tutorial..
I have one question about it, is it possible to have a =>horizontal<= display ?(Sorry i made a mistake)
-
Great great tutorial. Thank so much! But I have a question: after add recent posts widget into sidebar, the recent posts list show 2 times, one with thumbnail and another one is standard list. How to remove the 2.list? And another question: How can I limit the number of posts to show?
-
Thomas says: Hey,
Works great, thanks! Would it be possible to only show posts from a specific category?
Thanks,
Thomas -
Nice tutorial! I like it!
Anyway, how to display recent posts on other side (not on sidebar), such on home or footer side?-
mr_alfan says: You can add the code in step 2. in index.php, footer.php, or any where according your need, then make the code appropriate with your css. If you use twenty ten themes and you want to add it in footer, you can add in sidebar-footer,php.
-
-
Daniel says: Amazing work! Is there anyway to stack these horizontally?
-
Maaf mas, kalo buat recent postnya langsung bisa di tambahin widget gmana caranya?
kalo pake cara ini kan masih hard coding, jadi kalo di pasang kode di atas kita gak bsa edit/ilangin recent postnya dari sidebar melalui wp-admin>appereance>widget ..
thanks mas kalo ada tutornya.. -
Thank you Eko for putting together this tutorial. I’ve gone and replaced the recent posts widget in my footer with your custom code above. It seems to be working well and fits with the other content quite nicely. Much appreciated.
-
CanDeniz says: Amazing work!
htpp://www.igneta.com -
Great article on setting thumbnails in recent posts. Just wondering is there any plugin available which can do all these stuffs without messing with the codes.
Trackbacks/Pingbacks
- How to Display your Most Popular Posts with Thumbnails in WordPress
- Get Image URL of WordPress Post Thumbnail Feature
- How to Display Featured Post on Sidebar with Thumbnails
- Showcase Your Latest Posts With Better Recent Posts Widget Pro - WordPress Mods
- Display WordPress Recent / Popular Posts with Thumbnails Without Plugin
really useful tutorial. Just used this with exec php plugin to create a recent posts widget and it worked a treat once i’d edited in the_excerpt. many thanks.