Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

How to Set A Fallback Featured Image Based on Post Category in WordPress

Last updated on by
Special WordPress Hosting offer for WPBeginner Readers
How to Set A Fallback Featured Image Based on Post Category in WordPress

Recently, one of our users asked us how they can set default fallback post thumbnail for specific categories in WordPress. In our previous tutorial, we showed how to set a default fallback image for WordPress post thumbnails tutorial. In this article, we will show you how to set default fallback featured image for specific categories in WordPress.

Displaying category images in WordPress when no post thumbnail is found

Note: This is an intermediate level tutorial that will require you to know HTML, CSS, and the basics of WordPress theme structure.

Scenario:

Let’s say you have a blog where you assign a single category to each of your post (check out our guide on Categories vs Tags). You can show a fallback image based on which category a post is assigned to.

It is particularly useful when you are often faced with situation when there is no featured image available for a post. Your branded image may not match the theme of the post, but if you are using a category specific image, then it will still look relevant.

Setting Category Images in WordPress without a Plugin

Previously on WPBeginner, we showed you to set category images in WordPress. However, for this tutorial you would need to set up category images manually without a plugin. Check out our Theme Cheat Sheet tutorial and beginner’s guide to pasting snippets in WordPress.

First thing you need to do is create images for your categories. Use category slug as your image file name and save them all in the same format, e.g. jpg or png.

Now the problem is that your WordPress theme may be using different image sizes in different templates. Like for example, you may have smaller post thumbnails on the archive pages and larger featured images on the single posts. We will let WordPress handle the re-sizing of images. To do that you need to upload your category images to your WordPress site from Media » Add New. During the upload, WordPress will store your category images, and create sizes defined by your theme and those under Settings » Media screen.

After uploading category images, you need to move them to a different directory. Connect to your website using an FTP client like Filezilla and go to /wp-content/uploads/ folder. The category images you uploaded will be stored in the month folder. Example: /uploads/2013/12/

Create a folder on your computer’s desktop and name it category-images. Now download all your category images and all the sizes WordPress created for them to this new folder on your desktop. Once the download is finished, you need to upload the category-images folder to your /wp-content/uploads directory. Doing this will allow you to have all your category image sizes in a separate folder which is easy to call into your theme.

Displaying Catagory Images in WordPress Templates

Before we move on to set these images as default fallback images, lets take a look at how you would display them in your themes. For example, you can display these images at the top of your category pages.

<?php 
if ( is_category() ) 

$thiscat = get_category(get_query_var('cat'),false); 

?>

<img class="category-thumb" src="<?php echo bloginfo('url'); ?>/wp-content/uploads/category-images/<?php echo $thiscat->slug ; ?>-50x50.jpg" alt="<?php echo $thiscat->name; ?>" />

This is how it appeared on our demo site’s category archive page.

Displaying a category icon image on category page

Displaying Category Image as Default Fallback Featured Image

Now we are going to show you how to display a category image as the default fallback featured image or post thumbnail when a post does not have its own featured image.

Note: Please backup your theme files before making any changes.

Inside your loop, where your theme is displaying the featured image or post thumbnail, replace it with this code:

<?php if ( has_post_thumbnail() ) : ?>

<div class="entry-thumbnail">
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
</div>

<?php else : 
$category = get_the_category(); 
?>
<div class="entry-thumbnail">
<a href="<?php the_permalink(); ?>"><img src="<?php bloginfo('url'); ?>/wp-content/uploads/category-images/<?php echo $category[0]->category_nicename ; ?>-150x150.jpg" alt="<?php the_title(); ?>" /></a>
</div>

<?php endif; ?>

This code looks for a post thumbnail. If it finds one, then it displays the post thumbnail. Otherwise, it looks for the category a post belongs to and then displays the category image. We have added -150×150 in the image file name because this is the post thumbnail size in our demo theme. Your theme may be using a different size for post thumbnails, so you need to use that size instead.

Please note that your theme may already have <?php if ( has_post_thumbnail() ) : ?> line and the next few lines that display post thumbnail. You can skip those lines if your theme already got them.

That’s all, we hope this article helped you add fallback featured image based on post category. For feedback and questions, please leave a comment below.


Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »

Comments

  1. tina says:

    Hello!
    Please show how the articles of the way they are displayed in the “MORE ON RIGHT NOW WPBEGINNER” above ?? a WordPress template
    Thank you

  2. David says:

    I turned off the organize posts by date month in settings/media, and changed url to reflect uploads directory specifically – that way I can avoid the extra step. I’m hoping this won’t cause issues with my host but it certainly makes life a little easier for me. Thank you so much for sharing this info, I have been searching for a looooong time and it’s finally how I want it :)

  3. Rashid khan says:

    hello,,, i want to add dynamic image on my wordpress home page. where al ready 5 images are set on differnet location..
    i just want to replace them and add new photo by post and catorrries…
    please help me
    i tried but no success
    i used post by thumbian function

  4. Richard Stewart says:

    This is great, but I failed miserably trying to implement Displaying Category Image as Default Fallback Featured Image in my classifieds theme. It uses different categories from the ‘stock’ posts categories and the author refuses to help.

    Do you offer any technical services, paid or otherwise, where you can help me implement Displaying Category Image as Default Fallback Featured Image into my theme?

  5. Matt Cromwell says:

    This is really awesome, a really useful tip in my case. Only issue is the first code above is incomplete. Luckily I didn’t need the “if” part, so I just pulled that out and all was well.

    Thanks for some pretty advanced tips on your “begginer’s” site. Keep it up!

  6. Damien Carbery says:

    Another idea could to set the post thumbnail when the post is saved. The advantage of the solution above is that the category thumbnail is easily changed.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.