Implement 2.9’s thumbnail feature in your WordPress-Powered Portfolio

Published on

WordPress 2.9 was unleashed upon the world last evening with a pile of killer features (image editing, anyone?).  Perhaps my favorite new feature is built-in support for thumbnails associated with a page or post.

When I discussed building WordPress-Powered Portfolios earlier this year at WordCamp Portland, you may recall my rather obtuse solution for supporting thumbnails. Basically, you were required to upload an image, copy its filename, close the media browser, create a new custom field called “tn,” and paste the filename into it.

No longer!

With support in your theme for 2.9’s post thumbnails, simply upload an image and assign it as the thumbnail with a single click (or through the handy new “Page Image” box in the lower-right corner). No custom fields to mess with, no copying and pasting filenames.

Implementing this feature in a portfolio already using my WordCamp functions is a three-step process.

  1. Tell WordPress that the feature is supported by adding add_theme_support('post-thumbnails'); somewhere in your theme's functions.php file.
  2. Log in to WordPress and assign each of your portfolio items an image. If you've already used the "Upload/Insert" tool to add them prior to 2.9, just click the "Add an Image" button, then "Gallery," "Show" the image you want to use and click the "Use as thumbnail" link toward the bottom.
  3. Adjust your functions to support the new feature. Refer to my updated list_work function snippet as an example.

Your mileage may vary depending on the volume of portfolio items you’ll need to switch over, but it took me roughly an hour to support the feature on this very site.

I recommend reading Justin Tadlock’s excellent blog post on the subject, which details the post thumbnails in much greater detail than WordPress’ documentation and was of great help to me in supporting them.

I do have one bit of extra theme development knowledge to bestow on other developers which I was unable to find elsewhere online. To echo only the URL of the thumbnail image file, use the following:

guid; ?>