How to inject content after <body>

1 Views

I would like to inject some elements directly after the <body> tag.

Is that possible using only WordPress hooks?

Post Views: 1

Related posts

Leave a Reply

7 comments

  2. WordPress 5.2.0 introduced the wp_body_open hook (detailed in the WordPress codex)

    // Add code after opening body tag.
add_action( 'wp_body_open', 'wpdoc_add_custom_body_open_code' );
 
function wpdoc_add_custom_body_open_code() {
    echo '<!-- custom code -->';
}

  3. After reading this answer I’ve made this.

    ob_start();
add_action('shutdown', function() {
    if ( is_admin() ) {
        return;
    }
    $final = '';
    $levels = ob_get_level();
    for ($i = 0; $i < $levels; $i++){
        $final .= ob_get_clean();
    }
    echo apply_filters('final_output', $final);
}, 0);

add_filter('final_output', function($output) {  
    if ( is_admin() ) {
        return;
    }       
    $after_body = apply_filters('after_body','');
    $output = preg_replace("/(<body.*>)/", "$1".$after_body, $output);
    return $output;
});

add_filter('after_body',function($after_body){
    $after_body.='<div class="content">My Content</div>';
    return $after_body;
});

    The first two filters “shutdown” and “final_output” are the core functions. Could be part of a plugin. After they are created you can use the new after_body filter to add what you want to the after body.

    In This case i added a simple div, so it ended up like this:

    <body><div class="content">My Content</div>

    And what is also interesting is with this regex you don’t need to worry about damaging what is inside the body. A class for instance or any other thing

  5. If you are using Genesis by StudioPress, there is a hook you can use like the one I use for facebook plugins:

    add_action( 'genesis_before', 'fn_AddFacebook' );
function fn_AddFacebook(){

 $script='
            (function(d, s, id) {
              var js, fjs = d.getElementsByTagName(s)[0];
              if (d.getElementById(id)) return;
              js = d.createElement(s); js.id = id;
              js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8";
              fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));';


    echo $script;
}

    That seems to work for me. It is essentially the exact same thing as adding your own hook, like the #1 answer (which I agree is the best).

    However…. if you are like me, and slap together sites using whatever template the client picked out, I don’t like to add my own hooks like that. I keep all my stuff in a separate directory and link it to the functions.php. So, I would use the jquery solution to just add it to the dom after the load.

    However, I tested Ralf912’s output buffer idea. That’s very cool. I’d say, if you need to make sure your code is executed correctly and on the same page and it’s 100% has to be there, and you don’t want to mess with the template, that’s a good idea.

  7. Yes, it’s quite simple:

    add_action( 'init', 'test_start_buffer', 0, 0 );

function test_start_buffer(){

    ob_start( 'test_get_buffer' );

}

function test_get_buffer( $buffer){

    return preg_replace( '#<body.+>#', '<body>', $buffer);

}

    The first function will register a callback for the output buffering. The second function is the callback and will modify and return the HTML. Please read the PHP manual output bufferuing for more informations.