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

Is that possible using only WordPress hooks?

  • 1
    Please, Nippysaurus, do it without hacking the heck of what not need to be hacked... @kaiser's the correct answer :)
    – brasofilo
    Nov 21 '12 at 3:45
  • 1
    I'll have to take your word on this ... I ended up going with a child template so didn't end up implementing any of these solutions :) Very new to WordPress development (this is my second site) so its interesting to see how to solve these sort of solutions. Nov 21 '12 at 4:45

Just add a custom hook to your template:

<?php do_action( 'wpse73370_custom_hook' ); ?>

After reading this answer I've made this.

add_action('shutdown', function() {
    if ( is_admin() ) {
    $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() ) {
    $after_body = apply_filters('after_body','');
    $output = preg_replace("/(\<body.*\>)/", "$1".$after_body, $output);
    return $output;

    $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


I could not find any working example online, but I got one solution and I hope it might help anyone.

 jQuery(document).ready( function($) {
  $('body').prepend('<h1>Hello world</h1>');



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(){

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


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

You can create a plugin that is based on JavaScript and uses prependTo in order to place a tag right after the starting body tag. Check this out for a reference.

  • And if the site visitor disabled javascript?
    – Ralf912
    Nov 20 '12 at 23:38
  • 5
    This is the hackiest hack ever :p Nov 20 '12 at 23:53
  • 1
    @Nippysaurus Indeed (+1), but output buffering is nothing better.
    – kaiser
    Nov 21 '12 at 0:41
  • 1
    @kaiser You think of nested output buffering. This is sometimes a bit tricky. Using output buffering with a callback, is not so tricky because the callback will be called on every ob_* function call and before the ob_* function call.
    – Ralf912
    Nov 21 '12 at 19:56

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.