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+

Read this article to learn how to use the new thumbnail feature from latest WordPress versions, to call your recent posts in sidebar.

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:

	<?php

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

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

	?>

	<?php

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

	?>

	<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">

	<?php

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

	?>

</a>

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:

.attachment-thumbnail {
height:50px;
width:50px;
padding:5px;
background:#fff;
margin:5px 5px 0 0;
}

Become expert in web designing with testking 642-456 online course. Get testking 642-661 photoshop tutorials and testking 646-230 design guides to learn how to create inspiring designs for your web page.

Network News

Feedbox
Published on: April 26th in Tutorials, Wordpress .
Post tags: , , , , , , , , , , ,

22 Comments

  • kuta kharisma
    April 28, 2010

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

    Reply
  • Drew Taylor
    May 3, 2010

    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!

    Reply
  • John
    May 20, 2010

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

    Reply
  • DldBox
    May 24, 2010

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

    Reply
  • Thai
    October 14, 2010

    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…)

    Reply
  • Thai
    October 16, 2010

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

    Reply
    • reADactor
      October 17, 2010

      is a custom solution, not a widget.

      regards

      Reply
  • Jagan Mangat
    February 13, 2011

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

    Reply
  • iRenew
    March 31, 2011

    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

    Reply
  • Hundeting
    April 6, 2011

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

    Reply
  • Olive
    April 18, 2011

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

    Reply
  • Geekyard
    April 20, 2011

    Its not at all working for me.

    Reply
  • batman legos
    May 4, 2011

    Was this fix ever implemented Olive?

    Reply
  • Edille Rosario
    May 5, 2011

    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

    Reply
  • evan
    May 20, 2011

    is there any ready plugin to do this?

    Reply
  • James
    May 24, 2011

    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

    Reply
  • Karl
    May 26, 2011

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

    Thanks

    Reply
  • car
    September 13, 2011

    Thank tips very helpful

    Reply
  • muuver
    September 22, 2011

    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).

    Reply
  • Arindam Chakraborty
    September 26, 2011

    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]?

    Reply
  • Adler D.
    January 31, 2012

    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!

    Reply

Leave A Comment.





Trackbacks