WordPress Post Thumbnails

You’ve probably used, or created a theme at some point or another that utilized a custom field post image hack.  Essentially, the point was to give each post its own thumbnail that adds a splash of color, and information to the actual post.  A wonderful example of this feature is this post.  With the release of 2.9, there is now a built-in function for using post thumbnails that works a lot nicer than the custom fields we used to use.  Throughout this post I’ll show you how to use this new feature, and how to degrade it for users with older versions of WordPress.

Anyway, now I’ll show you how to actually use this feature in your WordPress themes.

1. Activate

For some reason, the WordPress guys decided to not make the post thumbnail post automatically show up in the “Write Post” page.  You have to activate it via a line of code in your functions.php file.

So just open up functions.php in your favorite text editor, or create a blank file if it doesn’t exist already.  Add the following snippet somewhere in the file, making sure it is within the php start and end tags.

add_theme_support('post-thumbnails');

Now, there should be a box labeled post-thumbnail in the editor.  But if you want to be backwards compatible, use an if statement so versions of WordPress below 2.9 won’t get screwed up by this function.

if ( function_exists( 'add_theme_support' ) ) add_theme_support( 'post-thumbnails' );

2. Display the Post Thumbnail in Your Theme

Now that you’ve gotten the feature activated and available for use, you need to add it to your theme somewhere.

Add the following code somewhere in the Loop

<?php the_post_thumbnail(); ?>

When you upload an image via the post-thumbnail feature it gives you several default size options.

The above code is essentially

<?php the_post_thumbnail('thumbnail'); ?>

But you can use different size such as

<?php the_post_thumbnail('full'); ?>

To display the full image.

<?php the_post_thumbnail(medium'); ?>

For medium sized images.

<?php the_post_thumbnail('large'); ?>

For large images.

These all output a generic img tag with a class of wp-post-image.

You can use this hook to apply styling to the image.

It is also possible to add a custom class to the outputted image, or customize the thumbnail size.

<?php the_post_thumbnail(array( 175,175), array( 'class' => 'alignleft' )); ?>

3. Check if the Post has a Thumbnail

If for whatever reason you need to check if the post actually has a thumbnail, use the following function -

<?php
	if ( has_post_thumbnail() )
		the_post_thumbnail( 'thumbnail' );
	else
		echo '<img src="default-image.png" alt="Example Image" title="Example" />';
?>

4. Make it Backwards Compatible

WPRecipes wrote a post on how to make the WordPress 2.9 post thumbnail feature degrade.  Here’s the code.  It just checks to see it the post thumbnail function exists.  If it does not, it serves up code for a post thumbnail that’ll work in older versions of WordPress.  This is useful for people that don’t want to go through all of their older post images and change them to be compatible with this new feature.

<?php
	if (  (function_exists('has_post_image')) && (has_post_image())  ) {
		the_post_image('thumbnail');
	} else {
		$postimageurl = get_post_meta($post->ID, 'post-image', true);
		if ($postimageurl) {
			echo '<img src="'.$postimageurl.'" alt="" />';
		}
	}
?>

5. Using the Post-Thumbnail Box

How many of you have used the media upload in the WordPress Editor before?

I know that for me, this was one of the first times.  Us hardcore web designers are too cool to use built in tools like “media uploads” when we have our fancy FTP software to do it ourselves, right? Right?

Well, while it may seem unusual and scary, you will be forced to venture into the unknown area of the media upload when using the post thumbnail function.  By the way, I hope I’m not the only one that just noticed that button a few minutes ago, otherwise I’ll sound like a jerk.

Anyway, you have the post thumbnail activated, and you also have it actually inserted into the theme.  The only thing left to do is upload and image and test this baby out.  Just click the “Set thumbnail” link, and up comes the media upload window.  I’m sure you can figure out how to upload your image, and then all you have to do is select “use as thumbnail”.  It’s really that easy.

That’s A Wrap

Well, hopefully you learned something about one of the newer, and more useful WordPress features.  Remember to leave a comment with questions and constructive criticism relating to this post.  And have fun with your new fancy post images, I bet all your friends will be jealous.