{"id":2997,"date":"2022-02-03T13:31:44","date_gmt":"2022-02-03T13:31:44","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=2997"},"modified":"2023-06-12T14:34:27","modified_gmt":"2023-06-12T14:34:27","slug":"how-to-add-taxonomy-images-category-icon-in-wordpress","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/how-to-add-taxonomy-images-category-icon-in-wordpress\/","title":{"rendered":"How to Add Taxonomy Images (Category Icons) in WordPress"},"content":{"rendered":"

Rengga Dev<\/strong><\/span><\/a> – Do you want to display taxonomy images or category icons in WordPress?<\/p>\n

By default, WordPress does not come with an option to upload a taxonomy image or category icon. It simply just displays a category or taxonomy name on the archive pages.<\/p>\n

In this article, we\u2019ll show you how to easily add taxonomy images or category icons in WordPress. We\u2019ll also show you how to display taxonomy images on your archive pages.<\/p>\n

<\/h2>\n

Why Add Taxonomy Images in WordPress?<\/h2>\n

By default, your\u00a0WordPress website\u00a0does not come with an option to add images for your taxonomies like\u00a0categories and tags\u00a0(or any other custom taxonomy).<\/p>\n

It simply uses taxonomy names everywhere including the category archives or taxonomy archive pages.<\/p>\n

\"Plain<\/figure>\n

This looks kind of plain and boring.<\/p>\n

If you get a lot of search traffic to your taxonomy pages, then you may want to make them look more engaging.<\/p>\n

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 engaging.<\/p>\n

A good example of it is a site like NerdWallet that uses category icons in their header:<\/p>\n

\"Category<\/figure>\n

You can also use it create beautiful navigational sections on your homepage like Bankrate:<\/p>\n

\"Category<\/figure>\n

That being said, let\u2019s take a look at how to easily add taxonomy images in WordPress.<\/p>\n

<\/h2>\n

Easily Add Taxonomy Images in WordPress<\/h2>\n

First thing you need to do is install and activate the\u00a0Categories Images<\/a>\u00a0plugin. For more details, see our step-by-step guide on\u00a0how to install a WordPress plugin.<\/p>\n

Upon activation, you can simply go to the\u00a0Posts \u00bb Categories<\/strong>\u00a0page. You\u2019ll notice the plugin will be showing a placeholder image for your existing categories.<\/p>\n

\"Default<\/figure>\n

To choose your own category icon, you need to click on the Edit link below a category.<\/p>\n

On the Edit category page, scroll down to the bottom and you\u2019ll find a form to upload your own taxonomy image.<\/p>\n

\"Upload<\/figure>\n

Simply click on the \u2018Upload\/Add New Image\u2019 button to upload the image you want to use for that particular category.<\/p>\n

Don\u2019t forget to click on the Add Category or Update button to save your changes.<\/p>\n

Next, you can repeat the process to upload images for other category images. You can also upload images for your tags and any other taxonomies as well.<\/p>\n

\"Categories<\/figure>\n

Now the problem is that after adding the images, if you visit a category page, then you won\u2019t see your category image there.<\/p>\n

To display it, you will need to edit your WordPress theme or\u00a0child theme. If this is your first time editing WordPress files, then you may want to see our guide on\u00a0how to copy and paste code in WordPress.<\/p>\n

First, you will need to connect to your WordPress site using an\u00a0FTP client or your\u00a0WordPress hosting\u00a0file manager.<\/p>\n

Once connected, you will need to find the template responsible for displaying your taxonomy archives. This could be archives.php, category.php, tag.php, or taxonomy.php files.<\/p>\n

For more details, see our guide on how to\u00a0find which files to edit in a WordPress theme.<\/p>\n

Once you have found the file, you\u2019ll need to download it to your computer and open in a\u00a0text editor\u00a0like Notepad or TextEdit.<\/p>\n

Now paste the following code where you want to display your taxonomy image. Usually, you would want to add it before the taxonomy title or\u00a0the_archive_title()<\/code>\u00a0tag.<\/p>\n

<?php if( is_category() ) { ?> \r\n<div class=\"taxonomy-image\">\r\n<img class=\"taxonomy-img\" src=\"<?php if (function_exists('z_taxonomy_image_url')) echo z_taxonomy_image_url(); ?>\"  alt=\"\" \/ >\r\n<\/div>\r\n<?php \r\n} else {  \r\n\/\/do nothing\r\n} \r\n?><\/pre>\n
After adding the code, you need to save this file and upload it back to your website using FTP.<\/p>\n
You can now visit the taxonomy archive page to see it display your taxonomy image. Here is how it looked on our demo archive page.<\/p>\n
\"Category<\/figure>\n
Now, it may still look a bit awkward, but don\u2019t worry. You can style that using a little bit of\u00a0custom CSS.<\/p>\n
Here is the custom CSS we used for the taxonomy image.<\/p>\n
img.taxonomy-img {\r\n    float: left;\r\n    max-height: 100px;\r\n    max-width: 100px;\r\n    display: inline-block;\r\n}<\/pre>\n
Depending on your theme, you may also need to style surrounding elements like taxonomy title and description.<\/p>\n
We simply wrapped our taxonomy archive title and description in a\u00a0<div><\/code>\u00a0element and added a custom CSS class. We then used the following CSS code to adjust title and description.<\/p>\n
.taxonomy-title-description {\r\n    display: inline-block;\r\n    padding: 18px;\r\n}<\/pre>\n
Here is how it looked afterward on our test website.<\/p>\n
\"After<\/figure>\n
<\/h2>\n
Exclude Taxonomies from Displaying Taxonomy Images<\/h2>\n
Now some users may only want to use taxonomy images for specific taxonomies.<\/p>\n
For instance, if you run an\u00a0online store\u00a0using WooCommerce, then you may want to exclude product categories.<\/p>\n
Simply go back to the Categories Images page in WordPress admin area and check the taxonomies you want to exclude.<\/p>\n
\"Exclude<\/figure>\n
Don\u2019t forget to click on the Save Changes button to store your settings.<\/p>\n
We hope this article helped you learn how to easily add taxonomy images in WordPress. You may also want to see these useful\u00a0category hacks and plugins for WordPress\u00a0or see our tips on\u00a0getting more traffic\u00a0from search engines.<\/p>\n","protected":false},"excerpt":{"rendered":"
Rengga Dev – Do you want to display taxonomy images or category <\/a><\/p>\n","protected":false},"author":1,"featured_media":3763,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,17],"tags":[257,131,136],"newstopic":[595],"class_list":{"0":"post-2997","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-web-development","8":"category-wordpress","9":"tag-category-icons-wordpress","10":"tag-taxonomy-images-wordpress","11":"tag-wordpress-plugin","12":"newstopic-wordpress"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/2997","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=2997"}],"version-history":[{"count":2,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/2997\/revisions"}],"predecessor-version":[{"id":3000,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/2997\/revisions\/3000"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3763"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=2997"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=2997"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=2997"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=2997"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}