How to display recent posts as thumbnails in sidebar in WordPress 3.0+

How to display recent posts as thumbnails in sidebar in WordPress 3.0+

How to display recent posts as thumbnails in sidebar in WordPress 3.0+

wordpress-recent-th

This solution was updated for WordPress 3.0+

Starting with WordPress 2.9 is no longer need to use custom fields and hacks to have thumbnails in your blog articles or even on widgets area, sidebars, footers etc. For instance, to make a thumbnails area for random latest 12 recent posts, use the following code:

[code='php']

$my_query = new WP_Query('showposts=12&orderby=rand');
if( $my_query->have_posts() ) {

while ($my_query->have_posts()) : $my_query->the_post();

?>

$attachments = get_posts( array(
'post_type' => 'attachment',
'number_posts' => 1,
'post_status' => null,
'post_parent' => $my_query->post->ID,
) );
if ($attachments) {

?>

$thumbnail_id = $attachments[0]->ID;
echo wp_get_attachment_image( $thumbnail_id );
}
endwhile;
}
wp_reset_query();

?>

[/code]

You need to keep in mind the thumbnails will have the sizes from your function.php call action settings, and that will not look ok in your sidebar. You can use a CSS style to make them to look how you wish. Example:

[code='css']
.attachment-thumbnail {
height:50px;
width:50px;
padding:5px;
background:#fff;
margin:5px 5px 0 0;
}
[/code]

About reADactor

Try to be a mixer of inspiration, source of tutorials, tips and a reactor of your future design ideas, a place from where you can download freebies, vectors and web templates. Follow us on Twitter and Facebook

View all posts

Network News

Feedbox

Share this!

Subscribe to our RSS feed. Tweet this! StumbleUpon Reddit Digg This! Bookmark on Delicious Share on Facebook
  1. How to displaying recent posts as thumbnails in sidebar in WordPress 2.9

  2. uberVU - social comments

  3. [Miguel Sá] | Blog >> How to Displaying Recent Posts as Thumbnails in Sidebar in WordPress 2.9

  4. uberVU - social comments

  5. April 28, 2010 at 1:40 pm

    thanks for the valuable tips.
    I’m a newbie in wordpress ^^!
    much appreciated

  6. Drew Taylor
    May 3, 2010 at 7:54 pm

    Much thanks for the article, and great site. This is something similar to what I am looking for, but not exactly. Do you have any advice on how I can accomplish something like this with the archives and categories?

    I am looking to do something like they have on this blog here…
    http://www.astrostudios.com/blog

    Thanks in advance!

  7. wp-popular.com » Blog Archive » How to display recent posts as thumbnails in sidebar in WordPress 2.9 | reADactor

  8. May 20, 2010 at 9:44 am

    Bookmarked your blog. Thank you for sharing. Definitely worth the time away from my coursework.

  9. May 24, 2010 at 10:15 pm

    Thanks I think your explaination is the best, thanks for sharing…

  10. October 14, 2010 at 6:25 pm

    Is there any plugin/Widget that do the same thing?

    (this piece of code is great, but I prfer a widget rather than messing with the code…)

  11. October 16, 2010 at 11:05 pm

    Can you share with us which plugins you used form the sidebar recent posts (“popular” and “comments”)?

    • reADactor
      October 17, 2010 at 8:14 am

      is a custom solution, not a widget.

      regards

  12. February 13, 2011 at 4:36 pm

    Sorry dude,but ths piece of code gives error,parse syntax error.
    It means it doesn’t works with wordpress v3.0.5

  13. March 31, 2011 at 11:26 pm

    Jogan says it’s not working in 3.0.5. Do you think you could update this for wordpress 3.1? I’m not good with php or I would do it. It might be a good idea to put it into a plugin while you are at it? Unless you don’t feel like supporting it with every WP update which I would totally understand.

    Best, Corey

  14. April 6, 2011 at 5:52 am

    Hey I’m actually searching for methods on how to go along with this. Now I will be able to finish my wordpress account.

  15. April 18, 2011 at 4:15 pm

    3.0.5 update would be helpful for me too. Tried fixing the syntax error but now thumbnails are coming up blank.

  16. April 20, 2011 at 7:38 am

    Its not at all working for me.

  17. May 4, 2011 at 7:29 pm

    Was this fix ever implemented Olive?

  18. May 5, 2011 at 9:25 am

    Hi,

    Thanks for the post. To be honest I am really like your related post as what you have done with it. I will really appreciate it if you will share to me how you do it?

    Thanks in advance :D

  19. May 20, 2011 at 8:42 am

    is there any ready plugin to do this?

  20. May 24, 2011 at 5:02 pm

    I started using WordPress and ran into a few problems with the back end coding. I had to add more code to even get it to work. I’m not use to stuff like that but it was pretty interesting.

    Nice Post,

    James

  21. May 26, 2011 at 10:47 am

    Hi,
    what about if I want to get the post image from an existing custom field named “Thumbnail”
    ?

    Thanks

  22. September 13, 2011 at 5:23 pm

    Thank tips very helpful

  23. September 22, 2011 at 3:37 am

    Worked great for a client project I’m working on! Had to tweak a few things, and got it to display the title as a link to each post.

    Thanks so much!

    PS: You might want to edit the instructions and add that the code goes in the sidebar, above dynamic code (if that’s where you want it to go).

  24. September 26, 2011 at 4:49 pm

    Nice one. I was wondering if I could use this trick to display recent posts with thumbnails on my homepage, like theplrstore.com {you can delete that domain if u like; I don’t own it, it was just for example purposes only]?

  25. January 31, 2012 at 7:43 pm

    How can I show the last 4 posts from oldest to newest? I tried ordering them with “order=ASC” but it’s showing the first 4 blog posts, also tried using array_reverse but it didn’t work either. Help!

  26. ysidnem
    February 20, 2012 at 3:12 am

    Hi, I am trying to add the post title underneath the thumbnail. I can add the title but then I can’t get the thumbnails to stay in a grid format. I would be very grateful if someone could please let me know how to do this. My thumbnail size is 150 x 150 so they are big enough to have the title underneath.
    Thank you.

Leave a reply

*

*

Your email address will not be published. Required fields are marked *