How to inject content after <body>
-
23-04-2021 - |
Question
I would like to inject some elements directly after the <body>
tag.
Is that possible using only WordPress hooks?
Solution
Just add a custom hook to your template:
<body>
<?php do_action( 'wpse73370_custom_hook' ); ?>
OTHER TIPS
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
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>');
});
https://wordpress.org/support/topic/add_action-right-after-ltbodygt-tag
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.
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.
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.