How to add taxonomy images (category icons) in WordPress

Do you want to display taxonomy images or category icons in WordPress?

By default, WordPress does not include the option to upload a taxonomy image or category icon. It simply just displays the category or taxonomy name on the archive pages.

In this article, we will show you how to easily add taxonomy images or category icons in WordPress. We’ll also show you how to display taxonomy images on your archive pages.

Why Add Taxonomy Images to WordPress?

By default, it’s yours WordPress website does not include the ability to add images for your taxonomies as is categories and tags (or any other custom taxonomy).

It simply uses taxonomy names everywhere, including category archives or taxonomy archive pages.

This looks kind of plain and boring.

If you have a lot of search traffic on your taxonomy pages, you may want to make them more attractive.

The easiest way to make a page more interesting is by adding images. You can add taxonomy images or category icons to make these pages more user-friendly and attractive.

A good example of this is a site like NerdWallet, which uses category icons in its header:

You can also use it to create beautiful homepage navigation sections like Bankrate:

With that said, let’s see how to easily add taxonomy images to WordPress.

Easily add taxonomy images to WordPress

The first thing you need to do is to install and activate it Categories Images to include. Check out our step-by-step guide for more details how to install a WordPress plugin.

After activation, you can easily open Posts » Categories pages. You will notice that the plugin will display a placeholder image for your existing categories.

To choose your own category icon, you must click the Edit link below the category.

On the edit category page, scroll down to the bottom and you’ll find a form to upload your own taxonomy image.

Simply click on the ‘Upload/Add New Image’ button to upload the image you want to use for a specific category.

Don’t forget to click the Add Category or Update button to save your changes.

You can then repeat the image upload process for other category images. You can also upload images for your tags and other taxonomies.

Now the problem is that after adding images, if you go to the category page, you won’t see your category image there.

To display, you will need to edit your WordPress theme or children’s theme. If this is your first time editing WordPress files, you may want to check out our guide how to copy and paste code in WordPress.

First, you’ll need to connect to your WordPress site via an FTP client or your own WordPress hosting file manager.

Once connected, you will need to locate the template responsible for displaying your taxonomy archives. These can be archives.php, category.php, tag.php or taxonomy.php files.

Check out our how-to guide for more details find out which files you want to edit in your WordPress theme.

Once you find the file, you need to download it to your computer and open it text editor like Notepad or TextEdit.

Now paste the following code where you want to display your taxonomy image. Normally you would want to add it before the taxonomy title or the_archive_title() mark.

<?php if( is_category() ) { ?> 
<div class="taxonomy-image">
<img class="taxonomy-img" src="<?php if (function_exists('z_taxonomy_image_url')) echo z_taxonomy_image_url(); ?>"  alt="" / >
</div>
<?php 
} else {  
//do nothing
} 
?>

After adding the code, you need to save this file and upload it back to your site via FTP.

You can now visit the taxonomy archive page and see that it displays your taxonomy image. Here’s how it looked on our demo archive page.

It might still look a little awkward, but don’t worry. You can style this with little Custom CSS.

Here is the custom CSS we used for the taxonomy image.

img.taxonomy-img {
    float: left;
    max-height: 100px;
    max-width: 100px;
    display: inline-block;
}

Depending on your theme, you may also need to design surrounding elements such as the taxonomy title and description.

We simply wrapped the title and description of our taxonomic archive in va <div> element and added a custom CSS class. We then used the following CSS code to customize the title and description.

.taxonomy-title-description {
    display: inline-block;
    padding: 18px;
}

This is what it looked like afterwards on our test site.

Exclude taxonomies from displaying taxonomy images

Now, some users may want to use taxonomy images only for specific taxonomies.

For example, if you lead online shop using WooCommerce, you may want to exclude product categories.

Simply go back to the Category Images page in your WordPress admin area and check the taxonomies you want to exclude.

Don’t forget to click the Save Changes button to save your settings.

We hope this article helped you learn how to easily add taxonomy images to WordPress. You may also want to see these useful category hacks and WordPress plugins or see our tips getting more traffic from search engines.

If you liked this article, please subscribe to ours YouTube channel for WordPress video tutorials. You can also find us at Twitter and Facebook.