Adding Post Thumbnails To WordPress 3.0

Post Thumbnails were first introuduced in the release of WordPress 2.9, but seeing how the theme structure has slightly changed in 3.0 we have put together a short tutorial showing you how to add Post Thumbnails to your articles and posts.

You will require basic understanding of WordPress Theme development and PHP. This tutorial will be split into two parts, one for WordPress Admin amendments and one for PHP updates to the core theme files.

WordPress Modifications

We will be using the new default theme to showcase this tutorial, but it can be easily adapted into any theme upon release. First you should have already have the WordPress beta installed already and none of the code has been modified.

If you are logged in as an Administrator, press Edit under the post and you will see the Featured Image widget.

Set a featured image for your post. In this example it is best to use one that is rectangular, so we have gone for the WordPress logo.

Now the Featured Image widget should display the WordPress Logo as shown below.

Now it’s time to update your post, but you will notice that the Featured Image will not show in your posts or articles. But to fix this some amendments to the themes code need to be updated.

Updating Your Themes Structure To Support Post Thumbnails

If you hadn’t noticed already once you go into the twentyten theme folder, there are a few new files. One being loop.php which has a majority of the code that the index.php had in WordPress 2.9.

Open loop.php in your favourite text editor and find the following code which starts on line 138:

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

One small snippet of code needs adding to the above, which will display a Featured Image if one is selected. If there isn’t one then nothing will be displayed, simple as that!

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

You amend the numbers to change the Height and Width of the thumbnail

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

Now after you have saved loop.php, refresh your blog and you will now see a Post Thumbnail assigned to each of your posts.

If you are having any issues with following this tutorial, please leave me a comment and I will assist promptly!

47 Comments

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

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

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

    • 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

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

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

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

  7. Hi,

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

    Thanks

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

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

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

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

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

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

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

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

  16. 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 (:

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

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

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

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

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

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

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

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

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

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *