Adding Post Thumbnails To WordPress 3.0

<div class="entry-content">
 <?php the_content( __( 'Continue&nbsp;reading&nbsp;<span>&rarr;</span>', 'twentyten' ) ); ?>
 <?php wp_link_pages( array( 'before' => '<div>' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
 </div>

<div class="entry-content">
// The Post Thumbnail function is active by default, but this line of php will make it display.

<?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(200,160), array("class" => "alignleft post_thumbnail")); } ?>

//Post Thumbnail Ends

 <?php the_content( __( 'Continue&nbsp;reading&nbsp;<span>&rarr;</span>', 'twentyten' ) ); ?>
 <?php wp_link_pages( array( 'before' => '<div>' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
 </div>

<?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(200,160), array("class" => "alignleft post_thumbnail")); } ?>

47 Comments

1. Well the only difference from 2.9 that i can see is that they changed “Post thumbnail” to “Featured image” in the admin. They could have done a better job with it (maybe they did, haven’t tested the post thumbnail/featured image works in 3.0).

   Here is a tut i wrote about 4 months ago on post thumbnails in WordPress 2.9 http://wpcanyon.com/tutorials/how-to-use-the-post-thumbnail-feature-in-wordpress-2-9/

2. The major difference is that the loop.php contains the majority of the key parts that were once in the index.php

3. I made a post a few days ago. Any response? – I see it is not published. Thanks

4. It may have been classed as spam so was deleted by Askimit

5. thx for the post!
   In TwentyTen they use the default function for the header image, so I was a bit lost. Your post helped me out!

6. Glad to help Veerle!

7. By this way WordPress will not automatically adding thumbnail to your post, here is another way to archive that: http://www.intenseblog.com/wordpress/related-posts-without-plugin.html

   • Hi and I’m sorry my bad English. I don’t know about php but I would like to know if in your link is possible to use it in WP 3.0.1.
     I’m not idea abut this but I need to apply a conversion to WP from my future html web-portfolio and I’m looking for how to do it.

     Thanks

8. Thanks for the info! I just added thumbnail support to my site just hours before upgrading to 3.0 so I was confused when I saw Featured Image after the upgrade.

9. Nice update.Thank you

10. thanks so much for this, been going insane trying to figure this out as I’ve only started using WP with version 3 and all other documentation has been about how it was in 2.9 which is subtly different enough to waste about 3 hours of my life!

11. hi

    just wondering

    i am not using twenty ten theme.

    the theme does not use loop.php

    which page should i alter instead.

    regards

    marcia

    • It will be in the index.php, want me to send you the code?

12. Hi,

    can you tell me how to put the code in the child’s theme functions.php?

    Thanks

13. Hi, this tutorial was very helpful, I’ve been searching for ages for this info.

    I’m not using twentyten. One of my sites’ theme has a index.php file which is where I assume I add the code, and the other site has an index.php file AND a home.php file. Not sure which one to add it to on that one to enable thumbnails (it’s a premium theme that has an option of magazine and regular view, maybe that’s it).

    Anyway, do you think you could send me the code to add to the index.php files to enable thumbs, and where to add it? Much appreciated if so.

14. Thanks very much for the heads’up! Although you should probably advise in the post that the classes the image is given are contained in that snippet, and can be changed at will.

15. Nice tutorial…
    But, I have problem.. how to set the feature image by custom fields or just image URL ?? because my hosting space is full and I want to host images on another server.
    Thanks..

16. Hello

    I have tried all the steps…I added the extra code into my theme’s index.php file and nothing really happened. Should I trip and add it to the function.php file instead? I am using F8 Lite as a theme.

    thanks

    • Did you add a featured image?

17. Hi. I put the code and it works. But how do i change the size of the image.

    In the code i see “{ the_post_thumbnail(array(200,160)” but my image is 300x… depends on the image.
    So i want to make it smaller than 300. 200 maybe 150.

    • You just update the numbers “200,160” – 200 being the width and 160 being the height, so amend to reflect the size you want the images!

      • well…it’s kinda strange. if i let 200,160 my image displays as 300×214. if i put 150,150 it displays 150×150. if i put below 200 it displays 150, no matter what value i put.

        i also tried with 400,360 … it displayed 840×600

        so how do i diplay my image 200×200?

        • That is rather odd indeed, we use 600,160 and it works fine, are the images you are featuring the same size as the width/height you have set for the post thumbnail?

        • Nope, they’re not.

          Got it. When you upload an image it makes other versions with the sizes you have on Settings -> Media. So my image had a 300x… size. So i think the script couldn’t use other size.

          Now i put 200×200 there and also 200,200 in the script and reuploaded the image. WP made a version of the image with 200x… size. So it works and looks great.

          Thanks for the answers :)

18. After following this tutorial, I couldn’t get a couple of things to work. The permalinks will not work with the register_post_type() and arrays outlined in a function; I simply removed this and permalinks worked fine

19. Hi Daniel

    I’ve been having serious problems uploading an image into a post/page since I’ve upgraded to WP 3.0. I use the f8 lite theme, which doesn’t seem to have loop.php. Could you send me the code to change the index.php?

    Many thanks in advance!

    Kim

20. thats helped a lot. thank you

21. I’m trying to add thumbnails to the posts in this archive (all archives, actually.) I added the code as described and the posts all have featured images, but no thumbnails display.

    What am I doing wrong?

    Thanks!
    Dee

    • Any advice on this? I really need to get the thumbnails working.
      Thanks –
      Dee

22. Thanks! i was looking a old tut but i guess that was for 2.9, now it worked (:
    I got only 1 more problem. The text get under the image if i got alot text in it. i want to fix that (i seen a tut by Soh tanaka on how to correct Orphans with overflow in css only i dont know how to do that in wordpress, i dont know if i may post links but here’s a link to the tut & what my problem is:
    http://www.sohtanaka.com/web-design/css-overflow-property-quick-tip/

    • And can i style the thumbnail some way? (i dont know what css file or where in the css files the thumbnail image is located to edit) i want for a example the thmubgnails to show 200×200 image(already done) with for example: padding:8px; border:1px solid #999; That would be great (:

      • .post_thumbnail {
        border: 1px solid #999;
        padding: 8px;
        }

23. Your fix works for default theme. How about other themes.
    i have wordpress 3+ but in my theme does not have loop.php.
    then which file i need to modify to activate this feature

    Pelase help

    • [php]<a href="<?php the_permalink() ? rel="nofollow">" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"> <?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(610,320), array("class" => "alignleft post_thumbnail")); } ?> </a>[/php]

      Use this code and put it in your loop, be sure to change the values 610,320 to the size you require,

      • Thanks for the reply and code,
        But where should i put this code, Please mention the file name.
        My theme does not have loop.php file

        • It will go in index.php.

24. In index file, can i copy anywher ?

25. I want to show my pages as thumbnails and not posts. How can I go about it? Thanks

26. Hello, thanks for the great tutorial. One question: if I want to place the thumbnail in a division that sits to the left of and aligned with the top of each post, what is the best way to make that happen?

    What’s happening now is that the image is floated to the left of the content, which wraps around the bottom of the content. What I want to do is float a division to the left of the content which will contain the image and have the content stay to the right.

    I found a website that had a similar layout: aisle one dot net.

    Thanks.

    J

27. Brilient you are the only one who pointed out that if you are to get the thumnail you need to make one image as featured image. well i was scratching my head for days thx

28. I will put together another tutorial expanding on this article and hopefully will answer a lot of your questions!

29. thanks alot!! finally i’ll have a featured image on my photos page. now i just need to figure out how to make that page have two columns :) (i’m a newbie)

30. Unfortunately your tips just work for TwentyTen theme. The codes you gave can also be used in other themes but they need to be accompanied by some functions contained in the functions.php of the TwentyTen theme. I’m still filtering out which functions I should copy to my theme’s functions.php and which are not required.

31. These are great WordPress resources – I actually just started digging into a really really solid book on WordPress 3.0. It’s got some really nice code samples, and is written by a few pro WordPress developers (including some from Envato). I’m actually giving away 2 copies of the e-book on my site – check out the details about the e-book and the giveaway here – I think you’ll dig it : http://bit.ly/lq20Ff

32. This worked great! yet…How do you link the thumbnail to the post?

33. Hi, I only own a wordpress.com site where I also subscribed to have my own domain. That is what exactly I want my preview post to look like [image thumbnail left aligned along with text intro or excerpt].
    But when I add my featured images, it is placed on top of the post excerpt which I dont want cause it will consume space.
    I am currently using the fresh news theme by woo themes.is it a problem with my theme? how can I make same edit with just my wordpress.com site, cause I think we can’t edit our php or codes.

34. I like your design man, much less white space than everyone raves about these days, but still looks really great!