How to Add Taxonomy Images (Category Icons) in WordPress


Do you need to show taxonomy photos or class icons in WordPress?

By default, WordPress doesn’t include an choice to add a taxonomy picture or class icon. It merely simply shows a class or taxonomy title on the archive pages.

In this text, we’ll present you ways to simply add taxonomy photos or class icons in WordPress. We’ll additionally present you ways to show taxonomy photos in your archive pages.

Adding category icons or taxonomy images in WordPress

Why Add Taxonomy Images in WordPress?

By default, your WordPress website doesn’t include an choice to add photos in your taxonomies like categories and tags (or every other customized taxonomy).

It merely makes use of taxonomy names in every single place together with the class archives or taxonomy archive pages.

Plain taxonomy archive page

This appears sort of plain and boring.

If you get a number of search visitors to your taxonomy pages, then it’s your decision to make them look extra participating.

The easiest method to make a web page extra attention-grabbing is by including photos. You can add taxonomy photos or class icons to make these pages extra user-friendly and fascinating.

An excellent instance of it’s a website like NerdWallet that makes use of class icons in their header:

Category Icons example Nerdwallet

You may use it create lovely navigational sections in your homepage like Bankrate:

Category Icon Navigation Blocks

That being mentioned, let’s check out how to simply add taxonomy photos in WordPress.

Easily Add Taxonomy Images in WordPress

First factor you want to do is set up and activate the Categories Images plugin. For extra particulars, see our step-by-step information on how to install a WordPress plugin.

Upon activation, you possibly can merely go to the Posts » Categories web page. You’ll discover the plugin might be exhibiting a placeholder picture in your current classes.

Default placeholder image

To select your individual class icon, you want to click on on the Edit hyperlink beneath a class.

On the Edit class web page, scroll down to the underside and also you’ll discover a kind to add your individual taxonomy picture.

Upload new taxonomy image

Simply click on on the ‘Upload/Add New Image’ button to add the picture you need to use for that exact class.

Don’t neglect to click on on the Add Category or Update button to save your modifications.

Next, you possibly can repeat the method to add photos for different class photos. You may add photos in your tags and every other taxonomies as properly.

Categories with thumbnail images

Now the issue is that after including the photographs, in the event you go to a class web page, you then gained’t see your class picture there.

To show it, you will want to edit your WordPress theme or child theme. If that is your first time enhancing WordPress information, then it’s your decision to see our information on how to copy and paste code in WordPress.

First, you will want to join to your WordPress website utilizing an FTP shopper or your WordPress hosting file supervisor.

Once related, you will want to discover the template accountable for displaying your taxonomy archives. This may very well be archives.php, class.php, tag.php, or taxonomy.php information.

For extra particulars, see our information on how to find which files to edit in a WordPress theme.

Once you’ve discovered the file, you’ll want to obtain it to your laptop and open in a text editor like Notepad or Textual contentEdit.

Now paste the next code the place you need to show your taxonomy picture. Usually, you’d need to add it earlier than 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="" / >
} else {  
//do nothing

After including the code, you want to save this file and add it again to your web site utilizing FTP.

You can now go to the taxonomy archive web page to see it show your taxonomy picture. Here is the way it seemed on our demo archive web page.

Category with image

Now, it could nonetheless look a bit awkward, however don’t fear. You can model that utilizing a little bit little bit of custom CSS.

Here is the customized CSS we used for the taxonomy picture.

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

Depending in your theme, you may additionally want to model surrounding components like taxonomy title and outline.

We merely wrapped our taxonomy archive title and outline in a <div> ingredient and added a customized CSS class. We then used the next CSS code to regulate title and outline.

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

Here is the way it seemed afterward on our check web site.

After adding custom CSS

Exclude Taxonomies from Displaying Taxonomy Images

Now some customers could solely need to use taxonomy photos for particular taxonomies.

For occasion, in the event you run an online store utilizing WooCommerce, then it’s your decision to exclude product classes.

Simply return to the Categories Images web page in WordPress admin space and verify the taxonomies you need to exclude.

Exclude categories

Don’t neglect to click on on the Save Changes button to retailer your settings.

We hope this text helped you find out how to simply add taxonomy photos in WordPress. You can also need to see these helpful category hacks and plugins for WordPress or see our recommendations on getting more traffic from search engines like google.

If you preferred this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You may discover us on Twitter and Facebook.

The publish How to Add Taxonomy Images (Category Icons) in WordPress first appeared on WPBeginner.

Source link