Up until the release of WordPress 2.9, setting up “post-image” support for your blog was a bit more tedious a task than it really needed to be. Luckily, that’s no longer an issue. I’ll show you how to get setup in this four minute video quick tip.
Step 1. Edit your Functions.php Page
// Enable support for post-thumbnails
add_theme_support('post-thumbnails');
// If we want to ensure that we only call this function if
// the user is working with WP 2.9 or higher,
// let's instead make sure that the function exists first
if ( function_exists('add_theme_support') ) {
add_theme_support('post-thumbnails');
}
Step 2. Insert the Image Tag into your Loop
Within the “if have_posts()” loop, simply place this piece of code anywhere you like. At that point, WordPress will insert an image tag onto the page accordingly. Please note that you’ll have access to a “wp-post-image” class that you may then work with to format/style the image.
<?php the_post_thumbnail(); ?>
- Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
Rockstar WordPress Designer
Now updated for WordPress 3.0, this classic book on WordPress theming and design has sold over 3500 copies! Get yours now!
Top Selling
on Codecanyon
jQuery Lightbox Evolution only $12.00 
Events Calendar Pro - Wordpr ... only $30.00 
Cloud Networks Australia - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+ mobiletuts+Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Just a note that I don’t think I clearly made reference to the fact that you don’t need to write “add_theme_support(‘post-thumbnails’);” twice in the screencast. I was showing an either/or type situation – see the written portion for more details.
You should have deleted that first “add_theme_support…” in the screencast after you made the second one, i think it’s gonna be a little confusing for beginners, because most of them won’t even check the text part of this post
Haha, Jeffrey i published a tutorial on that a minute before you
http://wpcanyon.com/tutorials/how-to-use-the-post-thumbnail-feature-in-wordpress-2-9/
I might add that tutsvalley is a network which looks like a sloppy copy of envato network. Even name enavu is similar envato.
Damn that brown header.
People tend to search for familiar things in something they see for the first time, that’s why you think it’s a “sloppy copy of envato network”.
For sure, Envato is a role model to me but intention of copying it was never there and never will be.
PS I published my tutorial a bit before Jeffrey so he is the one that copies. Haha. Just kidding Jeffrey
+agreed
what an awful site and such a rip
envato, enavu
tutsplus tutsvalley
codecanyon wpcanyon
the enavu logo is made from a stock photoshop shape LOL
even tried the dots in background from envato.
seems to me like if you actually had the skills to do it it would of looked identical fortunatley you don’t as we can see.
Well technically my screencast was available on Screenr since yesterday….
I was just kidding…
The enavu network is not in any way a copy of envato
we know the names are close.. cool. But we offer a much different set of services. Starting with free project management (freedcamp.com) and the newly released html5 css3 framework (52framework). Yes both networks provide web development tutorials… big whoop. And just for the record using those “dots” is a technique that envato does not own and has been around for years. But i will restrain myself from addressing the comment from danny about “skills”. I am sure he posses them to such an extent that we shall all bow to his mighty skills. At any rate, we are redesigning our logos because using stock photography was rather a quick resolution.
-agree
We should not said he copied the post here, because this tip has already submitted on some blogs, not only this site. I saw more than 3 sites posted already and more than a month ago.
However, the kicking ass here is Jeffrey did a great screencast.
@Lam – That was just a joke because we tweeted our new posts in the same time and their names ware exactly same. Twilight Zone…
And enough of this. This is getting into a big offtopic.
Correct me if I am wrong, but enavu.com said copyright 2004-2010, where envato has only been around since 2006, implying that enavu is older.
My best guess is that’s not true though.
@Alec – That’s correct. Enavu is registered as a web dev firm in US in 2004.
According to a whois query:
Updated Date: 16-apr-2010
Creation Date: 01-may-2009
Expiration Date: 01-may-2013
Kind of late for a “firm” established in 2004. How come that if you specialize in web dev you registered your domain 5 years later?
WOW great tut! Thanks! Am new to WordPress and am currently working on designing my blog and was wanting a feature like this!! Will definitely come in handy!
Good new feature to know. But is there a way to only get the src value of the thumbnail, in order to combine it with a script like timthumb in a theme?
When you upload the media to the WordPress, it will give you the absolute url in the dialog box that appears after it’s uploaded.
@2:26 you can see this url called “Link URL”
I think he wants to get it with php
[code]
$thumb = get_the_post_thumbnail($post->ID);
$pattern= "/(?<=src=['|\"])[^'|\"]*?(?=['|\"])/i";
preg_match($pattern, $thumb, $thePath);
$theSrc = $thePath[0];
[code]
$theSrc will hold the path
PS I hope the regex won't get messy in the comments.
Here is the article i just made about getting the src…
http://wpcanyon.com/tipsandtricks/get-the-src-attribute-from-wordpress-post-thumbnail/
Great tutorial, will help when i need work with wordpress next
Great tutorial Jeff! I will be using this for my new blog in the next couple of days
Shocked it took wordpress so long to support post images though!
Great, I had somehow missed this new feature. Thanks for taking the time to explain it!
Great tutorial! I need “post-thumbnail”. Thanks
great tutorial jeff. Thanks for the tip.
Is there a reason this isn’t supported by default?
Great tut as always Jeffrey! This is such a useful feature for WP 2.9 that I cant believe it took them so long to implement.
Thanks for this quick tip – up until now I didn’t know about this feature. Finally now more automated scripts or custom fields in order to get a proper thumbnail.
Great tutorial. Thanx for sharing it. I still use the old way. But I’ll definitely change that soon.
$postThumbnail = get_post_meta($post->ID, ‘postThumbnail’, $single = true);
Nice and simple tutorial!!! I made something equal at designi1… but i use the custom fields to make the thumbnail
its almost the same process…
Thanks for the tut. WordPress keeps adding great functionality (probably because they listen to the developers). Open source rocks.
How do I go about making this work with the recent_posts function?
Thank You this was awesome
Good stuff Jeff, I’m currently working on a wordpress site, this will be very usefull, thanks!
Another fine quick tip Jeff! Very helpful. Implementing this into my site as we speak. So much easier.
Thanks! Yeah – definitely much easier.
To get my images on the archive pages and the home page to link to the post, I wrapped an anchor tag with the php with the permalink and this gets my viewer to the post easy enough.
But on my single post file, I want to have that image open up to a full size of the image.
WHY IS THIS NOT AN EASY THING? Am I missing something? I threw an anchor to the the_post_thumbnail (‘full’) but this does not work.
Is there something I am not doing? Yes, I AM new to WP but not programming, coding or development and I would like this feature to work like this and it seems it should do it “automagically”?
What did you use to edit the CSS there?
Chris Pederick’s Web Developer Toolbar Firefox extension.
Great Tut…
I was actually just speaking to client a day ago about how to make post-img easier.
Thanks for sharing.
As always you guys are awesome.
CSS EDIT on that extension is awesome! I use Dreamweaver quite a bit myself for a lot of coding and CSS but you just cannot beat using that extension to see the immediate results and then copy and paste into your own stylesheets.
Jeffrey, is there some easy way to make your single post thumbnail link to a full version of itself?
Thank you so much,
really, it’s work
Nice quick and easy. Thanks for the quick overview, helps a lot
Perhaps a source link to Mark Jaquith’s site would be very handy. While you did a great screencast Jeff, you missed out the feature of having more than one size using the thumbnail by simply identifying that in the functions.php file.
http://markjaquith.wordpress.com/2009/12/23/new-in-wordpress-2-9-post-thumbnail-images/
Above is Mark’s article for anyone who is looking to use this feature on advanced templates. I just used it on a client’s site utilizing this feature and had 4 different sizes of the same image being generated.
This function is very powerful only if WordPress adds the cropping ability for multiple sizes.
Great tutorial.
Was just workin on a wordpress site for a client. Might just add that before i complete it for Sunday.
Guys How do I make this work on other themes ! I am currently in the process of creating a theme for wordpress, but when I try this in the theme I’m creating I get the following:
“Fatal error: Call to undefined function the_post_thumbnail() in /wp-content/themes/Elegance/index.php on line 8″
I’d greatly appreciate some help.
Thank You.
Sorry I figured it out, I had to copy the [ functions.php ] file from the Default Folder to the folder of the NEW theme I was working on.
Thanks again for this BRILLIANT Tutorial.
Jeffrey,
Thanks for this tutorial. I had no idea of this new feature!
Would you happen to know how to stop WordPress from automatically declaring the height and width of the image, so I can simply adjust it with only width in CSS?
If that is possible, knowing how to change that would help me in other areas where WordPress makes something default that I’d like to change.
Thanks again!
thanks a lot for this tutorial, it’s what i’m looking for my first theme in wordpress
Thank you, very easy to implement
Awesome…I will have to put this to some use coming up!
How do I change the default class the image is assigned? When I choose a post image, it doesn’t automatically get assigned wp-post-image. The only class it gets is like alignnone, alignright, alignleft, depending on what alignment I choose. To add a class, I have to edit the image in the post again.
I want to know how to insert image for each of post to become thumbnail of that post. Using custom field with name post-thumbnail ?
Great and simple code to use
thanks guys. I was in battle just to pick the src of the image and resize it in the fly so this the simplest way.
Thanks for the tutorial, that’s the one I was looking for.
Great Video Jeffrey. It helped me set this up in 4 minutes. Thanks again.
How do you add lightbox or thickbox (example rel=”lightbox” or class=”thickbox” to the thumb?
Awesome!
When I added this to a blank functions.php file (ie not the default one) it sort of messed things up, so I ended up copying everything from the default one and it worked fine
Yay!
excellent tip as always
Hi,
Can we know what is the tools you use to edit css and have a live preview of your web page in the same time ?
Thank you
Thanks Forower web pages
Hello, I am a complete beginner so my question might sound strange to all you developpers but I just loaded the aparatus theme up and now I need to set the thumbnail function up, but where on earth do I actually include this first “step” in my functions.php ??? I simply tried to add it right in the beginning and got locked out of my page.. seriously, where do I put it in ? I don’t want to bother my hosting company again to get me in!
thanks for your help, and the aparatus theme looks really georgous.. oh, another question, any suggestion on how to get rid of the “follow me on twitter button in the header?
thanks so much
thanks alot for you tip and i will use in my themes
hi there,
what screen flow software have you used to record this video?
by the way.. thanks for it!
Thank you, I will surely use this for sure.