Ultimate Guide: Adding Eye-Catching Taxonomy Images (Category Icons) in WordPress

Enhancing your WordPress site with taxonomy images or category icons can significantly improve the visibility of your categories.

Unfortunately, WordPress does not provide a built-in feature to upload these images, leaving only the category or taxonomy names displayed on archive pages, which can appear uninviting.

In this tutorial, we will guide you through the process of adding taxonomy images or category icons to your WordPress site. You will also discover how to showcase them on your archive pages, enhancing the overall engagement and user experience.

The Importance of Adding Taxonomy Images in WordPress

By default, WordPress does not allow you to upload images for your taxonomies, including categories and tags, or any custom taxonomies you may have.

It relies solely on taxonomy names across the site, including on category and taxonomy archive pages.

This can create a dull appearance.

If your taxonomy pages attract significant search traffic, enhancing their visual appeal can be beneficial.

We’ve witnessed how uninteresting, text-heavy pages can become captivating simply by incorporating relevant images. This transformation occurs not because the images are extraordinary, but because people naturally prefer visual elements over text.

Incorporating taxonomy images or category icons can make these pages more user-friendly and visually appealing.

An excellent example of this is NerdWallet, which features category icons prominently in its header.

This feature can also enhance the visual appeal of the navigational sections on your homepage.

Here’s an illustration from Bankrate’s website:

Now, let’s explore a simple method for adding taxonomy images in WordPress.

Easily Incorporate Taxonomy Images in WordPress

First, install and activate the Categories Images plugin. For detailed instructions, refer to our comprehensive guide on installing a WordPress plugin.

After activation, navigate to the Posts » Categories page. You will see that the plugin displays a placeholder image for your existing categories.

To select your own category icon, click the Edit link below the desired category.

On the Edit category page, scroll to the bottom to find a form for uploading your custom taxonomy image.

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

Remember to click the ‘Add Category’ or ‘Update’ button to save your changes.

Next, you can repeat this process to upload images for additional categories. You can also upload images for your tags and other taxonomies.

After adding the images, you may notice that they do not appear on your category page.

To make the images visible, you will need to modify your WordPress theme or child theme, or you can add the code using the WPCode plugin.

We will guide you through both methods so you can choose the one that seems easier for you.

Option 1: Display Category Image Icons Using WPCode (Recommended)

This method is simpler as it eliminates the need to identify which theme file to edit, allowing you to safely add the code without risking damage to your site.

It is also advisable for users utilizing a block theme that supports the site editor.

First, install and activate the WPCode plugin. For detailed instructions, refer to our tutorial on installing a WordPress plugin.

Once activated, navigate to the WPCode » + Add Snippet page and click the Use Snippet button located under the ‘Add Your Custom Code (New Snippet)’ section.

On the following screen, provide a title for your snippet that will help you recognize it later.

Next, select ‘PHP snippet’ as the type of code you will be using.

In the Code Preview box, copy and paste the following code snippet:

After inserting the code, save the file and upload it back to your website using FTP.

<?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="Category Image" />
</div>
<?php } else { // do nothing } ?>

Next, scroll down to the Insertion section and select Shortcode as your method of insertion.

You will see that WPCode automatically generates a shortcode. You can also create a custom shortcode for easier recall.

Next, click the ‘Copy’ button to save the custom shortcode.

You can now use this shortcode to display the category image on your archive pages.

Inserting Shortcode in the Site Editor

If you are using a block theme that supports the site editor, navigate to the Appearance » Editor page to access the Site Editor.

Here, you can insert a shortcode block just before the Archive Title block.

Now paste the shortcode you copied earlier into the shortcode block.

Remember to save your changes to apply them. You can now visit your category archive page to see the shortcode in action.

If the image doesn’t appear correctly, don’t worry. We’ll guide you on how to fix it later using custom CSS.

Option 2: Manually Add Category Image Icons

This method requires you to insert custom code into your WordPress theme files.

If you are new to editing WordPress files, consider checking our guide on how to copy and paste code in WordPress.

First, connect to your WordPress site using an FTP client or the file manager provided by your hosting service.

Once connected, locate the template file that displays your taxonomy archives. This could be archives.php, category.php, tag.php, or taxonomy.php.

For more information, refer to our guide on identifying which files to edit in a WordPress theme.

After finding the file, download it to your computer and open it in a text editor like Notepad or TextEdit.

Next, insert the following code where you want the taxonomy image to appear, typically before the taxonomy title. the_archive_title() tag.

<?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 } ?>

You can now check the taxonomy archive page to see how your taxonomy image appears. Here’s how it looked on our demo archive page.

It might still look a bit off, but don’t worry. You can enhance its appearance with some custom CSS.

Custom CSS for Styling Category Icons

Once you’ve added the Category Icon or Taxonomy images to your WordPress theme, the image may not appear as intended.

To correct this, you’ll need to add CSS code to ensure proper alignment.

If you’re new to adding CSS code in WordPress, check out our beginner’s guide on how to add custom CSS in WordPress.

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

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

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

We simply enclosed our taxonomy archive title and description in a

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