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.

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 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.

To leave a comment please visit How to Set A Fallback Featured Image Based on Post Category in WordPress on WPBeginner.

via WPBeginner http://feeds.wpbeginner.com/~r/wpbeginner/~3/gAbsEXvmqaQ/

WordPress Hosting Tips