Login/Register
Wordpress: How to add Attribute to body
Asked Answered
Solved wordpressscrollspyaffix
I

3

5

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?

Illogicality answered 1/9, 2017 at 15:26 Comment(0)
A
5

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 );
Apograph answered 1/9, 2017 at 15:31 Comment(5)
The WordPress body_class filter method is not working for adding data attributes. – Popeyed
body_class filter wont work if your theme does not uses it – Apograph
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. – Pantisocracy
This answer is not working 2022, @Apograph 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? – Buddhism
It means your body tag does to have <body <?php body_class(); ?>> Details here:- developer.wordpress.org/reference/functions/body_class – Apograph
I
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 );
Illogicality answered 3/9, 2017 at 7:56 Comment(0)
A
5

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 );
Apograph answered 1/9, 2017 at 15:31 Comment(5)
The WordPress body_class filter method is not working for adding data attributes. – Popeyed
body_class filter wont work if your theme does not uses it – Apograph
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. – Pantisocracy
This answer is not working 2022, @Apograph 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? – Buddhism
It means your body tag does to have <body <?php body_class(); ?>> Details here:- developer.wordpress.org/reference/functions/body_class – Apograph
J
0

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

Justness answered 1/9, 2017 at 17:4 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.