How to Add Post Thumbnails in WordPress

Posted on January 18th, 2010 by in Themes | 80 Comments  
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.

Post Thumbnails in WordPress

Click on the link, and you will be taken to an upload image page. Upload the picture, and you will see something like this:

Post Thumbnails in WordPress

Just click on the link that says use it as thumbnail. Once you do that, you will see a screen like this:

Post Thumbnails in WordPress

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.

You can also add additional image sizes for your featured image by adding this line:

add_image_size( 'single-post-thumbnail', 590, 180 ); // Permalink thumbnail size

You can later call the specific thumbnail sizes in your post loop like this:

<?php the_post_thumbnail('single-post-thumbnail'); ?>

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:

Mark Jaquith’s Article on Post Thumbnails
WordPress Codex

About

Editorial Staff at WPBeginner mainly Syed and David.

Post comment as twitter logo facebook logo
Sort: Newest | Oldest

Can you wrap the code in an img tag?

e.g <img src="<?php the_post_thumbnail(); ?>" />

Oops, my example above failed.

e.g i mg src="<?p hp the_p ost_thumbnail (); />

Ignore my comments. I figured out why you wouldnt want to wrap them in img and anchor tags :D.

Thanks for the post

canada goose jackets 5 pts

Keep writing, continue to inspire, to keep creating I like the idea and the website is fairly easy to use. I do wish that they would review more than the top 20 or so websites in the field. The web is a big place.

mbtshoesmbts 5 pts

Thanks for posting this info. I just want to let you know that I just check out your site and I find it very interesting and informative. I can’t wait to read lots of your posts.

Speeltjezoeken 5 pts

Thanks, this post helped me to get on the road again..

lakkolmahendra 5 pts

Thank you very much for the wonderful information. It's simple method to add thumnail in your homepage. I'll try for my site today.

kevin.m.kwok 5 pts

hmm the pictures in my post are also trying to appear on my homepage along with the featured image. I'm not sure if that has to do with trying to add the thumbnails. You can see the error here at my site. www.briefopinions.com I don't want the pictures to show up at all

thanks!

birdhammer 5 pts

Hi there, I just tried to enter the code above by following instructions in the video, but when I updated it I got a parse error. I cannot even log into my dashboard. I feel like an idiot!

I use wordpress with modularity lite theme and my site is birdhammer.com.

Can you please help me?

CaseyDennison 5 pts

mines not working at all i keep gettin errors in the php and it is written up correctly. i dunno is screwed it keeps showing the functions code at the very top of my wp dashboard ??? thats weired

wpbeginner 50 pts

The placement of the code in your functions.php file is probably causing the errors. Are you using a theme framework? Are you adding it way at the bottom??

SagivHaalush 5 pts

wpbeginner Hey :) VERY(!) helpful post, However I got to the exact same problem after adding the 2 lines(at the bottom...). When I put them at the beginning, nothing happens...

Can you please be more specific as for the placement in the loop(Which/where)? Thanks :)

davede 5 pts

Good stuff.Thank you.

I'm having a hard time having the thumbnail appear only in the excerpt not on the post page.

any ideas?

wpbeginner 50 pts

davede You would need to add the thumbnail code in your single.php file as well.

davede 5 pts

wpbeginner Ah thanks, I resolved the problem. details here: (well seems i can't paste a url in). that sucks.

kevin.m.kwok 5 pts

Hello, great tutorial. Everything works, except I can't get the thumbnail to post "left" of my post on my homepage. It always goes on top of my post, even if I select left in the thumbnail options. Any Ideas?

wpbeginner 50 pts

kevin.m.kwok Yes, this sounds like a CSS issue. Your image css class needs to have float: left property.

kevin.m.kwok 5 pts

wpbeginner Worked Perfectly thank you so much!

Hi WP Beginner.

Great WP tutorial above from the Editorial Staff!

I have a quick WP thunmbnail gallery page photo question. I've been trying to add some simple Custom Field php code to my Catefory.php template in order to add a small text caption title below each thumnail image. Very frustrated...anyway, I have attached below the Category.php thumbnail loop and was wondering if you can help me write the a Custom Field php code (field called "thumb_tag") within this loop. Here's the code:

ID, 'main_image', true); ?>

<a href="" ><img src="/resize.php?w=162&h=105&file=" alt="" title="" width='162' height='105' />

Thank you very much!

Pete

Why use custom field for that? WordPress has that built-in default.

http://www.wpbeginner.com/wp-tutorials/how-to-disp...

Thanks for awesome tutorial .it's the simplest and unique method to add thumnail in your homepage.It works on my site.

i am new to wordpress,not knowing too much programming..i liked ur article.but can u tell me exact at which position we have to place this code..like fuctions.php is a file,which we have to edit,at what place we have to add that code,is there any demo for that?

Different themes have different codes in the functions file. You need to add this code within the php tag.

Thanks, I think I've gotten it to work. However, when adding a thumbnail, it is now automatically added to the top of my post, even though the post already has an image.

Great tutorial - However, and I cant find this information anywhere - BUT, I want to add the thumbnail to the post-editor screen so that my writers can see what it would look like inline with the post before they publish. Where could I do that? Thanks in advance.

You see the thumbnail once you upload it, however there is no live preview on the admin screen. Your author can simply click Preview and see the post in the new tab <<

Hi
Thank you for the info. i followed the steps in my theme, however my pictures still do not show in the image box...they look like broken files on my Home page. When I click on them, then they appear. How can i make them visible on the home page? Thanks

As long as the_post_thumbnail(); is inside the loop on the homepage, it should work fine.

thanks for your help ! i hate plugin so i rather like using template funtion !

Thanks for the great post - specifically about add_theme_support( 'post-thumbnails' ); - It worked great with the wootheme I am modifying

Thank you for the great information.

Each of my posts has a photo. I am trying to get each post's photo to show up as a thumbnail in the RSS feed. Will the above method work to do this?

No, you will have to use this method in conjunction with this method:
http://www.wpbeginner.com/wp-tutorials/how-to-add-...

Thank you for your quick response.
I am a little confused as the theme I am using, AutoFocus+ also requires the Thematic theme. Which functions.php file needs to be edited? Or do both need to be edited?

Wondering also about where to put in the code?

I've gone through the steps in this tut, but for some reason I get the following error whenever I try to select an image from the gallery option:

Fatal error: Call to undefined function: get_post_thumbnail_id() in /wp-admin/includes/media.php on line 1292

Can anyone help me in sorting this out?

thanks
Bernard

is this actually cropping the image on upload? Or does it just display it at the appropriate height and width when it calls it on the page? I ask b/c we pull our feed from our blog onto a non wp site and link back to it but would like to be able to reference the thumbnails. It is a asp site so I don't have the luxury of php's native image manipulation

It is resizing the image not cropping it.

Thankyou gyus you're inredible!
Iloveyou

Hello
We have this code in theme functions (it came with theme skin) the theme has a image slider that uses the 'post thumbnail' function. yet it doest show in admin so we cant get slider to work;

<?php

help : ) thank you

Helen,

We do not see the php code. Can you please encode your PHP code before pasting it in the comments? Or you can send us an email using our contact form.

works great!! just one query.. how can i add a link or wrap a link around

so that when someone click the link a lightbox opens with the original size.

Just to clarify.

At the moment in functions.php I have

add_image_size('my-custom-image', 640,9999); so the image in the post is 640 in width, this will then be linked to the original image which is say 1000px by 500px.

I did find this: http://polymathworkshop.com/shoptalk/2010/03/19/ge... which works to a degree but opens the thumbnail in the lightbox.

The only way to get it to work is to link to the original attachment of the 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();

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.

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

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

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

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.

Tweets about us: