How to Display Thumbnail Images to Categories in WordPress

A category is a great way to group Posts/Pages together according to their attributes.  By default, WordPress has four taxonomies. And Category is one of them.

Sometimes, our website looks much better if it has featured image appearing on different categories. I’m not talking in the back-end but where users can actually see the Category Thumbnails appearing on the front end. See the screenshot below. I am conferring about something like this.

In this article, we are going to learn how we can display Thumbnail images to Categories in WordPress using a Plugin. There are lots of other plugins which shows the images on our taxonomy but we will discuss on the particular one. That is Taxonomy Images plugin. We can also add our custom hook for taxonomy thumbnail images, but let’s go with simpler one. Shall we?

Display Thumbnail Images to Categories in WordPress

There’s an amazing plugin called Taxonomy Images which lets you set an individual image per category. You can even use thumbnails for Tags, Link Categories, or even Custom Taxonomies. That’s why I choose this one for our prior goal.

Getting Started

Step 1: Install and Activate The Plugin

To begin with, we need to install the plugin on our WordPress site. Login to your Dashboard. Now, go to Plugin – > New Plugins. Search for “Taxonomy Images” in the keyword field and after you see something like the below screenshot, hit the Install Now button. Then Activate the plugin and you are ready to roll in.

Step 2: Set up Taxonomy Images Plugin

Once, you have initiated the plugin, you will need to set up the plugin. From your Dashboard, go to Setting -> Taxonomy Images. There you will see the lists of all the taxonomies we have on our site.

Select the checkbox on the category, where you wish to display the thumbnail images. For the time being, I am going to tick the Categories Taxonomy. You can always change those settings. If you are confused which one to pick, simply select all. Don’t worry it won’t affect your website.

Step 3: Adding Category Thumbnail

After setting up the plugin, you can now upload images for the category. Now go to Posts-> Categories, you will see the new Image option appearing on the Category row.

Choose the Category, click on the Plus icon and upload your image. You will be seeing the screenshot as below. It’s as easy as counting numbers.

Step 4: Display Category Images on the front end

As this plugin is meant for developers, you will need to understand how it works and how it can be done. Just once click install doesn’t work here. We have added the thumbnail images for our taxonomy i.e. category. But the goal of this tutorial is to display those very featured categories on the front end.

It’s a little complex because it uses some custom filters to return the images. But the documentation is pretty good and you should be able to figure it out by yourself. You don’t need to panic.

To display Image Category, use the following code in your Page Template

$product_categories=  get_categories(array( 'taxonomy' => 'product' ));
 foreach ($product_categories as $category) {
   $tax_term_id = $category->term_taxonomy_id;
   $images = get_option('taxonomy_image_plugin');
   echo wp_get_attachment_image( $images[$tax_term_id], 'large' );
}

For detail expansion version of the above code, visit the Support Forum.

But trust me, above code works too. You can customize the code as per your requirement.

So we have finally integrated the plugin and it’s code to Display Thumbnail Images to Categories in WordPress. As mentioned earlier, you can employ this plugin to other Taxonomies Tags, Link Categories, and even your Custom Taxonomies as well. Not so hard, is it?

Comment in the form below if you have any query or suggestion. I am always ready to help.

If this article helped you in any way, Please Share it. 🙂