Developer Docs

Adding Attributes to Inner Elements

Bricks’ has a filter ‘bricks/element/render_attributes‘ which allows us to edit the HTML attributes inside default elements.

If you need to add some attributes to the inner structures of BricksExtras elements, here’s how to do it..

$element_name – The name of all BricksExtras elements follow the same format, having a prefix of just the letter x. ‘xnameofelement’.
For example.. xoffcanvas, xmodal, xtableofcontents, xburgertrigger, etc.

$element_idenitifier – Which HTML element inside of the element. With BricksExtras, the identifier is the same as the class found on that inner element.
For eg example.. x-popover, x-offcanvas_backdrop, x-marker_popover-content

$new_attributes – An array of the attributes you want to add ‘name’ => ‘value’.

Example code, using these variables with Bricks’ filter to add a new custom data attribute and a new class onto the ‘x-hamburger-box’ div inside of the burger trigger element.

add_filter( 'bricks/element/render_attributes', function( $attributes, $key, $settings, $name ) {
	
	$element_name = "xburgertrigger"; /* The element name */
	$element_identifier = 'x-hamburger-box'; /* The HTML indentifier inside of the element */

	$new_attributes = [ /* New class/attributes to be added */
		'class' => 'my-new-class',
		'data-custom' => 'my-custom-attribute-value',
	];

	

	if ( bricks_is_frontend() && $element_name === $name  && $element_identifier === $key ) {
		foreach( $new_attributes as $new_attribute_name => $new_attribute_value ) {
		  $attributes[$key][$new_attribute_name][] = $new_attribute_value;
		}
	}

	return $attributes;
	
}, 10, 4 );