Taxonomy Category Icon on index page

Question

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?

thanks!

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.