[Resolved] Adding class to custom taxonomy link

[Kumara]

Hello,

I have created a custom taxonomy. I can pull up the taxonomy terms assigned to a post using {{post_terms.example}} in my header element. Is there a way to assign a class to links that generates based on the taxonomy term? I’d like to ultimately assign an icon to each of the terms using a pseudo element. Thanks!

[Elvin]

Hi Kumara,

Unfortunately, you can’t do it w/ the template tags.

But in context of what your goal is, you won’t need it anyway.

You can always use the href links of the taxonomy terms as an attribute selector.
https://www.w3schools.com/css/css_attribute_selectors.asp

Say, for example you have a taxonomy animals and term cats and the term link has something like www.yoururl.com/animals/cats/

You can go with:

.page-hero a[href$="/animals/cats/"]:before {
//your pseudo element styling here
}

[Kumara]

Elvin,

Thanks so much! I had no idea that href links could be used as attribute selectors. Works perfectly.

One more question… using {{post_terms.example}} in the page hero lists the term names separated by commas. Is it possible to hide or remove the text and commas so that only the icons are displaying?

[Elvin]

One more question… using {{post_terms.example}} in the page hero lists the term names separated by commas. Is it possible to hide or remove the text and commas so that only the icons are displaying?

You can filter it out using this filter:
https://docs.generatepress.com/article/generate_page_hero_terms_separator/

Here’s how to add PHP – https://docs.generatepress.com/article/adding-php/

[Kumara]

Thanks again! That worked perfectly for the commas. Would there be any way to remove the term name (text) as well so that only the icons remain?

[Elvin]

Thanks again! That worked perfectly for the commas. Would there be any way to remove the term name (text) as well so that only the icons remain?

You can set the font-size to 0 on the main element and readd it to the pseudo element so the pseudo element still shows up.

Example:

.page-hero a[href$="/animals/cats/"] {
font-size: 0;
}

.page-hero a[href$="/animals/cats/"]:before {
font-size: 16px;
}

[Kumara]

That works great!
Thanks so much Elvin.

[Elvin]

No problem. 😀

[Author]

Posts