Opens in a new tab
16th May '26
/
0 comments

How to move data attributes from outer element to nested element in Bricks

Consider a scenario where a Container/Block in Bricks is made up of image on the left side and a heading with text blurb on the right with both image and heading linking to the same URL.

It is recommended to follow a Single Action Pattern in this case by setting aria-hidden: true and tabindex: -1 for the heading element's anchor tag for accessibility.

The problem though is that when these custom data attributes are added to the heading element, they apply to the heading itself:

when they should be applied to h4 > a, like this:

This Pro tutorial provides the code snippet for this.

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

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Get access to all 633 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
Conditional CSS Classes based on Bricks Query Count

Conditional CSS Classes based on Bricks Query Count

In a Bricks project I am currently working on, there are nested query loops - team members inside departments on a Page. Each team member…
Pro
x Number of Random Bricks Query Loop Items(s) to be Shown Every x Hours

x Number of Random Bricks Query Loop Items(s) to be Shown Every x Hours

Showing how to display one random row of a Meta Box group for an hour and then output another random row.
Pro
Setting a Bricks template for Parent pages

Setting a Bricks template for Parent pages

This Pro tutorial shows how bricks/active_templates filter can be used to programmatically assign a Bricks template to all singular pages (of any post type) that…