Site logo

[Resolved] Adding attributes to body tag using from a custom page template

Home Forums Support [Resolved] Adding attributes to body tag using from a custom page template

Home Forums Support Adding attributes to body tag using from a custom page template

Viewing 15 posts - 1 through 15 (of 22 total)
  • Author
    Posts
  • #2467649
    Charles

    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”>.

    #2467661
    Fernando
    Customer Support

    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.

    #2467667
    Charles

    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.

    #2467684
    Fernando
    Customer Support

    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.

    #2467692
    Charles

    That is just what I am looking for. Thank you Fernand for the help.

    #2467695
    Fernando
    Customer Support

    You’re welcome, Charles!

    #2507123
    Vincenzo

    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.

    #2507174
    David
    Staff
    Customer Support

    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;
    });
    #2507194
    Vincenzo

    Ok. Thank you. Sorry for the distraction.

    #2507394
    David
    Staff
    Customer Support

    No apologies necessary – try my method – let me know if theres something specific you require.

    #2508313
    Vincenzo

    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"';

    #2508373
    David
    Staff
    Customer Support

    Correct for what ? 🙂
    Sorry i am not familiar with what attributes you need to add.

    #2508384
    Vincenzo

    it shouldn’t be?:
    $atts = ‘ID=”123″ data-spy=”scroll” data-target=”.scrollspy”‘;

    #2508394
    David
    Staff
    Customer Support

    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;
    });
    #2508411
    Vincenzo

    Sorry David, maybe I didn’t explain myself well, I was referring to the code of Fernando.

Viewing 15 posts - 1 through 15 (of 22 total)
  • You must be logged in to reply to this topic.