[Resolved] Adding class to custom taxonomy link

Home Forums Support [Resolved] Adding class to custom taxonomy link

Home Forums Support Adding class to custom taxonomy link

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1981088
    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!

    #1981494
    Elvin
    Staff
    Customer Support

    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
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1981535
    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?

    #1981539
    Elvin
    Staff
    Customer Support

    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/

    A wise man once said:
    "Have you cleared your cache?"

    #1981549
    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?

    #1981553
    Elvin
    Staff
    Customer Support

    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;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1981555
    Kumara

    That works great!
    Thanks so much Elvin.

    #1981560
    Elvin
    Staff
    Customer Support

    No problem. 😀

    A wise man once said:
    "Have you cleared your cache?"

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.