WordPress 3.0 video tutorial how to set “featured image” or add thumbnail to your post using default theme twentyten.
First when i click “set featured image” button, and refresh my blog, the thumbnail or image does not display and missing. This is because we have not called the function to display this image as your thumbnail yet.
So today, after i posted how to install wordpress 3 a few days ago, i will share it with you how to display missing featured image. I was so excited to make the video! :) you can probably notice from my voice.
To display the thumbnail which is missing here are the steps:
1. In your admin dashboard, click one of your post to edit it. Scroll down until you find “set featured image”. This will bring media upload dialog box.
IF you use other theme, and you don’t have featured image menu as shown in above image, add this following code to your functions.php (WARNING: backup your functions.php incase you will get parse error!).
add_theme_support( 'post-thumbnails' );
If you have that already, go straight in step 2.
2. Browse the file from your pc, and click upload.
3. Once it is uploaded, scroll down, hit “set as featured image” button, and click “save all changes” then close the dialog box.
4. Next step, go to Appearance/editor/loop.php.
Open this loop.php file, copy all content and paste it in notepad++ or other html editor and find this line of code:
<?php the_content( __( 'Continue reading <span>→</span>', 'twentyten' ) ); ?>
Before that code, copy and paste this code:
<?php the_post_thumbnail();?>
The image after you paste the code above:
copy and paste it back to loop.php file. and do not forget to click “update file”
5. Now stylizing the thumbnail of wordpress 3.0 twentyten default theme by adding this code in the very bottom of style.css:
.attachment-post-thumbnail{width:200px; height:200px; padding:10px 20px 10px 0; float:left;}
Of course you can apply any styles to this css as you want.
6. Click “update file” and refresh your blog, the thumbnail or image should show up if you did all correctly.
Or watch this step by step video.
{ 106 comments… read them below or add one }
Great video! It was very informative and moved at a good pace, helped me a lot! Thank you!
@Lia, You are very welcome! I am happy that it could help :)
thanks for the tip… worked like a charm… the only thing im hating about wordpress 3.0 so far is the loop.php file… i know that soon i’ll get used to it… but so far that’s the only thing im disliking about thelonious.
cheers.
@khaled hakim, Thank you for commenting!! I actually wait until someone comments to know it works or not.
Today i am so happy that you confirmed it works :)
Yes, the loop.php is way more complicated than the old kubrick, especially for beginners like me. But it is a wonderful theme, and love the drag and drop menu features.
i thought I would share this also useful piece of info for the thumbnail images to appear next to each post.
to make the thumbnail image a link, simple add this code instead of the one provided by dina and place it in the correct place (as explained by dina) in the loop.php file:
<a href="”>
This will make the image next to the post a link in itself. :) cheers.
@khaled hakim, Thank you for this input, never thought about it.
Thanks :)
the comment i added with the link to make the thumbnail become a link did not appear properly in your comment section.
you might wanna go in and edit that so that it appears!
cheers
@khaled hakim, Did you mean this code?
a href="<?php the_permalink(); ?"><?php the_post_thumbnail(); ?>add “<” before a href.
I could not see the code either, but i tried myself, it didn’t show let’s see this time lol. (I have tried many times but it shows always a linkl)
Thanks!
Thanks ! It works!
@marvin, so glad it works for you.
Thanks for commenting :)
Hi, where do you get the “featured image” plugin? Can’t find it anywhere,
Thanks
@rob, hey there,
This is not using a plugin, it is by default is set if you are using wordpress 3.0.
So if you use wordpress 3, it should be appeared in your dashboard.
I hope this helps.
Hi – just watched your video – very useful.
But – I am using wp3.0 and found that by adding:
add_theme_support( ‘post-thumbnails’ );
To functions php it appears – but I have no loop file with my theme so does that mean i need to create one?
Thanks so much for your help.
rob.
@rob, Yes, after you add this code in your functions.php:
add_theme_support ('post-thumbnails');if (function_exists ('add_theme_support'))
add_theme_support('post-thumbnails');
Then you can follow the tutorial, it should be added in index.php if you have another theme.
Also if you want the thumbnail to appear in single post page, you can also added in single.php file.
Let me know if it helps.
Ok so are you saying instead of adding the code into the twentyten loopphp, cos i don’t have a loop file with my theme i should place it in my themes index file?
This I tried but parsed errors – not sure where to place it.
Thanks.
@rob, Do you have this code in your index.php, or similar code?
<?php the_time('F jS, Y') ?>If yes, paste the code after code above.
If not, it would be easier to help if i see your site or you tell what theme you are using.
You should place it in the template which you wish to display the thumbnail… and you should place it in the php (code) loop that generates your posts. You simply need to find the piece of code in your index.php file (assuming thats the page you wish to add the thumbnails to) that does the “get post” function and lists them. Simply add the code provided above to add the thumbnail to the code loop. If you need more help on where to place it still, email me your index.php file (copy paste it in an email) and ill send it back to you with the code placed iin the right place. khaledhakim[at]gmail.com
@khaled hakim, Thanks for the help :)
Hi Dina,
Thanks for the help – sorry for late reply – pc crashed saturday and been rebuilding since.
I’ve attached my site. I’ll go through it again now with a fresh head and see how i get on,
Many thanks,
rob.
Ok it’s working but not exactly. It’s placing the images on the frontpage but not where the theme I’m using would like – you can see by clicking my name – link behind.
I’m wondering, I’m quite happy to pay you using paypal if you wouldn’t taking a look.
Thanks again,
rob.
@rob, I have made a quick tutorial using your theme here:
http://www.blog.web6.org/display-image-post-in-squared-2-theme/
The video is waiting to be compressed, but if it works out then you don’t need to see the video ;)
Your theme is using custom field to add thumbnail, so you don’t need to add any codes above.
I may put a donation button of this blog, if we talk about payment, but someday.
Let me know if that post helps.
You just saved me so much time looking for references for this, thanks!
@Jasper Kennis, I am glad it was useful.
Thanks for your nice comment!
Great video, thanks Dina
I was wondering how could i get this done in the frontpage?
@Terrence, hello there,
It really depends on your theme, if you want to have it in the front page, for twenty ten, it is in loop.php file, but most of themes use index.php for the front page.
hi ,
i have problem i can’t get the feature image in wordpress 3.0 i want the feature image out of loop .. i had like this code…
echo ”;
if(has_post_thumbnail($PostId2)) {
$imgdps = get_post_thumbnail_id($PostId2);
echo $thumbnail;
echo”; //the_post_thumbnail(‘d-featured’,$PostId2);//the_post_thumbnail(‘d-featured’ );
} else {
echo ”;
}
@deepesh, Hi there,
I guess it depends on the theme you are using. The tutorial is using twenty ten.
I can’t help with your code, you might want to ask in wordpress.org support forum, good luck.
My theme is based on the Twenty Ten theme. Basically i want to have featured image on the side like psdtuts.com
@Terrence,
The tutorial’s result above will have twenty ten having thumbnails with the image floating to the left (as image)
And if you want to have it like psd tut, the method is still the same but the css will be different. The result will be as in image. I suggest you to hire a coder to tweak your theme, but be careful with scammers.
Hi,
I think Dina can help me =(
It’s my first WP-Theme mood.
Im having the same problem that Terrence but to make it easyer i just switched to the original Twenty-Ten Theme, so you can help me….
1st. I placed the code
2nd. I notice you say before that we should place first this into the loop:
add_theme_support (‘post-thumbnails’);
if (function_exists (‘add_theme_support’))
add_theme_support(‘post-thumbnails’);
but i didnt because i dont know where in the loop i should place it and i saw that they already have part of this code…. well, just add_theme_support (‘post-thumbnails’);
im a bit lost… please help me
ok ok…. forget about this =)
i found the error…. and probably other people will get the same… theres to lines with almost the same code and when someone try to find the pice of code that should be below is probably getting the second one….
i fixed putting it on both places.
another point is that i dont know if its because im using WP 3.1 but with the fix you just explained, the “Post Image” or “Featured Image”(as is called in WP 3.+) just make the image appear beside the post’s in the blog, but not in single pages or any other page, so everybody should remember to call the function in every template page they want it to appear.
In my case, im creating a site using WP as a CMS, and almost every single page has a Featured Image beside the content, this feature will be great for my client and me because now he just need to select the image, from this ui label, and the code auto adjust the size and keep the site look as clean as posible.
if any one is looking how to make the thumbnail’s have an specific size follow this link, its helps a lot http://support.bavotasan.com/topic/how-to-set-the-post-thumbnail
Dina, my rewards.
@Luis Rivera, Hey there,
If you use twentyten theme just follow the tutorial above (also video) it will work.
But if you have other themes, it really depends on the themes, you can also add codes add_theme_support line above in “functions.php” not in loop.php. (in twentyten’s functions.php, this code is already in by default).
The tutorial above will show the thumbnail only in “home” page, if you want to add it in post page, then pasting the same code in single.php will work.
Remember always to be consistence with the size, because cropping it online, will make your blog slow.
I have checked the link, it was made for specific theme, didn’t try the plugin, but i personally would not use plugins if it can be solved manually.
Thanks for the useful link Luis, and good luck.
@Dina, hmm…
so, set_post_thumbnail_size( 150, 150 );
is not a good way to crop the images on my blog?
Cuz im looking the easyer way to allow my client be able to do most of the changes minimizing the damage on the look…. and as you know for sure, they never understand if ask them to upload the images with an specific width and height.
suggest me the most recommendable way for this please.
@Luis River, hey
As i am aware of, it is not good to crop the images which is larger from the original.
Page load speed is the reason, but i suggest you asking wordpress.org support team to get a best recommedation:)
@Dina,
As per tutorial, I did everything..but featured post is not appearing on homepage of my blog..(www.DigitGuide.com)
Can you please tell me..what may be the problem..?
@Dina,
Thanks..
now I resolved it..
it was my homepage_excerpts plugin which was causing problem..
just changed plugin setting to “Number of posts to be displayed fully” and it Worked..
Thanks again..
@Deepak G, Awesome” Thumbs up that you found out the problem was.
I have checked it, i see the images:D
i am using Free Image Hosting Sevrer then How to Set featured image .?
Unfortunately i don’t know.
But i guess it is not possible, unless those images have dynamic links that are organized.
Its ok .if u find solution then pls mail me..
I certainly will. Thanks for coming by.
Is there a way to set a default image for a specific category and have a different default image for each category?
Hi wade,
I am not sure about it, but i guess it is possible if we can tweak the theme, my php knowlegde is not that far :( sorry.
Thanks for leaving a comment.
Hey Dina, Thanks for this helpful post..
You’re most welcome, glad you found it useful :D
Show de bola a video aula valeu, brigado tava procurando a muito tempo esse tutorial para vazer minis posts na homer do meu site…..
Gracias! =D
Tnx for this post i was looking for how to use featured image tryed wordpress.org but this explains it way beter! :)
You’re most welcome! Glad it was useful.
Thanks for your nice words Parijs.
Dina,
My featured images are set up and working, however I have not been able to successfully make them clickable to the entire post…
this is where my code for this function is, could you show me where to insert the href?
?php
unset($cimage);
$cimage = catch_that_image (get_the_id(), ”, ”, ” .get_bloginfo(‘template_url’) .’/scripts/timthumb.php?zc=1&w=130&h=50&src=’);
if ( current_theme_supports( ‘post-thumbnails’ ) && has_post_thumbnail() ) {
the_post_thumbnail(array(234,9999, true)); } ?>
Hey Mike,
I have made a tutorial here: http://www.blog.web6.org/wordpress-clickable-thumbnail-link/
I didn’t use functions.php file for it.
I hope this helps.
This is really helpful. many thanks Kimi
Ben,
You’re most welcome! Thanks for leaving a message.
Think I posted this on another post first… sorry.
Thanks for a great tutorial. I’ve managed to get the featured images to display, but I can’t get the styling right. I’ve used the exact same css as in your example, but still no success, why?
Hi there, Erik,
Do not be sorry, i had a problem with my theme’s modification code, since i switched to a new theme today :-)
So it is not your fault. However i checked your website, and checked the css file, you did put the code incorrect :-(
Here is the screenshot (it should work if it is pasted in the bottom of style.css)
In the image and in the tutorial you should paste the piece of the css code right in the VERY bottom of style.css
I hope this helps.
Thank you VERY much! You rock!
Just checked it, it works!
Most welcome, glad it helped.
Best luck to your new blog!
btw, can the featured images be displayed on category pages too? I’ve tried but didn’t succeed :(
I guess it can. But I have not tried it yet.
Thanks for the idea, may will create a post on that too. You can subscribe to the feed if you want :-)
Look for code:
and add right below
Hi
I have some Q here,
When I set a image as featured image I am geeting that and thumbnail is also created on the homepage .
I want something like that featured image shouldn’t be in that post content
It should be only in the home page as thumbnail
Is there any way to do that ?
Hello Aswin!
In the tutorial, i use Twenty Ten theme, and display only on “home page” and not in the post content.
If you are using the same theme, follow the video.. But if you use another theme, then it should have different code, you can ask the theme developer..
I hope this helps..
Regards,
Kimi.
What if I ONLY want thumbnails on category archive pages?
Hi Patrick,
I have posted here: http://www.blog.web6.org/category-featured-image-thumbnails-in-wordpress-category-page/
I hope that helps.
This not working when we have turn on multiuser mode.
Please Help.
You can use for getting the thumbnail version of the featured post.
Shweta
Thank you so much for your tip. Your video really helps a lot for newbies like I am.
I am glad it helped, Leo!
Thanks for leaving a message, Good luck with the new blog :-)
Hi,
Just saw your site by a tip. Hope you can help me, can’t find an answer to my q.
I’m using a free theme (designpile) for wp 3.1. But i can’t figure out how to put featured image on the feautured post. I see the thumbnails but no image in the featured post. The documantion siad:For the image of featured post you need to add a custom field called “featured_img” with the full path to the image as value.”
I dond’t know what the mean exactly here. Can you help me??
Many thanks! (sorry for my bad Englisch:-( )
Hello Erik,
I have bad English as well :-)
I have made a tutorial : http://www.blog.web6.org/display-image-post-in-squared-2-theme/
The tutorial uses squared 2 theme, and it is also using custom field, called “image”
Please watch the tutorial, but instead typing “image” as custom field, replace it with “featured_img“.
I hope it helps
Kimi.
Hi Kimi,
This video and post were extremely useful and enlightening!
On a different note, I’m wondering how you get get a website preview thumbnail when sharing/posting your websites’ link on facebook? When doing it with most any website there’s a little image/thumbnail and little desrciption on the side that shows up but nothing happens for my website when I share it on Facebook.
Any ideas?
Thank you in advance for your help!
Best,
Lawrence
Hi Lawrence,
Yes, you can actually show thumbnails and its decsribtion in Facebook, but you have to add some codes, which you can Google. I ever read somewhere, but never really tried it, because I use twitterfeed and it displays automatically.
Kimi.
Hi Kimi,
Thanx for your quick response!
I found out what was the problem. In wp 3.1 no “custom field”is showing bu default. So i had to put it on in “screen options”. Because of my wp-lang. (dutch) i didn’t reconize “custum field” in screen options. But now i know it had to be there and it worked now! Thanx for your help, i will come back to this helpfull site!
Greetz,
Erik
Hi Erik,
Aaaaaaaah, ya, the screen option is hidden.
Glad it worked out at the end!
Thanks,
Kimi.
Thanks Kimi! Have searched and seem to have found an answer, now the key is get it to work!;-)
Best,
Lawrence
Awesome Lawrence, glad you found the answer!
Kimi.
So cool. It worked!
I’m surprised “Featured image” isn’t available on the backend by default. Glad to see how easy it was to add. Thanks!
Hi Kimi
You make it look very easy.
Took you a few minutes – would take me a couple of hours. LOL
Just had to use “set featured image” on my updated theme.
Just as well my theme supports it.
BTW – do you do any videos on Genesis theme framework?
I’ve just bought the developer package to set up a few company websites.
Thanks for showing us how.
Hi Keith!
No, I don’t have premium theme videos, I don’t want to make it, because they have own forums :-)
I hope you will like your new theme!
Thanks
Kimi.
I’m using Twenty Ten 1.2. “excerpts” summary only.
I have added ” is_home() ” in this line so all my post show summery.
can I still call an image in excerpts mode? your method does work if i dont have summary only for home page.
Roger,
I have never tried that method.
Thank you!!! Thank you!!! Thank you!!! I could not for the life of me figure out why some themes give the link to set featured image and some didn’t with my recent install of Wordpress Multisite. Keep up the good work!!!
Most welcome, Brad!
Come over soon :)
Hi I used your tutorial and for some reason I can’t style the image at all… It just stays in it’s original size.. Is there a way for me to fix that?
hey kimi! great article but for some reason when i have multiuser mode on, its not working. would u know how to resolve that issue?
Hi Dan,
Welcome to a newbie blog :-)
I have no experience on multiuser wp unfortunately..
I hope you will find solution soon.
Thank so much! The theme I had seemed to use a featured image, but there wasn’t any way to set WHICH one was picked if I had more than one image on a post. This helped save me the big headache of fiddling and guessing, thanks a bunch!
Hi Kimi!
Just wanted to let you know i tested your code and stuff on wordpress 3.1.4 and it works with one slight alteration.
in the style.css, when i named the class “.attachment-post-thumbnail”, the image didn’t float. So i inspected the image and found out that my browser wanted “img.attachment-post-thumbnail” as the class name. You might want to add something up in the post about that :P
great idea! thanks for getting it out there,
-Martin
Hi Martin!
Thanks for the catch-up.
I have checked withj wp 3.2 beta, and the css code above still works. Only now the loop.php is changed.
I might create another new post about it.
Thanks to point it out, I truly appreaciate it!
Kind regards,
Kimi.
good idea, thanks.
We have a image problem that occurs only on main page.. When you go to facebook and you and you click on link and you put in goldleafspiceandteas.com/ it doesn’t show the title, description and shows up this EVIL jewerly image. When want the logo goldleafspiceandteas image to appear.. It works correctly on the posts and pages.. But I take the reason why it’s not working is because the index is not inside of wordpress itself so therefore, that’s probably why it’s not working. When I double click the image and save it on my desktop that image comes up as php file called safe_image.php
I wounder this code will work??
Hi Jen!
Unfortunately I have no idea how it will work with Facebook, as I have never tried..
Kind regards
Kimi.
Hello Kimi
I’ve hunted the internet for a solution and can’t find it. You however seem to be the closest and therefore my expert!
If you check the website: http://www.alanturnerimages.com
It opens to the blog. I want to click on the image and for the image to open full size.
At the moment when you click on the picture it opens to the post and then you have to click on the image in the post to get it full size.
In essence it creates 2 clicks to open the picture.
I am not an expert so please (if you can help) go slowly.
Can you help?
Rgds
Alan
It’s okay. I solved it and it works.
Rgds
Alan
Hi,
Thanks so much for the tutorial. It was just what I was looking for.
I have managed to get the set featured image activated as per your instructions. But, I am having problem with aligning the image with the post. I have placed the code .attachment-post-thumbnail{width:200px; height:200px; padding:10px 20px 10px 0; float:left;} at the very bottom of style.css but nothing happened. What could be wrong?
By the way, where do you go to check whether the image is called attachment-post-thumbnail? I am using twenty ten theme. for your information.
Thanks so much.
Naomi
Oh my gosh! I could not figure out what I was doing wrong. That little evasive “add as feature image” link! Thanks for your hep. It works perfectly now.
hi! recently i’m having a problem… i believe it started when i installed a plugin for automatic post publishing on fb (already uninstalled).
now everytime i paste the link on facebook an image appears instead of the 1st image of the post.
this only occurs when there’s one image on the post and when the image is located BEFORE the “READ MORE” code, else everything goes ok…
would you be so kindly to help me out? i haven’t found an answer cause really don’t know how to search for that specific problem :S
i’m using the latest version of wordpress (3.2.1)
THANKS!
Don’t know if you still answer these questions here, but I’ll give it a shot.
I am using this feature on my new blog right now, and running into an issue with using the same feature image more then once. Apparently it attaches the photo to the post, so you can’t use the image more then once. However for my basic news updates that don’t have photos within it, I want to alternate between two images. I can’t find ANY info on how to go about doing this other then uploading the same images over and over and over again and thats just not a doable option for me.
hi I have made it adding featured images in my home post, but when I try to view that post via categories, the post shows but no preview image. can someone help me please?
here’s the site im working on
http://flamedidea.byethost31.com/
you can see that the 2nd post has feature image now, but
when you click my main menu portfolio, that post will show but the thumbnail I set is gone.
Hi Rafael,
Welcome to my blog,
To display on the category page, I actually posted in this link:
http://www.blog.web6.org/category-featured-image-thumbnails-in-wordpress-category-page/
I hope this helps, regards,
Kimi
THANNNNNNNNNK YOU! You are the BEST!
Funny enough, I’ve got the opposite problem from Raphael -
My wordpress theme is like a news website, and uses a “Featured Image” from a blog post on the front page. Does anyone know how to feature an image WITHOUT having to have it show up in the actual post? Love the post, btw, I’ve been taking full advantage of the feature.
You know, I sort of figured it out 10 seconds after posting that – when you’re uploading a featured image, you can click “USE AS FEATURED IMAGE” without ever having to click “INSERT INTO POST”. Unfortunately, I don’t think there’s an option to do that when you’re drawing from the galleries created by the plugin I use to manage photos.
Nice tutorial.Very helpful to use featured thumbnail image in my homepage.Thanks for sharing.
Hello, I finally found the answer that I was looking for.I use ctr theme and I don’t have menu in admin panel.Now I am edited through your greate video.I still have a problem with loop.php file.I don’t have any code “<?php the_content( __( 'Continue reading →’, ‘twentyten’ ) ); ?>”
Here is loop.php on paste bin:
http://pastebin.com/embed_js.php?i=93RgJFcR
Can anyone tray edit the code ?
Thank’s
{ 1 trackback }