WordPress Post Thumbnails

Thumbnails can really liven up an otherwise plain list of posts, and add a bit of visual interest. By associating thumbnails with posts you gain a lot of flexibility that you would not have if you just relied on images in post excerpts. This allows you to have more compact listings in archives, yet be a little more visual. (The only disadvantage is you can’t show the thumbnails in WordPress RSS feeds.)

First, a few examples of good use of post thumbnails:

Smashing Magazine

NETTUTS

Fantasy Folder

Pro Blog Design

Webmonkey

North X East

Now, how do you set up thumbnails for yourself? You could use the full-featured WP Post Thumbnail plugin, which is a drop-in solution with plenty of time-saving features to take advantage of. It allows up to three thumbnails of different sizes to be assigned to a post. You can crop images after uploading them from the Write screen.

But that wouldn’t be any fun, would it? Wouldn’t you rather crop your thumbnails down in your graphics software and upload them to the server manually, then just paste the image URL into a field on the Write screen?

Okay, it’s settled then. This will involve a little bit of PHP magic and a feature of WordPress called Custom Fields. Isn’t DIY fun?

Before we get dirty playing with templates and whatnot, pick a key to use. This is the name of the custom field that holds the thumbnail URL. This could be “thumbnail,” “image,” or whatever you want. For the rest of this tutorial, I will use “image.”

Next, add something along the lines of this to your template, in any spot where you want a thumbnail to appear:

<?php $postimageurl = get_post_meta($post->ID, 'image', true); if ($postimageurl) { ?>
<div class="postimage"><img src="<?php echo $postimageurl; ?>" alt="" width="115" height="115" /></div>
<?php } ?>

Note that the code must be inside The Loop wherever you put it. Replace the bold “image” with the custom field key that you chose. Also, set the image width and height to whatever size of thumbnail you intend to use.

Now you can add a thumbnail to any post simply by adding a custom field with a key of ” to the post.

Simple enough? You can just use WordPress’s handy media uploader tool, right from the Write screen, to upload your image and get a URL to paste into the Custom Fields box.

If you want to make it even simpler, if you have a multi-author blog with some less than knowledgeable authors, for example, you can add an extra “Thumbnail” box to the Write page, which would accept an image URL and store it in a custom field behind the scenes. (If you really want to get fancy, you could probably hook right into the Uploader.) Just follow this tutorial: Creating Custom Write Panels in WordPress.