How to Add Post Thumbnails in WordPress
Post Thumbnails are getting more popular every day. Many magazine themes associate an image with a specific post which they later display on either homepage or on the post page. We display a thumbnail with our posts on both the post page and the category page. In older versions, this functionality was obtained with the use of custom-field method which was not very user friendly. Thanks to WordPress Core Developers along with many notable features in WordPress 2.9, this function was also added to the core.
Simply watch the video or read the tutorial below 
Video
Beginner’s Guide
You will see an option like this in the sidebar of your Write Post Panel in WordPress Dashboard.
Click on the link, and you will be taken to an upload image page. Upload the picture, and you will see something like this:
Just click on the link that says use it as thumbnail. Once you do that, you will see a screen like this:
The above screen means, that you are done. Simply click publish and the image will show on your site.
Developer’s Guide
Even though this functionality is added to the core, not every user will see this option in the sidebar of their write post panel. This is one of those functions that can be enabled only if the theme supports it. Older free themes might not support it, so you would need to ask the developer to update, or you can do it yourself by following this tutorial.
First you will need to open your functions.php file in your themes folder and paste the following code:
add_theme_support( 'post-thumbnails' );
This code will enable theme support for both posts and pages. So now you will be able to see an option in your dashboard. But it will not display in your themes because we have not added the code in the theme yet.
You can display the thumbnail anywhere inside the Loop by using this code:
<?php the_post_thumbnail(); ?>
That was the basic function, but if you want to get more advanced such as specifying post thumbnail size then you will just need to open your functions.php file and paste the code like this:
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 50, 50, true );
The dimensions are set in this order: width x height and these are pixels.
This is broken down version of the full functionality of this feature. We tried to keep it simple, so every one can follow it. If you want more information on this functionality then check out:
Comments
24 Responses to “How to Add Post Thumbnails in WordPress”Share Your Opinions
Tell us what you're thinking...
and if you want a pic to show with your comment, then get gravatar!
Please make sure that you have read our Comment Policy.
I would rather like to use a plugin for it.
Why is that? Plugins slow your site down, and It is probably the easiest way to do this.
very nice articles never know you can do this in wordpress.
so, how slow can plugins do to our wp site? is it significant?
The more database query your site make, the slower it loads and each plugin adds on to the queries.
Sweeeeeet!
Thanks guys, perfect timing, as I’m working on a WordPress theme for a client and it requires just this!
Now it will be sooo easy for the less-tech-savvy person that’ll write posts
Great hints! You’ve clearly explained each and every steps installing post thumbnails.
I’m a beginner and love what you’re doing. Would be nice to get very specific instructions for stuff like this. When I copy/paste to functions it doesn’t work.
Thoughts on what I could be doing wrong? Maybe a functions for beginners post?
Thank you and keep up the great work.
Are you using WordPress 2.9? If so then there is no way that it would not work. This is probably the best break down of this code.
While we try to make everything as clear as possible, sometimes it requires prior knowledge to complete some tasks.
If you want one of our staff to take a look and do this for you we can do it for a small fee.
Guys, does this only work with square images?
As in 50px by 50px?
I heard someone mention it only takes the height value when specifying dimensions…
(so 50px by 30px wouldn’t work)
It will work with any size. Sometimes the image quality will be lost if it is not the right ratio. We have it working on a client’s website and it works perfectly fine.
How can I get the thumb from outside of the loop?
We will write another article explaining that soon. Thanks for the suggestion. If you really want to go ahead and start working on it, you will use query_post function.
Looking forward to your post on showing Post Images Outside the Loop. I have yet to find a working example using WP 3.0
It would work the same way as this:
http://www.wpbeginner.com/wp-themes/how-to-display-custom-fields-outside-the-loop-in-wordpress/
Thanks you very much, it work. perfect
Any idea if this works for Page thumbnails? I’m trying to list child pages using this code. (the 2nd one, in ‘post format’. Switched out all instances of ‘content’ with ‘excerpt’ and used Andrew Oz’s Excerpt Editor which is seriously cool.
When I try to plug in the code for the thumbnail, it doesnt show.
Any idea what I might be doing wrong?
This code only works inside the loop. If you want to display it outside the loop then you would have to run a global wp_query function.
How do you add lightbox or thickbox (example rel=”lightbox” or class “thickbox”) to the thumbnail?
You have to use jQuery and add the class to the thumbnail. To add the class you would add : array(‘class’ => ‘lightbox’)
Wow thanks I’ve always wondered how to do this but never really had the patience to look for a solution. I didn’t know it was this simple. WOOOOT! Thanks.
Editors,
Do you use the wordpress’s post editor or some offline blog publishing software? I use Live Writer which has some decent options but sometimes I think of a switch-over to Wp’s post editor. Can you share some views on this please?
Thank you
Weel I was looking for the same thing. I have a quick question for ya. Is there any way to have default image of the category to show as a thumbnails? Or is there anyway to fetch first image of the post and use it as thumbnail as related post.
I implemented the above technique on my blog but the major problem is my all the posts doesn’t have thumbnail enabled. Which makes the situation horrible as I have to update all the post with thumbnail.
Is there anyway to use first image as default thumbnail using above technique?
Yes you can fetch the first image of the post by using Justin Tadlock’s Get Image Plugin. You can also add a if then variable by checking for is_post_thumbnail.
Cool!
To remember:
> add in functions.php
add_theme_support(‘post-thumbnails’);
set_post_thumbnail_size(70, 70, true);
> add in the loop:
php the_post_thumbnail();