How To Show Category Icons On Your Website

Rifat WordPress Tutorials Aug 19, 2022

Do you wish to use WordPress to display taxonomy pictures or category icons?

WordPress does not have the ability to upload a taxonomy picture or category symbol by default. On the archive pages, it merely displays the name of a category or taxonomy.

We'll teach you how to simply add taxonomy pictures or category icons to WordPress in this article. We'll also demonstrate how to include taxonomy photos on your archive pages.

Importance Of Category Icons

Your WordPress website does not have the ability to add photos to taxonomies such as categories and tags by default (or any other custom taxonomy).

Create Amazing Websites

With the best free page builder Elementor

Start Now

It simply uses taxonomy names throughout the site, including category archives and taxonomy archive sites.

This appears to be really plain and uninteresting.

If your taxonomy pages receive a lot of search traffic, you might wish to make them appear more appealing.

Adding photos is the quickest method to make a page more appealing. To make these pages more user-friendly and engaging, you can add taxonomy graphics or category icons.

A nice example is NerdWallet, which uses category icons in its header.

You may also use it to build gorgeous navigational parts for your website, such as Bankrate:

After that, let's look at how to effortlessly add category icons in WordPress.

Adding Category Images in WordPress

The first step is to install and activate the Categories Images plugin. For more information, visit our step-by-step guide to installing a WordPress plugin.

After activation, simply navigate to the Posts » Categories page. The plugin will display a placeholder image for your existing categories.

To customize your category icon, click the Edit option next to a category.

Scroll down to the bottom of the Edit category page to find a form to add your own taxonomy image.

Simply click the 'Upload/Add New Image' button to upload the image for that specific category.

Don't forget to save your changes by clicking the Add Category or Update button.

Then, repeat the process to upload photographs for other categories. You can also include images in your tags and other taxonomies.

The issue now is that if you visit a category page after uploading the images, you will not see your category image.

You must edit your WordPress theme or child theme to make it visible. If this is your first time modifying WordPress files, you should check out our instructions on how to copy and paste code in WordPress.

To begin, connect to your WordPress site via an FTP program or your WordPress hosting file manager.

Once connected, you must locate the template in charge of showing your taxonomy archives. This might be files like archives.php, category.php, tag.php, or taxonomy.php.

Once you've located the file, save it to your computer and open it in a text editor such as Notepad or TextEdit.

Now, paste the following code wherever you want your taxonomy image to appear. It is usually added before the taxonomy title or 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 
} 
?>

After you've added the code, save the file and submit it to your website via FTP.

You may now view your taxonomy image on the taxonomy archive page. This is how it appeared on our demo archive page.

It may still appear odd at this point, but don't worry. You may style it with a little custom CSS.

Here's the CSS we used to style the category icon.

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

You may also need to customize surrounding elements, such as the taxonomy title and description, depending on your theme.

We simply wrapped the title and description of our taxonomy archive in an <div> element and added a custom CSS class. We then used the CSS code below to change the title and description.

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

Here's how it looked on our test website after that.

Wrapping Up

We hope this tutorial was useful in teaching you how to simply add taxonomy images in WordPress. You may also be interested in these valuable WordPress category hacks and plugins, as well as our ideas for increasing search engine traffic. Continue to follow CodeWatchers for more information.

Divi WordPress Theme