This Pro tutorial provides the steps to add a class or a data-<taxonomy> attribute to terms of the current post for the given taxonomy so they can be styled differently for different terms in Bricks.
Sample use case: On the Blog page set a specific background color for all "Nature" category archive labels/links and a different background color for "Flowers" category archive labels/links in the posts grid.
We will cover both static and dynamic cases wherein category-specific colors can either be set in CSS (static) or pulled from a Color-type of custom field for the categories (dynamic).
Sample HTML markups:
Static classes:
Static data-attributes:
Dynamic data-attributes:
Usage
To display the linked terms with our custom HTML markup, we can use this dynamic tag as one of the Fields of the Posts element or in a Query Loop:
Categories: {echo:bl_get_linked_terms}
This outputs the categories for the current post in the loop separated by a comma.
The function is going to be set to take 2 parameters: taxonomy (category is the default) and separator (, is the default).
In this example, let's use this instead so there is no separator:
{echo:bl_get_linked_terms(category,'')}
Step 1
Let's define a custom function that takes in the taxonomy and separator as its arguments and returns the term names linking to their archives with the taxonomy slugs as the value of the class attribute.
Add the following in child theme's functions.php or a code snippets plugin:
