MENU


POPULAR POSTS


  • Submit News

  • FRIENDS

  • Adding Post Thumbnails To WordPress 3.0


    .

    Posted by Daniel in Wordpress on May 23rd, 2010 with 47 Comments

    add-post-thumbs-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!

    Sign up for 640-816 web designing training and become expert using self paced 70-647 study guides and 640-553 design tutorials prepared by top experts.



    Short url: Adding Post Thumbnails To WordPress 3.0 - http://bit.ly/Kmre9g

    Posted in Wordpress using the Tags: , , , , , , , , ,


    I love all things fantasy and you see that within in the content I produce for nenuno creative.

    See all posts by


    • Twitter
    • Design Bump
    • Web Blend
    • Facebook
    • Design Float
    • Reddit
    • Delicious
    • Stumble
    • Icon
    • Icon
    • Digg It
    • RSS

    Network Posts



    You can leave a response, or trackback from your own site,

    47 Responses to “Adding Post Thumbnails To WordPress 3.0”

    1. Slobodan says:

      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. Daniel says:

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

    3. David says:

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

    4. Daniel says:

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

    5. Veerle says:

      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. Daniel says:

      Glad to help Veerle!

    7. Jennifer R says:

      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

      • Chris says:

        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. Brian says:

      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. mike says:

      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. marcia says:

      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

    12. yuraz says:

      Hi,

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

      Thanks

    13. Michelle says:

      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. Rico says:

      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

    17. ddud says:

      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.

      • Daniel says:

        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!

        • ddud says:

          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?

          • Daniel says:

            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?

          • ddud says:

            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. redlex says:

      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. Kim says:

      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. battya says:

      thats helped a lot. thank you

    21. Dee says:

      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

    22. Chris says:

      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/

      • Chris says:

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

    23. knev says:

      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

      • Daniel says:
        <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>

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

    24. knev says:

      In index file, can i copy anywher ?

    25. rishant says:

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

    26. Jim says:

      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. WeCode says:

      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. Daniel says:

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

    29. michelle says:

      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. Ridhuan says:

      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. Jaki Levy says:

      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. Sonya Lynn says:

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

    33. flamedidea says:

      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. Mark says:

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

    Trackbacks


    Leave a Reply


     

    All content, such as illustrations, photos, resources and tutorials are copyright to their respective owners.

    nenuno creative is a trademark of nenuno design & development network and any content or resources originally created by nenuno can't be used without permission.