Add a category image to a WordPress loop

I recently wrote an article on how to set a fallback image for featured images. Shortly after writing that I ran into a situation on my own site that required a slightly different solution. Instead of grabbing the first image from the post as a fallback, I wanted to set a fallback based on category. For example, if I have a post in my WordPress category that doesn’t have a featured image set, the WordPress logo will accompany the excerpt in the loop by default. I was able to accomplish in just a few short steps. I’ll show you how to add a category image to a WordPress loop.

Category Images

First, I had to create the images I wanted to use for my categories. I saved them all as JPG‘s with the category slug as the filename (e.g., wordpress.jpg for my WordPress category and web-development.jpg for the Web Development category). I then uploaded these to a new directory called cat-images in my theme’s images folder.

Calling Category Images in a Theme

Now the images are uploaded, but we still need to call them in our loop. If you are trying to insert them in your main blog feed you will probably find the loop in loop.php, home.php, front-page.php, or index.php.

First, let’s see if our post has a featured image set for it. If it does, let’s return it and be done with it:

<?php if (  (function_exists('has_post_thumbnail')) && (has_post_thumbnail())) : ?> //Check to see if a featured image is set
		<?php the_post_thumbnail('blog-thumb', array('class' => 'blog-thumb')); ?> //If so, let's return it

Then, if the post doesn’t have a post thumbnail associated, let’s grab the corresponding image we uploaded:

<?php else : //If there is no featured image set for the post do the following
?>
		<img class="cat-thumb" src="<?php echo get_template_directory_uri(); ?>/images/cat-images/<?php $category = get_the_category(); echo $category[0]->slug; ?>.jpg" /> <!-- Pull the corresponding image in your theme's /cat-images/ folder !-->

After that, we just have to close our if statement:

<?php endif; ?>

Now, let’s put it all together:

<?php if (  (function_exists('has_post_thumbnail')) && (has_post_thumbnail())) : ?> 

		<?php the_post_thumbnail('blog-thumb', array('class' => 'blog-thumb')); ?>

	<?php else :?>

		<img class="blog-thumb" src="<?php echo get_template_directory_uri(); ?>/images/cat-images/<?php $category = get_the_category(); echo $category[0]->slug; ?>.jpg" /> 

<?php endif; ?>

Variations

If you don’t want to use featured images in your loop, and instead just want to return the category image for all posts, you can strip out most of the code and just use the following:

<img class="blog-thumb" src="<?php echo get_template_directory_uri(); ?>/images/cat-images/<?php $category = get_the_category(); echo $category[0]->slug; ?>.jpg" />

Things to Watch For

If you see broken images shown in your loop, there is probably an incorrect path or filename somewhere. Make sure that the folder name in your theme’s directory matches the exact name and path as in your loop. Also, make sure the filenames of pictures are the exact category slugs (Pay attention to capitalization and file extensions).

Conclusion

Now, whenever you have a post with no featured image set, it will return the corresponding category image. Want an example? Just check out my main blog page. Have you done something similar, or have another way of doing this? Let me know!

References

WordPress Codex: has_post_thumbail
WordPress Codex: the_post_thumbnail