Easily add post thumbnails using native wordpress functionality in your theme

14 February 2010 comment icon12 | Categories: tips, wordpress

thumbsshot

We’ve been busy sprucing up our new wordpress theme for the relaunch of themesforge.com and finally got around to adding thumbnails functionality to our postss. Now I know there are many many different ways to do this, from dedicated plugins to using custom fields.

Well since WordPress 2.9 this is now an optional feature within wordpress itself which is great news for anyone looking to add this to their wordpress powered website. Hopefully it will mean that in the near future all wordpress themes will support this functionality. We will certainly be pushing for it’s adoption on all wordpress themes we see – and we’ll be keeping an eye out for it!

So what’s the skinny on it? Well it’s pretty simple to activate and it’s running on our blog now.

There are 2 excellent posts which give you the full lowdown and this new feature. The first is from WordPress Lead Developer, Mark Jaquith who provides the basics to get you up and running in a few minutes. The second is from Jason Tadlock who builds on Mark’s post and deals with some of the ways which you can stretch this new functionality if you wish to. So if you want to get the full lowdown and the showdown on this new wonderful feature be sure to check out those posts.

If you just want the absolute minimum to get you up and running with your new native wordpress post thumbnails functionality, these are the steps I took.

Step by Step Instructions for adding native wordpress post thumbnails functionality to your blog.

Add the following code snippet to your functions.php file

[codesyntax lang=”php”]

/* switch on support for post thumbnails - WordPress 2.9 onwards */
if ( function_exists( 'add_theme_support' ) ) { // Added in 2.9
 add_theme_support( 'post-thumbnails' );
 set_post_thumbnail_size( 200, 200, true ); // Normal post thumbnails
 add_image_size( 'hp-post-thumbnail', 200, 200, true ); // Homepage thumbnail size
 add_image_size( 'single-post-thumbnail', 300, 9999 ); // Permalink thumbnail size
}

[/codesyntax]

The code snippet above first checks to see if you’re using 2.9 or greater (and if you’re not why not?  get it now!). It then add support for post-thumbnails. The next line sets a default set for all thumbnails to be 200*200 pixels. You can adjust this to your liking. The next line then declares a specific value for homepage thumbnails – again 200*200 but this time with the additional value of true which will hard crop whatever image you upload to be 200*200 which is great for uniformity on your homepage but may lead to some images cutting off in a manner you don’t like. It’s worth experimenting – it works just fine for us. The last line declares a different thumbnail size for our permalink post pages of 300*9999 which will mean we get a nicely proportioned thumbnails which are a bit bigger and width a variable height on the permalink page.

Then we move on to your index.php file in your theme. Within your posts loop find a place where you would like to display your thumbnail and add the following code snippet:

[codesyntax lang=”php”]

          <?php if ( function_exists( 'add_theme_support' ) ) : ?>
		  <?php if ( has_post_thumbnail() ) : ?>
			<div class="postthumb">
			<?php the_post_thumbnail( 'hp-post-thumbnail' ); ?>
            </div>
 			<?php endif; ?>
            <?php endif; ?>

[/codesyntax]

This code will first check to make sure you’re using wordpress 2.9 (special notice to all theme authors – make sure you add this line to your theme if you don’t want to break those still using legacy versions of wordpress!). It will then check to see if there is indeed a thumbnail for the current post. We then add a div around the call to the actual thumbnail (which we then have a sprinkle of CSS in our style.css file to float the image left in our post.)

[codesyntax lang=”css”]

.postthumb {
	float: left;
	width: auto;
	margin: 0 20px 10px 0;
}

[/codesyntax]

In your single.php file you will need to add a very similar snippet to what you added to index.php with one important difference – see if you notice what’s different:

[codesyntax lang=”php”]

<?php if ( function_exists( 'add_theme_support' ) ) : ?>
            <?php if ( has_post_thumbnail() ) : ?>
			<div class="postthumb">
            <?php the_post_thumbnail( 'single-post-thumbnail' ); ?>
            </div>
            <?php endif; ?>
            <?php endif; ?>

[/codesyntax]

Yes kids it’s the call to single-post-thumbnail instrad of hp-post-thumbnail.

Ok that’s the heavy lifting done in terms of your theme code.

Now jump into your post edit page in thew WordPress admin.

You will notice down the bottom right you now have a new option called “Post Thumbnail” which should look like this:

Go ahead and click on “Set Thumbnail” to open the image upload facility. Here’s the really important bit – once you’ve uploaded your image don’t click on “Insert into post” option – click on “Use as thumbnail” option instead.

And you’re done!

It’s as simple as that. I hope you find this quick post useful. It’s great that this feature is now part of the wordpress core. Anyone looking to port across from the custom field method to this newer method should checkout the Get the Image plugin

– it rocks.

12 Responses to “Easily add post thumbnails using native wordpress functionality in your theme”

  1. Kate on 16 February 2010 at 5:22 pm said: Permalink

    Do you know if it’s possible to add multiple thumbnail images for one post with this new functionality? Thanks!

    • Ed on 16 February 2010 at 5:40 pm said: Permalink

      Hey Kate,

      No it won’t allow you to do multiple thumbnails unfortunately. The idea is very much to have 1 thumbnail associated with 1 post.

      Perhaps a future release will allow multiple images hopefully!

  2. Morgan on 18 February 2010 at 9:46 pm said: Permalink

    Hi, I tried this out but ended up really distorting my home page layout. The layout used to show the entire post and all images, now you can only see a snippet of the post and no images. Do you know why this might have happened and how I can fix it?

    Thanks!

    • Ed on 18 February 2010 at 11:05 pm said: Permalink

      Hi Morgan,

      That’s really strange. The code above shouldn’t impact whether your blog shows the full post or just the excerpt. It sounds like you changed your wordpress loop in index.php to use “the_excerpt();” instead of “the_content();” which we don’t reference in this post. Perhaps you should take a look? The excerpt strips all formatting images and is designed to just be a lead in to the main post page. You might also be using a plugin to display the full content of your posts on your frontpage which may conflict with the new thumbnail functionality.

      Hope this helps you out.
      Ed

      • Morgan on 18 February 2010 at 11:31 pm said: Permalink

        Hi Ed, I’m making your update suggestions right now (I did type ‘excerpt’ and not ‘content’ in the index.php modification!) thank you SO much!

        On another note, where can I put this coding if I want the thumbnails to show up on a newly created page (and not the index page?) is that possible? My goal is to create a Tutorials page with small thumbnails that link out to their larger posts when clicked.

        Any suggestions? Thanks Ed.
        Morgan

        • Ed on 19 February 2010 at 12:37 am said: Permalink

          Glad to help Morgan :)

          About your other query – I’m not sure it’s possible to use this code to achieve what you want to do. This code works on the basis of one thumbnail per post. What you’re talking about sounds like you need a gallery style plugin to allow you to have multiple thumbnails on a single page – something like Nextgen might work for you – http://wordpress.org/extend/plugins/nextgen-gallery/

          • Morgan on 19 February 2010 at 1:30 am said: Permalink

            Thanks, Ed :). I’ve tried the nextgen gallery plugin in the past but was unable to get the thumbnails to link back to a full post (and not the picture url). Are you familiar with the program?

            • Ed on 23 February 2010 at 9:35 am said: Permalink

              Hi Morgan,

              I was away for a few days so didn’t get a chance to respond before now. I’m am familiar with nextgen but I’ve never used it in the manner you wish to use it. I don’t know of a plugin that will allow you to do this. I find a lot of gallery plugins are quite limited.
              Ed

  3. pinky on 29 March 2010 at 8:12 pm said: Permalink

    Thanks for writing this as it was the necessary further explanation that I needed to get it working on my blog after reading Mark Jaquith’s article. I only wanted the thumbnails to show with any posts where I had written a manual excerpt. One question – I didn’t bother to add the code to the single.php file as I only want the thumbnails to display with excerpts and not the full posts; does that code only serve to display the same thumbnail images within posts? Thanks.

    • Ed on 29 March 2010 at 10:05 pm said: Permalink

      thanks for the comment pinky.

      I’ve not tried adding this code to a page template. I do note however that there is the option to set a thumbnail for a page too – I guess you could try adding it to your page template instead of the single.php file and test it out.

      It would be a useful feature for pages too.

  4. Stu on 7 November 2010 at 7:21 pm said: Permalink

    Hi, just wanted to say thanks for the tutorial. Worked perfectly after many unsuccessful attempts following other tutorials. I’ve included a link to this page on my website as a small thank you :D

  5. jhon on 15 January 2011 at 8:30 am said: Permalink

    nice thanks for sharing wonderful post.

    Here I have another tutorial on how to make your first image post to be a thumbnail automatically Without Custom field and Featured image and without taking your time editing cropping thumbnail of your post.

    Automatic WordPress Thumbnail Without Custom field and Featured image

Leave a Reply