Over the past few weeks I’ve been working on an update for my video-centric WordPress theme, Wave. It’s a bit overdue, but every time I sit down with it, I end up packing something new in that will definitely please my customers and will hopefully justify the wait. Since WordPress 2.9 was recently released, I decided to look into the new Post Thumbnails functionality and see if I could make use of it in my themes. At this point, there isn’t much in the way of documentation, so I thought I would share my findings and show how I’m using this new core feature in my themes.

Searching for Scraps of Information

Mark Jaquith, a lead developer on WordPress sheds some light on this new feature. He provides the necessary fundamentals and understanding required to get Post Thumbnails working in your theme. I later found this article, which goes into the more advanced uses.

Activating Post Thumbnails in Your Theme

Theme development differs from building a site on WP for yourself or a client, in that compatibility has to be maximized. Else you’ll find yourself with a whole pile of dissatisfied customers. In your theme’s functions.php, you can activate Post Thumbnails by adding the following…

[php]
if (function_exists(‘add_theme_support’)) {
add_theme_support(‘post-thumbnails’);
set_post_thumbnail_size(120, 90, true);
}
[/php]

I’m sure just about everything there is self explanatory. But just in case – the if statement checks to make sure that the site is running WP 2.9 or higher by seeing if the add_theme_support function is present. The numbers in set_post_thumbnail_size are the width and height of the image. While “true” activates hard crop mode. This means your image will be cropped either from the sides, or top and bottom in order to maintain the aspect ration and fit inside the dimensions you’ve stated. But wait, it gets better!

Additional Custom Sizes

You can state more than one “thumbnail” size to be created, which is perfect for themes that use more than one thumbnail. In short, this means that third party image processing scripts might be a thing of the past. You can create any number of custom thumbnail sizes quite easily…

[php]
if (function_exists(‘add_theme_support’)) {
add_theme_support(‘post-thumbnails’);
set_post_thumbnail_size(120, 90, true);
add_image_size(‘post-hero’, 480, 250, true);
}
[/php]

The downside, is that only images uploaded after this code is in place will be generated at the specified sizes. So it’s not exactly backwards compatible.

Retrieving Your Thumbnails

To get the thumbnail, simply drop the following template tag into the loop where you want it to be displayed.

[php]<?php the_post_thumbnail(); ?>[/php]

If you want to call one of your custom images, you can specify it’s name and do just that…

[php]<?php the_post_thumbnail(‘post-hero’); ?>[/php]

There are a number of inline variables you can use to custom the output of the image, which are outlined nicely in this article by Matthias Kretschmann.

Covering Your Ass

This is where things get a little complicated. Especially if you’re adding Post Thumbnails to an existing WP theme. You not only have to take into consideration, what version of WP is being used, but also if an older image processing script is in place – that needs to remain in tact for older posts that were created before WP 2.9.

In my themes, I have given the user the ability to disable dynamic image processing in the case that the server isn’t compatible. So this is another situation I have to account for.

And finally, if there is no image specified either as the Post Thumbnail, or the old custom field method, a placeholder image should be displayed. This is roughly how it looks in the latest version of Wave

[php]
<?php
// If WordPress 2.9 or above and a Post Thumbnail has been specified
if ((function_exists(‘has_post_thumbnail’)) && (has_post_thumbnail())) {
the_post_thumbnail(‘hero-thumbnail’, array(‘alt’ => ”.get_the_title().”));
}
// Or if a post image has been specified and dynamic image resizing via TimThumb is activate
else if (get_post_meta($post->ID, ‘post_image_value’, true) && $mb_resize == 0) {
$postimage = get_post_meta($post->ID, ‘post_image_value’, true);
echo ‘<img src="’.get_bloginfo(‘template_url’).’/thumb.php?src=’.$postimage.’&amp;w=480&amp;h=250&amp;zc=1&amp;q=95" alt="’.get_the_title().’" />’;
}
// Or if a post image has been specified and dynamic image resizing via TimThumb is disabled
else if (get_post_meta($post->ID, ‘post_image_value’, true) && $mb_resize == 1) {
$postimage = get_post_meta($post->ID, ‘post_image_value’, true);
echo ‘<img src="’.$postimage.’" alt="’.get_the_title().’" />’;
}
// Or if neither Post Thumbnail nor custom field post image have been specified
else {
echo ‘<img src="’.get_bloginfo(‘template_url’).’/images/placeholder-hero.jpg" alt="’.get_the_title().’" />’;
}
?>
[/php]

Here is a much simpler example which looks for a Post Thumbnail, then an image specified via a custom field called post_image_value. If neither are found, nothing would be displayed.

[php]
<?php
// If WordPress 2.9 or above and a Post Thumbnail has been specified
if ((function_exists(‘has_post_thumbnail’)) && (has_post_thumbnail())) {
the_post_thumbnail(‘hero-thumbnail’, array(‘class’ => ‘post-thumbnail’, ‘alt’ => ”.get_the_title().”));
}
// Or if a custom field post image has been specified
else if (get_post_meta($post->ID, ‘post_image_value’, true)) {
$postimage = get_post_meta($post->ID, ‘post_image_value’, true);
echo ‘<img src="’.$postimage.’" alt="’.get_the_title().’" class="post-thumbnail" />’;
}
?>
[/php]

And, that’s it!

It might look like a lot to take in, but I’ve already done all of the work for you. Simply change some attributes and variables, and you’ll have Post Thumbnails working in your theme in no time.

29 Comments

Wow, adding custom post sizes is a heck of a lot simpler now in comparison to the (dirty feeling) method I’ve used in the past (below), now we just need to work out a method of regenerating thumbnails/custom images for images in existing posts.

<pre>

if( FALSE === get_option("articlefull_size_w") ) {

add_option("articlefull_size_w", "400");

add_option("articlefull_size_h", "300");

add_option("articlefull_crop", "1");

add_option("articlethumb_size_w", "40");

add_option("articlethumb_size_h", "40");

add_option("articlethumb_crop", "1");

}

function additional_image_sizes( $sizes ) {

$sizes[] = "articlefull";

$sizes[] = "articlethumb";

return $sizes;

}

add_filter( ‘intermediate_image_sizes’, ‘additional_image_sizes’ );

</pre>

eww… probably a reason I don’t use it much.

now we just need to work out a method of regenerating thumbnails/custom images for images in existing posts

Indeed! You know someone will release a plugin to do just that sooner or later. *hint-hint*

There is this plugin called "Regenerate Thumbnails" that does it with just 1 click. I used it and it’s really cool!

BTW: Any idea if the_post_thumbnail can be used in a custom query? I’m having some trouble with that, the image just doesn’t show.

Never mind! I just forgot to use setup_postdata. My Archive page works like a charm now. 😉 Thanks for putting this tutorial together!

Great post!

Wanted to explore this feature since the release of WP 2.9 but was a little lazy until now. Guess I have no excuse any more and now have to sit my ass down and update my latest themes 🙂

It’s definitely not going to be a fun task, going back and retrofitting all themes. And I’m not entirely sure if I’m going to do so for all of my themes. I may just do my most popular themes, then include Post Thumbnails in all new themes moving forward.

Nice Matt, thanks for this. I kept meaning to investigate the new feature but I just haven’t had the chance. this saves me a job 😛

Just wanted to point this out:

else if (get_post_meta($post->ID, ‘post_image_value’, true)) {

$postimage = get_post_meta($post->ID, ‘post_image_value’, true);

if ($postimage) {

echo ”;

}

}

The second if statement is unnecessary/redundant since it’s checking the same thing.

Yeah, you’re right. I’ve removed the second if statement from both examples. Thanks for pointing that out.

thanks for this Brett, I am working on the new look for Inspiredology, and I wanted to use the Post Thumbnails, I currently have a custom field showing thumbnails, but this would help with the future versions, and help streamline everything of course…

thanks very much

Hi Matt,

are you going to update your great "Filthy" theme as well? I’m probably going to buy it but would be pissed if you release a newer version shortly after 🙂

However, if you’re not planning to update your theme I could do it. I just need a feedback so the work isn’t done twice.

Kind regards,

Olli

It’ll definitely get updated at some point. But I don’t have an ETA at the moment. Updates are free, if that’s what you’re worried about?

Oh, okay, seems like I missed that 🙂

I’ll try to implement the thumbnail function wihin the next two weeks and get back to you with the results.

Kind regards,

Olli

I’m a huge fan of your themes Matt, I couldn’t make up my mind about which one I like best, so I bought them all, lol.

You mentioned in your post that you were updating the Wave theme, any idea on when this will be finished? A rough estimate would be greatly appreciated!

Keep up the great work Matt!

Wow, really? Thanks for the support!

It’s actually just about ready to go out the door – I just need to update the documentation and prepare some new screenshots. But I’m also in the midst of arranging a partnership which will bring all sorts of new awesomeness to all of my themes. If that happens sooner than later, I’ll hold the update until the beginning of February and pack some more goodness into it.

I know I don’t do tons of videos on my site, but the Wave theme just looks so awesome, I find myself making up excuses to use it. So then I’ll use the theme for a few days, then feel guilty for not posting lots of videos, then I switch back to imperial usually, it’s just an endless cycle, sigh. A website torn between two themes, lol.

But anyhow I think it’s real nice of you to give original purchasers of the theme free updates, I appreciate that. That gives potential customers a lot more confidence in buying your themes, instead of waiting for the next update.

Looking forward to the update!

Hey Matt, I love the Wave theme and purchased it in October for an upcoming project. Awesome to hear an update is on it’s way! I can’t wait to see what goodies it will have. It’s actually a fairly big project and once it’s ‘successful’ I’ll want to hire you to customize it more-so.

In any case – love the Wave theme and all your other themes, and your quality of work and work-ethic. Look forward to the update.

Hmm – is there a way we’d get notified as a purchaser about an update? Does Themeforest look after that?

Thanks again,
Shawn

This is great, I just wish there was a way to add thumbs to existing posts and a way for users to crop images. We’ve been using Scissors, but it’s incompatible with WordPress 2.9.

Will you be updating your Black Aperture theme with this new post thumbnails feature in the near future? And one last question, will you be releasing a lighter version of Black Aperture, I saw on your flickr page screenshots of a light version, it looks great!

[…] in thumbnails in WordPress. Was looking around for some info when I found Matt Brett’s post Bulletproof Post Thumbnails in WordPress 2.9 which lays down the code pretty […]

[…] WordPress finally introduced a Post Thumbnail feature in version 2.9 which has made life quite a bit easier for WordPress theme developers that love to integrate thumbnails into their themes. There are many different ways to dress up post thumbnail images, but for this tutorial we are going focus on a simple 5 minute technique using CSS. If you haven’t already integrated post thumbnails into your WordPress theme, there are several detailed tutorials out there that show you how do to so. Here are two in particular that you may want to read by Justin Tadlock and Matt Brett. […]

[…] WordPress finally introduced a Post Thumbnail feature in version 2.9 which has made life quite a bit easier for WordPress theme developers that love to integrate thumbnails into their themes. There are many different ways to dress up post thumbnail images, but for this tutorial we are going focus on a simple 5 minute technique using CSS. If you haven’t already integrated post thumbnails into your WordPress theme, there are several detailed tutorials out there that show you how do to so. Here are two in particular that you may want to read by Justin Tadlock and Matt Brett. […]

Sweet write up, this helped me a ton and I had never heard of the function until reading it here. Going to try and implement it on a music section for my site. Thanks Matt!

Havent gotten around to my personal site yet, but I’ve been playing with it on some client work. Just wanted to say how great this function is, really opens up the door for some powerful and user-friendly WordPress sites.

[…] WordPress finally introduced a Post Thumbnail feature in version 2.9 which has made life quite a bit easier for WordPress theme developers that love to integrate thumbnails into their themes. There are many different ways to dress up post thumbnail images, but for this tutorial we are going focus on a simple 5 minute technique using CSS. If you haven’t already integrated post thumbnails into your WordPress theme, there are several detailed tutorials out there that show you how do to so. Here are two in particular that you may want to read by Justin Tadlock and Matt Brett. […]

[…] WordPress finally introduced a Post Thumbnail feature in version 2.9 which has made life quite a bit easier for WordPress theme developers that love to integrate thumbnails into their themes. There are many different ways to dress up post thumbnail images, but for this tutorial we are going focus on a simple 5 minute technique using CSS. If you haven’t already integrated post thumbnails into your WordPress theme, there are several detailed tutorials out there that show you how do to so. Here are two in particular that you may want to read by Justin Tadlock and Matt Brett. […]

Comments are automatically closed on articles over 5 years old.