wpvidZ

Learn WordPress With Video Tutorials

wpvidZ Blog Tutorials WordPress 3.0 “Set Featured Image”

Tutorials

WordPress 3.0 “Set Featured Image”

Last updated on
Posted on

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>&rarr;</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.

Latest Posts

Comments

  1. Lia says

    Great video! It was very informative and moved at a good pace, helped me a lot! Thank you!

  2. khaled hakim says

    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.

    • Kimi says

      @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.

  3. khaled hakim says

    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 Kimi and place it in the correct place (as explained by Kimi) in the loop.php file:

    <a href="”>

    This will make the image next to the post a link in itself. 🙂 cheers.

  4. khaled hakim says

    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

    • Kimi says

      @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!

    • Kimi says

      @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.

  7. rob says

    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.

    • Kimi says

      @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.

  8. rob says

    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.

    • Kimi says

      @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.

  9. khaled hakim says

    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

  10. rob says

    Hi Kimi,

    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.

  11. rob says

    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.

    • Kimi says

      @rob, I have made a quick tutorial using your theme here:
      https://www.wpvidz.com/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.

    • Kimi says

      @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.

  15. deepesh says

    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 ”;
    }

    • Kimi says

      @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.

  16. Terrence says

    My theme is based on the Twenty Ten theme. Basically i want to have featured image on the side like psdtuts.com

    • Kimi says

      @Terrence,

      The tutorial’s result above will have twenty ten having thumbnails with the image floating to the left (as image)
      featured image floating to the left

      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.
      like in psdtut.com

  17. Luis Rivera says

    Hi,

    I think Kimi 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

  18. Luis Rivera says

    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

    Kimi, my rewards.

    • Kimi says

      @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.

      • Luis River says

        @Kimi, 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.

        • Kimi says

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

  19. Deepak G says

    @Kimi,
    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..?

    • Deepak G says

      @Kimi,
      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..

  22. wade says

    Is there a way to set a default image for a specific category and have a different default image for each category?

    • Kimi says

      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.

  26. Mike says

    Kimi,
    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)); } ?>

  28. Erik Fors-Andrée says

    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?

    • Kimi says

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

      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.

  30. aswin says

    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 ?

    • Kimi says

      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.

  35. Erik says

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

  36. Lawrence says

    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

    • Kimi says

      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.

  37. Erik says

    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

  38. Lawrence de Laubadere says

    Thanks Kimi! Have searched and seem to have found an answer, now the key is get it to work!;-)
    Best,
    Lawrence

  39. Matth says

    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!

  40. Keith Davis says

    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.

    • Kimi says

      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.

  41. Roger says

    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.

  42. Brad Leyten says

    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!!!

  43. Farhana says

    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?

  44. dan man says

    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?

    • Kimi says

      Hi Dan,

      Welcome to a newbie blog 🙂

      I have no experience on multiuser wp unfortunately..

      I hope you will find solution soon.

  45. Kaela says

    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!

  46. Martin says

    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 😛

    great idea! thanks for getting it out there,

    -Martin

    • Kimi says

      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.

  48. Jen says

    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??

    • Kimi says

      Hi Jen!

      Unfortunately I have no idea how it will work with Facebook, as I have never tried..

      Kind regards

      Kimi.

  49. Alan Turner says

    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

  51. Naomi says

    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

  52. Zach Milne says

    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.

  53. Alejandro sanchez says

    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!

  54. Kat says

    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.

  55. Rafael John says

    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.

  57. Chris says

    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.

  58. Chris says

    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.

  60. Alex says

    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

  61. Andy says

    Thanks for the video. It was excellent, great instructions, and helped me find the answer I was looking for in less than 2 minutes! Great job!

  62. Salam Kudhus says

    Hi!

    I have tried to add a feature image to my posts. Unfortunately the option dialogue box is being hidden in bottom left of the screen. I can see only a tiny portion of the dialogue box.

    I cannot move it to click the upload option but the Cancel link is half visible.

    Please help

  65. georges says

    realy thanks, a great tutoriel, that helped me in solving the featured image 🙂 keep on,
    My blog: blog.georges-aoun.com

  68. Devon says

    It doesnt work in the latest wordpress.What I want to do is to automatically add an image when a new post is published.

  69. Adam smith says

    I already know how to make pictures featured but every featured image appear on the 1st paragraph on the post.
    how i make the image appear featured only and not appear on the post.
    help please!

Trackbacks

Comment form on this post is closed after 60 days.