Category Thumbnails or Post Thumbnails?

First thing you need to do is decide whether you want your site to show category thumbnail images or post thumbnails. I have written a post on how to show post excerpts with thumbnail images using custom fields if you would rather do this. I quickly go over how to use WordPress excerpts below, but here is a more detailed explanation of using excerpts if you need it.

If you have decided to set specific images to show based on each category you have set up, here's what you have to do.

Step 1. Define your images

You have your categories all set up, and now you just need an image for each. The images should all be the same size dimensions, and the same file type (.jpg, .png, .gif etc.), and all in the same directory on your server. I would suggest making a categories/cat folder in your images folder of your theme. The best thing to do would be to name each image the same exact name as its corresponding category, case does not matter.
* Method 2 requires the images to be named based on their categories..

Upload your images to the path you have chosen for them on your server.

Step 2. Using the_excerpt()

Open your index.php file of your theme and find this line:

<?php the_content(); ?>
OR
<?php the_excerpt(); ?>

Depending on your theme, whichever one of these functions are used, they may have the text 'Read the rest of this entry »' between the parenthesis, or something like that.

You will want it to use the_excerpt() function either way, text or not, so change it from the_content() if it says that.

Before or after this line is where you will add one of the codes below. You can wrap this all in a div, and style it however you want if you choose to. I tend to add a div around the_excerpt() and float it left or right with a specific width smaller than the post area, making the thumbnail show beside it. That's all up to you.

Step 3. Show the category thumbnails

Each method below must be coupled with the_excerpt() / the_content() however you decided to do it in the end, otherwise it will not work, unless you know what you're doing exactly of course.

Method 1: Using Conditional Statements

Create an if/else conditional statement, and show a specified image for each category. This method allows for customization of your image names and location of them online.

<?php
if (is_category('CATEGORY1') ) {
	echo '<img src="images/CAT1.jpg" alt="CAT1" />';
} elseif (is_category('CATEGORY2') ) {
	echo '<img src="images/CAT2.jpg" alt="CAT2" />';
} elseif (is_category('CATEGORY3') ) {
echo '<img src="images/CAT3.jpg" alt="CAT3" />';
} else {
	echo '<img src="images/DEFAULT.jpg" alt="DEFAULT" />';
}
?>

Notice at the end of the if/elseif there is an else that echos a default image. This is in case the category did not match what you check for in your if statement. Good if you happen to create a new category for a post, and have not edited the if statement to include it.

Method 2.5?: Create a foreach() Loop

This is how I would do it, and personally recommend using this method. It may not be as flexible because it requires a set directory and use of category names or ID numbers depending what you choose. Though, you could modify it using something like above, if you choose. I don't see the harm in using this as is though.

<?php
foreach( ( get_the_category() ) as $category ) {
    // what goes here is up to you...
}
?>

So this will loop through the categories using foreach() along with get_the_category() as the variable $category. Confused yet?

In the loop, you can choose to do either of these:

a less confusing way...

$catthumb = $category->cat_name;

and after the loop you would use this:

<img src="<?php bloginfo('template_directory'); ?>/images/cat/<?php echo $catthumb; ?>.png" alt="<?php echo $catthumb; ?>" />

The above way is recommended if you are not very familiar with Php.

or somewhat more confusing...

echo '<img src="' . bloginfo("template_directory") . '/images/cat/' . $category->cat_name . '.png" alt="' . $category->cat_name . '" />';

Step 4. Wait, what now?

Ok so that last one got a little confusing? There's also more you should know about too, that opens up more options for you to decide on, and confuse you. Therein lies the .5 of the 2nd method. The way you choose to do your foreach() is based on your choice, or knowledge of Php. So I wanted to give you a simple and a less-simple example.

The Full 2 Halves Separated

<?php
foreach( ( get_the_category() ) as $category ) {
	$catthumb = $category->cat_name;
}
?>
<img src="<?php bloginfo('template_directory'); ?>/images/cat/<?php echo $catthumb; ?>.png" alt="<?php echo $catthumb; ?>" />

<?php
foreach( ( get_the_category() ) as $category ) {
    echo '<img src="' . get_bloginfo("template_directory") .'/images/cat/' . $category->cat_name . '.png" alt="' . $category->cat_name . '" />';
}
?>

Both of these examples use a directory called 'cats' in the images directory of your theme which will store the category thumbnails, and I have set the file type of my images to .png. The images must use the same names as your categories.

In 2.1 we set a variable $catthumb which holds the value of the $category->cat_name, or in other words, get_the_category($category->cat_name). Then we show the image by echoing $catthumb where the image name should show, and as the 'alt' text, for SEO.

In 2.2 we do basically the same as in 2.1, except we echo out the entire image using the $category->cat_name in place of the $catthumb variable used in 2.1. This was set using the same thing though, so it's just removing one step to get the same result. Be careful using this way because it can be easy to make mistakes with the single/double quotes in concatenating.

Other options? In these examples ere I use $category->cat_name, to show the category name. You could choose however, to use the category ID for instance. Here are all of the category member variables, which you can use to show more category information:

cat_ID - $category->cat_ID
the category id (also stored as 'term_id')

cat_name - $category->cat_name
the category name (also stored as 'name')

category_nicename - $category->category_nicename
a slug generated from the category name (also stored as 'slug')

category_description - $category->category_description
the category description (also stored as 'description')

category_parent - $category->category_parent
the category id of the current category's parent. '0' for no parents. (also stored as 'parent')

category_count - $category->category_count
the number of uses of this category (also stored as 'count')

For more information on this and other things related to categories refer to the_category() function and get_the_category() function in the WordPress Codex Function Reference section.

The examples below are for those who want to go further beyond what I went over above. * This is intended for the more Php savvy coders. *

If you are looking for something you could add to your functions.php file for showing category thumbnails, or even possibly for a WordPress plugin you are developing, you might be interested in one of these options.

Click the headings to show/hide the examples.

2.3 Much Harder and More Advanced

<?php
// Generate correct post-image links
function postImage(){
	$custom_field = get_post_custom_values("post_thumb");
	$imguri = $custom_field[0]; // Get first result of Post-image field
	$offsite = preg_match("/http:///", $imguri); // Check for "http://"
	$longurl = preg_match("/wp-content/", $imguri); // Check for "wp-content"

	// Create an array for the categories
	$categories = array(
		'wordpress',
		'design',
		'jquery'
	);
	// Define the image for each category, uploaded using the WordPress image uploader
	$category['wordpress'] = 'wp-content/uploads/wordpressthumb.png';
	$category['design'] = 'wp-content/uploads/designthumb.png';
	$category['jquery'] = 'wp-content/uploads/jquerythumb.png';

	// In one of our specified categories
	if (empty($custom_field) && in_category($categories)){// Custom Field is empty AND in our specified categories
		foreach((get_the_category()) as $post_cats){ // loop throught the post categories
			$rawr = array_search($post_cats->category_nicename, $categories); // compare the categories to our list
			$selected = $categories[$rawr]; // Get our success result
		}
		echo bloginfo('url')."/".$category[$selected];
	}

	// No thumbnail avaliable
	if (empty($custom_field) && !in_category($categories)){ // Custom Field is empty AND NOT in our specified categories
		echo bloginfo('template_directory')."/images/noimage.png";
	}

	// Hotlinked image from custom field
	if ($offsite == true) { // image starts with "http://"
		echo $imguri;
	}

	// Custom field with relative link like: "wp-content/uploads/example-image.jpg"
	if ($offsite == false && !empty($custom_field)) { // Custom Field is filled in but not a hotlinked image
		echo bloginfo('url')."/".$imguri;
	}

	// Custom field with relative link like: "example-image.jpg"
	if ($offsite == false && !empty($custom_field) && $longurl == false) { // Custom Field is filled in but not a hotlinked image
		echo bloginfo('url')."/wp-content/uploads/".$imguri;
	}
};
?>

That's not so easy peasy now is it?
What do ya say we make it a little more of a challenge?

2.4 Hardest and Even More Advanced

<?php
// Generate correct post-image links
function postImage(){
	$custom_field = get_post_custom_values("post_thumb"); // your custom field key (ex: post_thumb)
	$imguri = $custom_field[0]; // Get first result of Post-image field
	$offsite = preg_match("/http:\/\//", $imguri); // Check for "http://"
	$longurl = preg_match("/wp-content/", $imguri); // Check for "wp-content"

	/* Create an array for your categories where:
	- 'category ID #' => cat_name - 'category name' -  */
	$categories = array(
		'3' => 'wordpress',
		'2' => 'design',
		'0' => 'jquery',
		'1' => 'html5',
		'4' => 'css3'
	);
	// Define the categories thumbnail image, uploaded using the WordPress image uploader
	$category['wordpress'] = 'wp-content/uploads/wordpressthumb.jpg';
	$category['design'] = 'wp-content/uploads/designthumb.png';
	$category['jquery'] = 'wp-content/uploads/jquerythumb.png';
	$category['html5'] = 'wp-content/uploads/html5thumb.png';
	$category['css3'] = 'wp-content/uploads/css3thumb.png';

	// In one of our specified categories
	if (empty($custom_field) && in_category($categories)){// Custom Field is empty AND in our specified categories
		foreach((get_the_category()) as $post_cats){ // loop through the post categories
			$rawr .= ','.$post_cats->category_nicename; // Create comma separated array (CSA) of the Post's categories
		}
		$return = explode(',' , $rawr); // Explode the CSA into a true array
		$search = array_intersect($categories, $return); // Compare the arrays and create new array of matches
		foreach($search as $option){ // Loop though each match
			$key .= '|'.array_search($option, $categories); // Create CSA of keys from our hierarchy list
		}
		$result_keys = explode('|' , $key); // Explode Keys into true array
		$highest = max($result_keys); // Grab the key with the highest value
		$selected = $categories[$highest]; // Get our success result
		echo bloginfo('url')."/".$category[$selected]; // write the url
		return false; // Prevent further Ifs from running
	}

	// Post-image matches category
	if (!empty($custom_field) && in_array($imguri,$categories)){
		echo bloginfo('url')."/".$category[$imguri];
		return false;
	}

	// No thumbnail avaliable
	if (empty($custom_field) && !in_category($categories)){ // Custom Field is empty AND NOT in our specified categories
		echo bloginfo('template_directory')."/images/noimage.png";
		return false;
	}

	// Hotlinked image from custom field
	if ($offsite == true) { // image starts with "http://"
		echo $imguri;
		return false;
	}

	// Custom field with relative link like: "wp-content/uploads/example-image.jpg"
	if ($offsite == false && !empty($custom_field)) { // Custom Field is filled in but not a hotlinked image
		echo bloginfo('url')."/".$imguri;
		return false;
	}

	// Custom field with relative link like: "example-image.jpg"
	if ($offsite == false && !empty($custom_field) && $longurl == false) { // Custom Field is filled in but not a hotlinked image
		echo bloginfo('url')."/wp-content/uploads/".$imguri;
		return false;
	}
};
?>

Both functions were written by Fire-G and originally posted on Fire-Studios.com

Well, that about wraps it all up I think, right?

Bonus!

If you have decided after all that you'd rather just show the post thumbnail using custom fields, here is a snippet that I use.

2.5 Special Post Thumbnail Snippet

<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" rel="bookmark">
<?php $thumbnail = get_post_meta($post->ID, 'post_thumb', true); if ($thumbnail) { ?>
	<img src="<?php echo get_post_meta($post->ID, "post_thumb", true); ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" class="post_thumb" />
<?php }else { ?>
	<img src="<?php bloginfo('template_directory'); ?>/images/default.png"  alt="<?php the_title(); ?>" title="<?php the_title(); ?>" class="post_thumb" />
<?php } ?>
</a>

click to expand

Step 5. Questions?

Please be sure to let me know if you have questions, or maybe share another method of doing this if you know of any. I hope this helps you, and maybe taught you a little something, too.