How To Use Thumbnails Generated By WordPress In Your Theme

Posted in Popular Wordpress

Thumbnail Image Many WordPress Themes display post excerpts on blog homepage with a little thumbnail image of one of the images used within a post, but most of the WordPress themes I have seen, use some kind of external image resizing script like phpThumb or tinyThumb or they use some custom field in the post to show thumbnail image.

But WordPress has inbuilt functionality of generating thumbnails of the images you add to your post. This functionality is enabled by default unless you have explicitly set it from Media Settings in WordPress Settings panel.

WordPress Thumbnails

Today, I’m going to show you how to use thumbnails generated by WordPress in your theme without requiring any third party script, plugin or custom field.

1. First of all set the thumbnail size to what you want in the Media Settings of WordPress.

2. Now open up index.php of your WordPress theme and inside the WordPress loop, add the following lines of code to get the path of thumbnail image of the first image in the post.

//Get images attached to the post
$args = array(
	'post_type' => 'attachment',
	'post_mime_type' => 'image',
	'numberposts' => -1,
        'order' => 'ASC',
	'post_status' => null,
	'post_parent' => $post->ID
$attachments = get_posts($args);
if ($attachments) {
	foreach ($attachments as $attachment) {
		$img = wp_get_attachment_thumb_url( $attachment->ID );
//Display image

Code Explanation: Firstly we fetch the images attached to the post in the order they were added to the post. And if images are there we fetch the path to the thumbnail image of the first image in the post using wp_get_attachment_thumb_url function.

Now you have path of the image in $img which you can use to display the post thumbnail using img tag.

If you have visited the homepage of Web Developer Plus, I am using this technique to display post thumbnails with post excerpts.



Subscribe to Full RSS Feed

RSS FeedIf you found this article useful, then consider subscribing to our RSS Feed or e-mail updates to stay updated with latest Web Design/ Development articles. You can also follow @webdevplus on twitter for latest updates.

50 Responses (Add Your Comment)

  1. I Make... says:

    Hey, great post, very well written. You should blog more about this.

  2. Joinsitck says:

    “Hello Buddy, you have got a nice blog. Can you tell me the name of the theme? I like it.“

  3. james says:

    How very timely, thanks for posting. Just spent a hour or so this morning trying to find an elegant way to achieve this, but with a loop to fetch every image. For anyone wondering how to do this, altering from ‘foreach’ onwards like this seems to do the trick:

    foreach ($attachments as $attachment) { ?>

    ID );
    echo ” ;
    } ; ?>

  4. 7diasdespues says:

    WOW! nice solution!
    is a pain tried to explain to the customers how to use the custom fields

    thanks a lot

  5. Great tutorial!

    However, this is good only for themes that don’t use images much.
    For example I have about 3 different sizes for thumbnails, depending on the location of the visitor.

    This example of yours is good only if you have the same thumbnail size on all pages AND the user specified reasonable sizes in his Media Settings. Theme’s user is in full control, which sometimes can bring to disaster.

    Using TimThumb is a small sacrifice, but it is worth it :)

    P.S. still, the article is great! I will bookmark it for future reference :)

  6. Super! A better alternative to Custom fields!

  7. Alex Denning says:

    Didn’t know you could do that – thanks for sharing a brilliant tip!

    Saved to Delicious.

  8. Thanks for this bit of code. I’ve been one of those guys who uses a custom field to display these thumbs, and this would save me a step.

    At the very least, it’ll help with future client projects, and save them a step. :)

  9. Kel says:

    One issue not explained though is that a script such as TimThumb does on-the-fly image resizing/cropping, while WordPress “generally” only does the image resize/crop during the upload process – Read as: ONCE. So, if you decide to change your blog/site’s layout and the images need resizing, using something like TimThumb would probably be beneficial.

    Side note: there are other scripts which can force WordPress to rerun the image resize thumbnailing AFTER the files have been uploaded – at least as far as I understand it.

  10. Dian says:

    Awesome! my mind always oriented in using thimtumb.php when thinking about thumbnails

  11. jane says:

    Nice post, do you have some tips on styling the images?

  12. thanks. very nice article…keep on the good work

  13. Great post. I often use custom field for this purpose, but this way is so pretty. Thank you very much.

  14. alexandr says:

    thanks. that’s exactly what ive been looking for

  15. Aaron says:

    You mention that, “now you have path of the image in $img which you can use to display the post thumbnail using img tag.”

    But how does one do this? I’ve tried using , but it isn’t working. Apparently my basic HTML/CSS knowledge isn’t good enough to seamlessly implement this.

  16. etomyam says:

    very interesting…somehow I couldn’t manage to make it work…..I think I miss something but couldn’t figure it out where…

  17. Jen says:

    Just what I needed!

    Aaron & etomyam – make sure you’re pasting the code INSIDE the loop. That was where I initially messed up.

  18. Thanks for a simple solution that I’ve been looking for. However, when I use the wp_get_attachment_thumb_url function it returns nothing, even though there are images attached to the posts. Here is my code:

    <?php if ( $paged

    cat_name ?>

    ‘post_mime_type’ => ‘image’,
    ‘numberposts’ => -1,
    ‘order’ => ‘ASC’,
    ‘post_status’ => null,
    ‘post_parent’ => $post->ID
    $attachments = get_posts($args);
    if ($attachments) {
    foreach ($attachments as $attachment) {
    $img = wp_get_attachment_thumb_url( $attachment->ID );
    //Display image

    <h2 id="post-”>
    <a href="” rel=”bookmark” title=”Permanent Link to “>

    Sorry, no posts matched your criteria.

  19. marieken says:


    This is the trick I’ve been looking for too! But I can’t get it to work either. Is it possible to show an example of the code within the loop? I must be doing something wrong there.

    Just to check, if your talking about an attached image, that is an images uploaded / inserted in a post, right? Or is there an other way, then that could be the reason why it doesn’t work.

    Hope you can help me out. Thanks.

  20. I had this working but it seems to have stopped when we upgraded from 2.7 to 2.8.4. Anyone have any ideas if there are any changes in the wp_get_attachment_thumb_url in 2.8.4 as I’d love to fix this!! Thanks for your time in advance

Comments are closed for this post.