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


Fantasy Folder

Pro Blog Design


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.

  • nhoss2

    i love sites which use thumbnails, nettuts and smashing mag being my favourites.

  • http://www.webmaster-source.com Matt

    I know what you mean, nhoss2. I’m still trying to decide whether or not I should incorporate thumbnails into posts here, with the upcoming redesign. Not an easy decision…

  • nhoss2

    yea it would be pretty hard to come up with thumbs for each post.. but i love what dotsause.com does

  • http://stevenclark.com.au Steven Clark

    Tutorial: Create Custome Write Panels in WordPress. Looks like another way to skin that thumbnail cat, too, Matt. May be worth investigation. :)

  • amir

    Using thumbnail can reduce web space. But not too much because people find hard to read the text.

  • http://www.gossip123.com Haruyoshi

    Thumbernail, I try to but failed, I will try again after reading the nice article, :)

  • Pingback: Links Roundup November 3rd 2008

  • http://nyherald.com Steven

    Does anyone know how to aggregate RSS feeds so that it includes thumbnails?  I’ve seen it done but haven’t a clue on how to set it up on both the output and input side.

  • http://vinicius.soylocoporti.org.br Vinicius Massuchetto

    Hey man! Nice tip about the custom fields. I just suggest you to change your quotes that are being represented as the opened and closed ones, and not the plain ones we use in PHP programming. Maybe only changing the for the HTML code.


    • http://intensedebate.com/people/redwall_hp redwall_hp

      Oh, not again. WordPress has a nasty habit of changing the quotes on you…

  • John

    the plugin in doesn't work for me and its not showing up at all.

  • Pingback: A Web Developer’s Bookmarks « Hired Guns Creative

  • Pingback: A Web Developer’s Bookmarks « Hired Guns Creative

  • http://intensedebate.com/people/Mandawahoo Amanda Butterworth

    Worked great for me! Thanks :)

  • http://www.kks.ir/ hosein

    this method is difficult for general users! for who cannt work with HTML! i suggest we create field with browse for upload pic from hard disk to server, and use this as thumbnail.

  • http://caw.harvestinfotech.com Ammad Zafeer

    I tried to do everything you wrote in this post but it just doesnt seem to work. I dont know what i am doing wrong here but its not showing up at all. I know i have the write path and the custom field set in the post. Can you help me out? Thanks

  • Jones Lee

    Good post, however WP 2.9 now officially support post_thumbnail