In the BricksLabs Facebook group, a user asks:
How can I set a data attribute on a child taxonomy based on the parent tax?
In this case, I want to change the background color of the {tax_name:link} element based on the parent taxonomy.
This Pro tutorial shows how we can define a custom function that takes a term ID as a parameter (defaulting to the current term in the loop) and returns the slug of the parent term to be used as the value of a data attribute in a Bricks Terms query loop.
After implementing the tutorial, given these categories,
HTML output on the front end:
It is then possible to uniquely color code your terms or add an icon based on its parent term.
Ex.:
[data-parent-term="food"] a {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%235f6368'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M11 9H9V2H7v7H5V2H3v7c0 2.12 1.66 3.84 3.75 3.97V22h2.5v-9.03C11.34 12.84 13 11.12 13 9V2h-2v7zm5-3v8h2.5v8H21V2c-2.76 0-5 2.24-5 4z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
padding-left: 1.6em;
}
Step 1
Add the following in child theme's functions.php (w/o the opening PHP tag) or a code snippets plugin:
