aria-current=”true” for Current Categories on single Posts in Bricks

Updated on 11 Sep 2024

A user asks:

I have a single post template and display all categories in it with the bricks loop.

Now I would like to color all categories that are assigned to the post red.

In the category template this is easy because the categories have aria-current=“page”, but how do I do this in a single post template?

We can

• write a custom function that returns 'true' or 'false' string depending on whether a given category is assigned to the current post
• add an aria-current data attribute with the value set to our function for either the query loop-enabled list item or the category link text element inside in the Terms query loop
• add custom CSS targeting [aria-current="true"] to uniquely make the post's category/categories stand out

This Pro tutorial shows how.

After implementing the tutorial, for a post that has "Business" and "People" categories:

Update 1: Added a more versatile function that works with not just the standard categories, but any taxonomy including custom taxonomies.

Step 1

Edit your single post template with Bricks.

Set up a Terms query loop on a Block.

Select "Categories (Post)" for the Taxonomy.

Add a Basic Text element (or a Text Link if you prefer that) inside the Block.

Set its text to be the term name and link to be the term URL.

Step 2

Add the following in child theme's functions.php (w/o the opening PHP tag) or a code snippets plugin: