How to use the new body/header/footer filters

How To
1

I’m happy to see the new filters that allow classes and data attributes to be added to areas we can’t reach with the builder.

Can someone explain how we use these filters, specifically the body one to add the a class and data attribute to that area:

Thank you

Thank you

2

Hey!

To add a data attribute and class to the body you’d do something like this:

add_filter( 'bricks/body/attributes', function( $attributes ) {

    // Adds a class
    $attributes['class'][] = 'new-class';

    // Adds a data attribute
    $attributes['data-is-body'] = 'y';

    return $attributes;

});

It only works in RC2+ by the way.

2 Likes
3

Thanks Curtis for the code example. But it doesn’t work for me. It gives the wrong HTML:

<body class="page-template-default page page-id-1 brx-body bricks-is-frontend wp-embed-responsive new-class"data-is-body="y">

Hope you can help!

4

@HeroRox What’s wrong in the output? It’s the intended output as per the above code.

1 Like
5

I found it ! Only one of your code example… :stuck_out_tongue_winking_eye:

6

@omega Sorry my mistake. Yes, you are right, there is nothing wrong. Only the missing space between “new-class” and data-is-body knocked me out :crazy_face:

7

Yes. Having a space will be better for readability.

1 Like
8

This worked great.

I didn’t get the header filter example in the academy to work, so thought I was doing things wrong.

This is the example given in the Documentation:

Filter
Filter1432×716 91.5 KB

FIlter output
FIlter output1110×156 25.3 KB

The data attribute was added, but classes aren’t