{"id":2437,"date":"2022-07-02T17:09:53","date_gmt":"2022-07-02T17:09:53","guid":{"rendered":"https:\/\/academy.bricksbuilder.io\/?post_type=bricks_article&#038;p=2437"},"modified":"2022-07-25T10:02:28","modified_gmt":"2022-07-25T10:02:28","slug":"filter-bricks-set_root_attributes","status":"publish","type":"bricks_article","link":"https:\/\/academy.bricksbuilder.io\/article\/filter-bricks-set_root_attributes\/","title":{"rendered":"Filter: bricks\/element\/set_root_attributes"},"content":{"rendered":"\n<p>Bricks 1.4 with its improved &amp; slimmer DOM structure now requires to add the element ID, root classes, and other element root HTML attributes directly inside the <code>render()<\/code> function. You can programmatically manipulate the returns element root attributes like so:<\/p>\n\n\n\n<pre class=\"wp-block-code prettyprint\"><code>add_filter( 'bricks\/element\/set_root_attributes', function( $attributes, $element ) {\n    \/\/ Add CSS class 'heading-bg' to every heading element\n    if ( $element->name === 'heading' ) {\n        $attributes&#91;'class']&#91;] = 'heading-bg'; \n    }\n\n    return $attributes;\n}, 10, 2 );<\/code><\/pre>\n\n\n\n<p>The filter callback receives 2 arguments:<\/p>\n\n\n\n<ul><li><code>$attributes<\/code>\u00a0\u2013 an associative array of the element root attributes, grouped by the attribute name (e.g. &#8220;class&#8221;, &#8220;data-animation&#8221;, &#8230;)<\/li><li><code>$element<\/code> &#8211; the Bricks element <a href=\"https:\/\/academy.bricksbuilder.io\/article\/create-your-own-elements\/\">object<\/a><\/li><\/ul>\n\n\n\n<p><strong>NOTE<\/strong>: This filter doesn&#8217;t work in builder &amp; already possible with <em><a href=\"https:\/\/academy.bricksbuilder.io\/article\/filter-bricks-element-render_attributes\/\" data-type=\"bricks_article\" data-id=\"2127\">bricks\/element\/render_attributes<\/a><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bricks 1.4 with its improved &amp; slimmer DOM structure now requires to add the element ID, root classes, and other element root HTML attributes directly inside the render() function. You can programmatically manipulate the returns element root attributes like so: The filter callback receives 2 arguments: $attributes\u00a0\u2013 an associative array of the element root attributes, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"menu_order":88,"template":"","format":"standard","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article\/2437"}],"collection":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article"}],"about":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/types\/bricks_article"}],"author":[{"embeddable":true,"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/users\/1"}],"version-history":[{"count":11,"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article\/2437\/revisions"}],"predecessor-version":[{"id":2790,"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article\/2437\/revisions\/2790"}],"wp:attachment":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/media?parent=2437"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}