Wordpress: How to add Attribute to body

Question

I want to add Scrollspy support to the nav-menu, for that I have to add extra attributes data-spy="scroll" data-target=".navbar" to the body tag.

Can I do that pragmatically without touching theme files?

tousif · Accepted Answer · 2017-09-04T05:43:10.583

6

One way would be to:- Edit header.php And add those attributes to the body.

Alternative (without editing theme files) way would be to create a plugin which adds a js that adds those attributes to body. Something like this:-

$("body").attr( { data-spy:"scroll", data-target:".navbar" } );

EDIT After viewing Sevi's answers. The most suitable way is

function wp_body_classes( $classes )
{
    $classes[] = '" spy="scroll" data-target=".navbar';

    return $classes;
}
add_filter( 'body_class','wp_body_classes', 999 );

edited Sep 04 '17 at 05:43

answered Sep 01 '17 at 15:31

tousif

749
2
12
31

The WordPress `body_class` filter method is not working for adding data attributes. – Rao Abid Sep 12 '20 at 05:24
1

body_class filter wont work if your theme does not uses it – tousif Nov 09 '20 at 18:58
It's not working at all! The attributes are added inside the class attribute in the form of plain text. The answer of Mat below is the actual answer to this question. – Faisal Alvi Mar 09 '21 at 06:56
This answer is not working 2022, @tousif what do you mean if "your theme does not uses it?" can you please elaborate? or add any code on how can we add `body_class` filter? – Dec 22 '22 at 22:48
It means your body tag does to have > Details here:- https://developer.wordpress.org/reference/functions/body_class/ – tousif Feb 09 '23 at 21:11

score 6 · Answer 2 · answered Sep 03 '17 at 07:56

6

Well, I found solution to my question:

function wp_body_classes( $classes )
{
    $classes[] = '" spy="scroll" data-target=".navbar';

    return $classes;
}
add_filter( 'body_class','wp_body_classes', 999 );

answered Sep 03 '17 at 07:56

Sevi

863
4
15
33

score 1 · Answer 3 · answered Sep 01 '17 at 17:04

Pretty sure this can't be done without editing the theme files. You could try the jQuery method that tousif has mentioned above but I doubt it will work as it will most likely fire after ScrollSpy has been loaded.

Best way to do this is to edit your 'header.php' file and add the attributes to the <body> tag. You shouldn't edit the theme itself though, use a child theme - https://codex.wordpress.org/Child_Themes

Wordpress: How to add Attribute to body

3 Answers3