There are few plugins to add icon to taxonomy's. These plugin show icon only on taxonomy archive or template pages.

In my case CPT = event & Taxonomy = event-category & categories are green,red,black etc

How to display category icon on index.php using wp_post_query?

Any thoughts on how to go about this? or a plugin that might do something similar?


1 Answer 1


Since you want the icons to appear in a specific place, this seems more like theme territory rather than plugin. One way to achieve your goal:

Create a child theme (or edit the one you're already using). Copy your homepage template (it's unlikely you want to change index.php; you're probably looking for front-page.php or home.php, check your theme and the Template Hierarchy to find the file you need - which may be a template part) - copy that file into your child theme.

From there, you need to decide how you want to display the icons. You could load an icon font like FontAwesome or you could add some SVGs via CSS. You will then add a conditional into the theme file you just copied, where it's outputting the event category names, something to the effect of "if the term ID equals 1, show a gear icon then the title; else if the term ID equals 2, show a star icon then the title."

If you use an icon font it goes something like this:

<h2><i class="fa fa-gear"></i> Event Category 1 Name</h2>
<h2><i class="fa fa-star"></i> Event Category 2 Name</h2>

Or if you use SVGs you would want to add a CSS class instead like this:

<h2 class="icon-gear">Event Category 1 Name</h2>
<h2 class="icon-star">Event Category 2 Name</h2>

then in CSS you would do something like

h2.icon-gear:before { background:url('gear.svg') left bottom 100% 100% no-repeat; }
h2.icon-star:before { background:url('star.svg') left bottom 100% 100% no-repeat; }

or you can urlencode the svg and embed it within the CSS itself.

  • Please make a edit in your answers i try but not solve it. what will be php part on index.php?
    – FRQ6692
    Feb 27, 2018 at 20:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.