Setting up Post Thumbnails in WordPress 3.0 with Twenty Ten

Post thumbnails are a really useful feature of the newer wordpress versions. The default wordpress 3.0 theme, “Twenty Ten” has support for post thumbnails but they are set up in an unusual way. The entire header image is designed to act as a post thumbnail and can be changed for every post. This article will show you how to change the post thumbnail size and display the thumbnail next to a post instead.

*Update: Post Thumbnails in WordPress 3.0.4

Start by creating a twenty ten child theme.

Then make a copy of header.php, single.php and loop.php from the twenty ten theme directory and paste them into your new child theme directory. WordPress will now load these theme files instead of the main parents ones inside the twenty ten directory.

Create a functions.php inside your child theme directory. Paste this code in:

Here I am setting my post thumbnail size to 100x100px, I am also adding another larger size to use on single post view.

Open header.php and find this code starting from line 56:

Replace it with this code:

This removes the default twenty ten post thumbnail feature of changing the entire header image.

Open loop-single.php, find this code around line 26:

Insert this code after:

Open loop.php, find around line 131:

Insert this code after:

This will add the post thumbnail to index, tag, category and search pages. There are other locations where the post thumbnail template tag must be added if you want it to show for different post formats etc.

You can style and position your post thumbnails by adding and editing css in your child theme’s css file. Here is an example:

And that is how you change the post thumbnails in the wordpress 3.0 twenty ten theme.

,

42 thoughts on “Setting up Post Thumbnails in WordPress 3.0 with Twenty Ten

  • David Cox says:

    Cheers Greg,
    I had a topic open on the WordPress forum for a week without a reply, as I was trying to over-ride the thumbnail size function in a child theme with the ‘after_setup_theme’ call, but as it was not a filter or action I could not ‘remove’ it.

    It was just not happening, and now I have just followed your code example for functions.php and it looks to be working now, you would think that a call to a function in ‘after_setup_theme’ would over-ride the ‘init’.

    David (happy now)

  • […] is the link to the article. This entry was posted in WordPress. Bookmark the permalink. ← A New […]

  • jjj2 says:

    Hi, I followed your tutorial.

    But I’m having a sligt problem, the thumbnail display on the blog pages are same size as the one display after clicking ‘Continue Reading’.
    Isn’t the thumbnail on blog pages should be smaller, when goes into detail page then only enlarge ?
    You can see my sample here. http://ecompsolts.com/demo/Btec1/?cat=5

    Can you help ? Thanks in advance.

  • Greg says:

    Hi,

    Make sure that you have defined the second image size correctly and you define which thumbnail you want to show, i.e pass the correct thumbnail size to the_post_thumbnail().

    Here is an alternative quick fix:

    Look at the blog page html and the detail page html, you will see the css classes on the thumbnail images will be different. You can make a quick rule to make your blog page thumbnails a certain size. See the results here: http://www.mindrecipes.com

  • jjj2 says:

    Hi Greg,

    Thanks for your reply.

    I managed to get it working with CSS by splitting out #content img.attachment-post-thumbnail & #content img.attachment-single-post-thumbnail .

    But I ran through your CSS, seems that you did not use this method to control the size of the thumbnail. But instead you are using the functions.php.

    Here is my functions.php code :

    But it seems that it’s not working, I used firebug to check on the generated code, the size of the generated thumbnail is correct, but it’s showing the full image size.

    You can see it here : http://ecompsolts.com/demo/Btec1/?cat=3

    Thanks for your time again.

  • […] It’s a framework for starting a great WordPress-powered project. Greg Freeman in his article Setting up Post Thumbnails in WordPress 3.0 with Twenty Ten showed how to deal with custom header images breaking post/entries thumbnails. In his approach, you […]

  • jjj2 says:

    Thanks Greg,

    I found the solution :

    I disabled the img width CSS which previously set as “auto” by default in Twenty Ten theme.

  • Peter says:

    I don’t get it, I created a functions.php file copying and pasting your code, and the code now appears at the top of all my pages, admin panel and public view…

  • Peter says:

    Hey I REALLY needed this help. I’m very new to wordpress and this is exactly the info I needed.

    Thank you for all your effort in making this info available and very easy to follow

  • Gouri says:

    OMG! such a lengthy process to get a small thumbnail… Does this work with the post teaser plugin? Thanks for the great work.

  • […] van de standaard thumbnail functionaliteit aan Twentyten met een kindthema van Greg Freeman vind je hier. […]

  • Zeaks says:

    Thanks for the tutorial, it’s helped me alot. I have a question. I want to keep using the featured image as the header image , or at least know how to enable it after using this.

    I didn’t use the code for the header, which had me confused why the header image from featured image thing wasn’t working anymore.

    I’ve narrowed it down to set_post_thumbnail_size( 100, 100, true ); causing the featured image not to show as the header image, but if I remove that line, it makes the images on my page too large.

    I’m using this with a grid style layout here http://test.zeaks.org/?page_id=4166 usually I don’t care for the header image from featured image thing, but for this theme I’d like to use it.
    Thanks for any help.

  • Ashley says:

    Maybe I am wicked dense but I got all this in, and still can’t get them to come up. Maybe I’m labeling them wrong in custom field? I’ve tried thumbnail, post-thumbnail, etc. Help?

  • Hank says:

    Thanks Greg! this really works – the only post online I might add that actually solves my thumbnail problem! thanks!

  • Aysseline says:

    Very usefull and simple explaination,thanks Greg!
    Just an info: in Tweetytn v1.2 files are different you don’t need to copy single.php but loop-single.php and make the change you write about around line 33.
    And you can maybe improve this with a default image for the two format with the has_post_thumbnail function like here http://codex.wordpress.org/Function_Reference/has_post_thumbnail.

    And also you can use add_image_size in function.php to add different format in other part of your theme and call them the_post_thumbnail( ‘myother-post-thumbnail-size’

    • Greg says:

      Thanks for your comment, I have already updated this code for my own personal use which already utilize your suggestions, I will get this blog post updated soon. Thanks!

      • James Mac says:

        thanks, great post, only one relevant for the updated twenty ten

        Anticipating the update. As I struggling with concept.
        Pls can I ask ( feel stupid)
        set_post_thumbnail( ‘myother-post-thumbnail-size’,100,100,true);

        what is the ‘myother-post-thumbnail-size’ referenceing? a category, and how can i implement it?

        thanks you. much appreciation

        • James Mac says:

          thanks figured it out

          add_action( ‘init’, ‘mytheme_setup’ );
          function mytheme_setup() {
          set_post_thumbnail_size( 282, 142, true );
          add_image_size( ‘featured’, 577, 142, true );

          }

          and in the loop

  • Mathieu says:

    Hello,
    In functions.php, i do remplace mytheme_setup by the name of my child theme ?
    My child theme name is twentytenchild, i do twentychild_setup ?
    Thanks a lot !

  • Christel says:

    Hi,

    Thank you for the tip. I amended all the child theme templates as described but it does not display a thumbnail in search result or archive. Am I overseeing something ?

    Thanks in advance !

  • I couldn’t get it to work with TwentyTen Theme and WordPress 3.0.4. The problem was that it showed big images instead of thumbnails.
    After some research if found that in loop.php you have to be a bit more specific. Type

    the_post_thumbnail('thumbnail')

    instead of

    the_post_thumbnail()

    as stated in your example. For a thorough guide on the_post_thumbnail, I went here:
    best regards / Andreas

  • Greg says:

    Here is a small update post, I have attached a basic child theme of twenty ten that has everything in this post set-up. http://www.gregfreeman.io/2011/post-thumbnails-in-wordpress-3-0-4/

  • Patrick McAllaster says:

    Hey, followed your instructions and I’m having some success. What I’m looking to do is a bit different.

    I only want thumbnails on my categories pages, not on the blog page. Any way to do this? Also, as is, the thumbnails showing on my categories pages aren’t resizing.

    • Patrick McAllaster says:

      I take it back. My posts are showing featured posts and post images within the posts…

    • ShakyShane says:

      Hey there,

      If you are trying to access the thumbnails for sub-pages and posts (say you want to list all sub-categories and show their thumbnails) you can use a technique I use when developing category pages for people.

      Inside your current page loop, do this.

      $aChildren = get_children(array (‘post_parent’ => $post->ID)); //fetch the children of this post only!

      foreach ($aChildren as $oChildObjects){

      $sThumbnailPath = $oChildObjects->guid;
      echo “”;
      echo “”;
      }

      not tested, but this should display all sub-page thumbnails, you can of course add more info like the page/post title, links etc.

      Good luck

  • hi! How can i add an thumbnail with a plugin and get using the_post_thumbnail() ?

  • […] a lifetime of playing around with the loop.php and my functions.php I found an excellent tutorial here by Greg […]

  • Mike says:

    I have followed this and have the thumbnail size on my single post as I want 150 x 50 but I also want the thumbnail on the category-list page which shows all the posts from the category. At the moment they appear as 100x 50 …so I have looked in the media settings and there is no thumbnail set at 100x 50 ..all are 150 x 50 .. I set the post thumbnail size in the functions.php as above as 150×50 .. so WHERE do I change this 100×50 so that the thumbnail appears as I want ?? Thank you anybody

  • Mike says:

    Following on I have added two new posts and both of those show the thumbnail as 150x 50 but the previous 5 still show the thumbnail as 100×50 , despite the media library showing ALL images are 150×100 ..I even deleted one of the older posts and reinstalled from fresh and STILL the featured inage thumbnail shows as 100×50 on that post ..I am at a loss to understand this ..how can the loop run and show two different sized featured image thumbnails ?? Thanks for any simple explanation

  • Konstantin says:

    Greg, thank you so much for this article! Works perfect for me.

    Russia loves wordpress and twenty ten too 😉

  • Greg says:

    I’ll update this post for wp 3.1 this week.

  • ket says:

    Thanks. It works great on my site.

  • Nadeem says:

    Worked like a BOMB! I’m using WP 3.1.3 took me 3days to finally put this one to bed from downgrading to upgrading to this fixing, replacing etc… Great work around u saved my sanity!

  • هادی خسروجردی ( hadi khosrojerdi) says:

    hey Greg ! thanks for your article 🙂 . but i have a problem to thumbnail, the thumbnail not working in search template file 🙁

    get_post_thumbnail_id( $post->ID ) = null

  • هادی خسروجردی ( hadi khosrojerdi) says:

    The problem was solved … 🙂
    Thumbnail was not defined for posts. … 😉

  • Alexandra says:

    Thanks alot!!

  • Fred says:

    I followed all the steps. It almost works, except one thing: the text of the excerpt isn’t wrapped around the image, i.e. the image is does not align or float left (don’t know the difference between float and algin also, but this shouldt be the problem). Hence, the image is above the text of the excerpt and not left of it: I want to have the excerpt text starting right of the picture.

    any solutions?

    furthermore I found another blog post regarding this:
    http://wpshed.com/wordpress-how-to-add-post-thumbnails-next-to-post-excerpt/#comment-6370

    I have basic html and css knowledge but I’m not a coder, does it matter which solution one applies?

  • FredW says:

    Great post!

    However, I get the featured image/thumbnail above the text. I want to have it left: float left is not working i.e. the text is not wrapping around the image. Anyone has a solution?

Leave a Reply to Mathieu Cancel reply

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