First, you need to decide what resolution you want your thumbnails to be. For this tutorial, we will be using what we use here on WP Vibe, which is 150px by 150px.

Step 1: Create Your Custom Thumbnail Image

What we do here is we build a separate image that is 150×150 and upload to the specific post. Then we grab the link URL of the thumbnail image you just uploaded and copy it.

Then close out of that box and head back to the post. We have a custom field called “thumb” which we use, but you can use whatever value you want.

Paste that link into the custom field as the value, such as below:

Next, the actual code to make the magic work.

Step 2: Integrate the Code

First, we check to see if the user has input anything into the “thumb” custom field for the post, which would be pointing to the thumbnail image.

[sourcecode lang="php"]<?php
$thumb = get_post_meta($post->ID, "thumb", true);
if ($thumb != "") { ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" rel="nofollow">
<img src="<?php $values = get_post_custom_values("thumb"); echo $values[0]; ?>" alt="<?php the_title(); ?>" class="alignleft" /></a>
<?php
the_excerpt();
?>[/sourcecode]

Second, if the “thumb” field is empty, we run a loop to go through a specified folder of images for our categories.

[sourcecode lang="php"]<?php
$newthumb = "news.png";
$category = get_the_category();
$catid = $category[0]->category_nicename;
$okCats = array( ‘news’, ‘interviews’, ‘resources’, ‘reviews’ ); //Maybe even filter this so it can be extended
if ( in_array($catid, $okCats) ) {
$newthumb = strtolower($catid) . ‘.png’;
}
?>[/sourcecode]

The first bit of code, $newthumb = “news.png”; is to set a default thumbnail, in case you have a category that doesn’t have a specific thumbnail. Next, we grab the current category for the post. Next, we naturalize the name so it’s all lowercase and easy for the server to process.

Next, we build the array of categories that we have. For us, we have “news”, “interviews”, “resources”, etc etc.

We have images made for each category so that it knows what to display for that category.

If an image doesn’t exist for one of the categories, it will go bac and use the default news.png which we previously specified. Now, to actually use the thumbnail link which was just built.

Step 3: Building the Thumbnail Link

Here is the PHP code which actually displays the image now for each category.

[sourcecode lang="php"] <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" rel="nofollow">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/thumbs/<?php echo $newthumb; ?>" alt="<?php the_title(); ?>" class="alignleft" /></a>[/sourcecode]

All the Code Together
Here is what everything looks like together.

[sourcecode lang="php"]<?php
$thumb = get_post_meta($post->ID, "thumb", true);

if ($thumb != "") { ?>

<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" rel="nofollow">
<img src="<?php $values = get_post_custom_values("thumb"); echo $values[0]; ?>" alt="<?php the_title(); ?>" class="alignleft" /></a>
<?php
the_excerpt();
} else {
$newthumb = "news.png";
$category = get_the_category();
$catid = $category[0]->category_nicename;
$okCats = array( ‘news’, ‘interviews’, ‘resources’, ‘reviews’ ); //Maybe even filter this so it can be extended
if ( in_array($catid, $okCats) ) {
$newthumb = strtolower($catid) . ‘.png’;
}

?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" rel="nofollow">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/thumbs/<?php echo $newthumb; ?>" alt="<?php the_title(); ?>" class="alignleft" /></a>
<?php the_excerpt(); } ?>[/sourcecode]

In the end, you have a way of ensuring you always have a thumbnail appropriate to the post category, and the option to customize per post

Any comments or suggestions, please feel free to leave them in the comments.