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

3 thoughts on “Add a category image to a WordPress loop”

  1. Hi, I added images to all categories. Now I am trying to retrieve only the images in front-end. I can see that

    wp_list_categories

    retrieves all the category names but I need only the images of them. Do you have any idea to do that? Thank you.

    1. Hi Shahib! This tutorial is pretty out of date, so it may not be the best reference to use. What are you trying to accomplish as an endgame? Perhaps I can help steer you in the right direction!

  2. Thank you Ryan. My Goal is: “Retrieving all Category Images in Front-End.”

    As you know, Categories don’t have any option to upload any thumbnail or images. So I added a custom field (image-field) to every Category (using ACF) and added images to all categories. Now I am trying to show these category images on front-end.

    ACF gives a function called get_field(‘field_name_here’) but it won’t works. As I mentioned earlier, wp_list_categories gives me all the list of my categories but I just need the category images.

    For example, I have three categories called BMW, MERCEDES, ADIL and I have images for each categories. But when I m calling wp_list_categories as usual it retrieves “BMW, MERCEDES, ADIL” with appropriate permalink which is cool. But I just need to replace the “BMW, MERCEDES, ADIL” by their Images.

    Your blog is just awesome! -Thank Again.

Leave a Reply to Ryan Cancel reply

Your email address will not be published. Required fields are marked *