How To Use Thumbnails Generated By WordPress In Your Theme
Jun 8th, 2009 - 50 Comments »
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.
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.
<?php
//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 );
break;
}
//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.
Share
Subscribe to Full RSS Feed
If 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.
12 Lesser Known But Useful WordPress Hacks
50 Responses (Add Your Comment)
Comments are closed for this post.
15 Ways to Improve CSS Techniques Using jQuery
25 Incredibly Useful CSS Tricks You Should Know
Hey, great post, very well written. You should blog more about this.
“Hello Buddy, you have got a nice blog. Can you tell me the name of the theme? I like it.“
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 ” ;
} ; ?>
@james, you don’t need a loop. You can use this cod:
$img = wp_get_attachment_thumb_url( $attachments[0]->ID);
that’s all.
WOW! nice solution!
is a pain tried to explain to the customers how to use the custom fields
thanks a lot
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
Super! A better alternative to Custom fields!
Didn’t know you could do that – thanks for sharing a brilliant tip!
Saved to Delicious.
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.
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.
Awesome! my mind always oriented in using thimtumb.php when thinking about thumbnails
Nice post, do you have some tips on styling the images?
For image styling, i’d recommend that you float the thumbnail images to left side of the post excerpt on your blog’s home page.
thanks. very nice article…keep on the good work
Great post. I often use custom field for this purpose, but this way is so pretty. Thank you very much.
thanks. that’s exactly what ive been looking for
Thank you
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.
very interesting…somehow I couldn’t manage to make it work…..I think I miss something but couldn’t figure it out where…
Just what I needed!
Aaron & etomyam – make sure you’re pasting the code INSIDE the loop. That was where I initially messed up.
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 ?>
‘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 );
break;
}
//Display image
}
?>
<h2 id="post-”>
<a href="” rel=”bookmark” title=”Permanent Link to “>
Sorry, no posts matched your criteria.
Hi,
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.
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