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 provide an option to upload a taxonomy image or a category icon. It simply displays a category or taxonomy name on archive pages.

In this article, we are going to 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.

Adding Category Icons or Taxonomy Images in WordPress

Why Add Taxonomy Images in WordPress?

By default, your WordPress website does not provide an option to add images for your taxonomies such as categories and tags (or any other custom taxonomy).

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

Simple taxonomy archive page

It seems a bit simple and boring.

If you’re getting a lot of search traffic to your taxonomy pages, you might want to make them more appealing.

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

A good example is a site like NerdWallet that uses category icons in its header:

Example of Nerdwallet Category Icons

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

Navigation Blocks Category Icon

That being said, let’s see how to easily add taxonomy images in WordPress.

Easily add taxonomy images in WordPress

The first thing you need to do is install and activate the Categories Pictures connect. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you can simply go to the Posts ยป Categories page. You will notice that the plugin will display a placeholder image for your existing categories.

Default placeholder image

To choose your own category icon, you need to click on the Edit link under a category.

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

Upload a new taxonomy image

Simply click the “Upload/Add New Image” button to upload the image you want to use for that particular category.

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

Then you can repeat the process to upload images for other category images. You can also upload images for your tags and any other taxonomy.

Categories with thumbnails

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

To view it, you will need to edit your WordPress theme or child theme. If this is your first time editing WordPress files, you might want to check out our guide on how to copy and paste code in WordPress.

First, you will need to connect to your WordPress site using an FTP client or your WordPress hosting file manager.

Once logged in, you will need to find the model responsible for displaying your taxonomy archives. These can be archives.php, category.php, tag.php or taxonomy.php.

For more details, see our guide on how to find files to edit in a WordPress theme.

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

Now paste the following code where you want to display your taxonomy image. Usually you’ll want to add it before the taxonomy title or the_archive_title() label.

<?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 to your website via FTP.

You can now visit the taxonomy archive page to see it display your taxonomy image. This is what it looked like on our demo archive page.

Category with image

Now, this may still seem a bit awkward, but don’t worry. You can style this using a bit of 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 style surrounding elements such as the taxonomy title and description.

We simply wrapped the title and description of our taxonomy archive into a <div> element and added a custom CSS class. We then used the following CSS code to adjust the title and description.

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

Here’s what it looked like afterwards on our test website.

After adding custom CSS

Exclude taxonomies from displaying taxonomy images

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

For example, if you run an online store using WooCommerce, you might want to exclude product categories.

Simply return to the Images Categories page in the WordPress admin area and check the taxonomies you wish to exclude.

Exclude categories

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 in WordPress. You can also check out these useful category hacks and plugins for WordPress or check out our tips for getting more search engine traffic.

If you liked this article, subscribe to our Youtube channel for WordPress video tutorials. You can also find us on Twitter and Facebook.



Leave a Comment

Your email address will not be published.