Archived topic
Adding attributes to body tag using from a custom page template
21 replies · Started by Charles on December 19, 2022
In a different child theme, I could add body attributes from the top of a custom page template (custom-template.php for example). After moving it over to generate press, I can't find a way to hook in from the top of a custom template to add this. For example, I am trying to add <body id="XXX" data-spy="scroll" data-target=".scrollspy">.
Hi Charles,
To do this, you'll need to use the GP Child theme: https://docs.generatepress.com/article/using-child-theme/
Then, add make a copy of the header.php file in your child theme: https://github.com/tomusborne/generatepress/blob/master/header.php
Then, edit the <body> tag and add your attributes.
Yes I am using a child theme.
....
</head>
<body <?php body_class(); ?> <?php generate_do_microdata( 'body' ); ?>>
<?php
/**
* wp_body_open hook.
.....
But I do not want to attribute on every <body> element. I would just like to hook from my page template into the body element. That way, every page that uses that custom page template will have the correct attributes. The previous framework parent theme I was using just let you write it at the top and would hook into it. Wondering if there is a way I can do that with GeneratePress.
You can change the body tag to this:
<body <?php body_class(); ?> <?php generate_do_microdata( 'body' ); echo apply_filters('body_custom_attributes', ''); ?>>
With this, you can use a filter to add attributes. For instance, to add the attributes to a specific page, you can add this:
function wp_body_custom_attributes( $atts )
{
if( is_page('147') && ! is_admin() ) {
return 'ID="123" data-spy="scroll" data-target=".scrollspy"';
}
return $atts;
}
add_filter( 'body_custom_attributes','wp_body_custom_attributes', 999 );Replace 147 with your page ID.
Adding PHP: https://docs.generatepress.com/article/adding-php/#code-snippets
To get the Page/Post ID, edit the page. In the URL link, the ID should be there.
That is just what I am looking for. Thank you Fernand for the help.
You're welcome, Charles!
I Fernando. I tried your code with the filter to insert an attribute inside body tag but it seems doesn't work at all. Among other things i did a search on body_custom_attributes filter but i didn't find any documentaion either as a Wordpress filter or as a Generatepress filter. If it worked it would be a very useful tool.
Hi there,
you would need to follow the entire topic, as it needs a child theme to edit the themes header.php and add the filter in there. Otherwise it doesn't exist.
Alternatively you can hijack the generate_{$context}_microdata filter:
1. First add this snippet
add_filter('generate_body_microdata', function($data){
$att = '';
$custom_data = apply_filters( 'db_custom_body_attribute', $att );
$data .= ' ' . $custom_data;
return $data;
});This creates a new db_custom_body_attribute filter hook immediately after the microdata in the body
2. Which you can then use like this:
add_filter('db_custom_body_attribute', function($att){
$att = 'data-attr="data rocks"';
return $att;
});Ok. Thank you. Sorry for the distraction.
No apologies necessary - try my method - let me know if theres something specific you require.
I David. I've tried your method and it works fine.
I've used it to insert the 'data-scroll-container' attribute in the body tag to implement Locomotive scroll library on a site developped with Generatepress e Generateblock.
But, beyond my distraction, i was wondering if this line in the previous code is correct:
return 'ID="123" data-spy="scroll" data-target=".scrollspy"';
Correct for what ? :)
Sorry i am not familiar with what attributes you need to add.
it shouldn't be?:
$atts = 'ID="123" data-spy="scroll" data-target=".scrollspy"';
In my second code:
add_filter('db_custom_body_attribute', function($att){
$att = 'data-attr="data rocks"';
return $att;
});You can change that to:
add_filter('db_custom_body_attribute', function($att){
$att = 'ID="123" data-spy="scroll" data-target=".scrollspy"';
return $att;
});Sorry David, maybe I didn't explain myself well, I was referring to the code of Fernando.