WordPress hook directly after body tag

1 Views

I’m having problems finding the right hook to use for my plugin. I’m trying to add a message to the top of each page by having my plugin add a function. What’s the best hook to use? I want to insert content right after the <body> tag.

EDIT: I know it’s three years later now, but here is a Trac ticket for anyone who is interested: http://core.trac.wordpress.org/ticket/12563

Read More

EDIT: July 31st, 2019

The linked Trac Ticket was closed as this feature was added in WordPress 5.2. You will find the Developer notes for this feature here (requires JavaScript enabled to display):

Miscellaneous Developer Updates in 5.2

I will not update the “correct answer” to one that mentions 5.2 for historical reasons, but rest assured that I’m aware and that the built-in hook is the correct one to use.

Post Views: 1

Related posts

Leave a Reply

9 comments

  1. Alternatively, if you are creating the theme yourself and/or can modify it, you can create an action yourself using WordPress’ do_action function. This is also how they create their other hooks. So basically in your theme, you would go where you want to, right after the <body> tag, and do something like:

    do_action('after_body');

    You can also pass arguments to the action callback, see the linked documentation for information.

    Then afterwards, you would simply use the add_action function to hook onto it.

    add_action('after_body', 'my_callback');

    Hope that helps. Sorry if I misunderstood.

  2. WordPress 5.2 or newer:

    Use the wp_body_open hook.

    WordPress 5.1 or older:

    That’s kinda difficult… Most themes don’t have any hooks in that area. You could hook a javascript/html solution into wp_footer and display it at the top of the page… sort of how Stack Overflow does it, or how Twitter does their notifications.

    This is the best reference for all the hooks included in WordPress:
    http://adambrown.info/p/wp_hooks/

  3. Creating custom hook is really easy in WordPress.
    in header.php (or anywhere you may need a hook) locate: 

    <body <?php body_class(); ?>>
<div id="body-container">

    and make it: 

    <body <?php body_class(); ?>>
<?php body_begin(); ?>
<div id="body-container">

    That’s our hook, now let’s make it work.
    In functions.php add:

    function body_begin() {
do_action('body_begin');
}

    Now hook is ready to use, simply add any actions you need in functions.php:

    function my_function() {
/* php code goes here */
}
add_action('body_begin', 'my_function');

    or JavaScript (tracking code etc – this is not the perfect way though, it is a better practice to load JavaScript from .js files, but it is definitely better than adding JavaScript directly to template files):

    function my_function() { ?>
<script>
<!-- JavaScript goes here --!>
</script>
<?php
}
add_action('body_begin', 'my_function');

  4. Changes, changes, changes. So it appears that since March 2019 (from WP 5.2) we have a little nicer way to do this.

    There is a new function wp_body_open(). To support it, your theme has to call this function right after <body> opening tag:

    <html>
  <head>

    ..
    ..

    <?php wp_head(); ?>

  </head>
  <body>

    <?php wp_body_open(); ?>

    ..
    ..

    <?php wp_footer(); ?>

  </body>
</html>

    And then you can use it in the same way you use wp_head or wp_footer hooks to print anything just after <body>.

  5. I searched the internet for answers to the same question but found nothing. I figured out away to to work around it. My plugin infinite Ad Pay is based on this method.

    You need two hooks
    wp_head and wp_footer hook

     

add_action( 'wp_head', 'my_buffer_holder_fxn');

function my_buffer_holder_fxn(){
ob_start()


}


function my_buffer_pour_out_fxn(){

$get_me_buffers  = ob_get_clean();

$pattern ='/<[bB][oO][dD][yY]s[A-Za-z]{2,5}[A-Za-z0-9 "_=-.]+>|<body>/';
ob_start();
if(preg_match($pattern, $get_me_buffers, $get_me_buffers_return)){


$d_new_body_plus =$get_me_buffers_return[0]."<div class='my_below_body_code'> This is below the body text or image or anything you want </div>";

echo preg_replace($pattern, $d_new_body_plus, $get_me_buffers);

}
ob_flush();
}



}

add_action( 'wp_footer', 'my_buffer_pour_out_fxn');


// You can also use the method above to place anything in other sections of WordPress 
//No Javascript used

  6. A very, very, very dirty solution would be:

    /* Insert tracking code or others directly after BODY opens */
add_filter('body_class', 'wps_add_tracking_body', PHP_INT_MAX); // make sure, that's the last filter in the queue
function wps_add_tracking_body($classes) {

  // close <body> tag, insert stuff, open some other tag with senseless variable      
  $classes[] = '"><script> /* do whatever */ </script><noscript></noscript novar="';

  return $classes;
}

  8. I could not find any working example online, but I got one solution and I hope it might help anyone. It is quite simple, just add jquery and do whatever you want. The below example might help anyone.

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

    Here is the website url
    https://wordpress.org/support/topic/add_action-right-after-ltbodygt-tag

    With the help of the above answer, I have made a plugin which directly adds content after the body tag.
    Here is the sample code :

    var wcs_thankyou_msg =  " Your coupon code is <?php echo $post_title; ?>."+"<?php echo get_option('wcs_thankyou_msg'); ?>"

var wcs_scratch_after_text =  "<?php  echo $wcs_scratch_after_text;?>"

var discount_text = "<?php  echo $post_excerpt;?>"

var offer_message = "<?php echo get_option('wcs_offer_text'); ?>" 

var id = "<?php echo $post_id; ?>"



$('body').prepend('<div id="scratch_main"><div class="scratch_open">'+offer_message+'</div><div id="scratchmain" style="overflow:hidden;"><div class="scratchinnermain"><div class="scratch_text"><div class="scratch_close"></div><div class="scratchtxtstl">'+wcs_top_text+'</div><div class="scratchtxtstl2">'+wcs_top_text_h2+'</div><div id="wscratchpad" class="scratch_img"><div id="scratchBg" class="scratchpad"></div><div class="scratch_offer" style="display:none">'+discount_text+'</div></div></div><div class="scratch_form"><div id="thankYouDiv" style="display:none"><div class="scratch_close"></div><div class="form_txt1">'+wcs_thankyou_msg+'</div></div><div class="scratchinnermain" id="scratchinnermain" style="display:none"><div class="form_txt1">'+wcs_scratch_after_text+'</div><div class="scratch_form_main"><div id="returnmessage"></div><div id="ajax-loading-wp">Sending, Please wait...</div><form id="mycontactform" action="" method="post"><div class="clear_input"><div class="label">Name :</div><div class="wc_input"><input id="name" type="text" name="name"/></div></div><div class="clear_input"><div class="label">Email :</div><div class="wc_input"><input id="email" type="text" name="email"/><input id="submit" type="button" value="send" class="register_btn"/></div></div></form></div></div></div></div></div></div>');

});

    The most amazing thing is that I don’t know how I have done the above code in an easy way, pulling the data dynamic right after the body tag. I hope my answer will help someone and give a better idea.
    Live working example : http://codecanyon.net/item/woocommerce-coupon-scratch-discount/9235287

  9. WordPress has now addressed this by adding the wp_body_open hook in version 5.2. You can now hook or inject into HTML body by doing:

    <?php add_action('wp_body_open', function() { //some code to fire or inject HTML here }); ?>

    Putting this in your functions.php file in your theme might be best for most basic users.