WordPress has a number of “hooks” that you can use to insert code into different parts of the theme. These hooks remove the need to manually modify the theme files. Using this, we can do all kinds of cool things like inserting custom content into the header, the title, and the footer. For example, I’d recently explained how to add an image before the title.
But one hook that’s been lacking so far in WordPress, is the ability to add code just after the <body> tag. This is particularly needed when using a tool like the Google Tag Manager. In the absence of this hook, developers have needed to use all kinds of workarounds. Some theme frameworks like Genesis, have their own body hooks that make this easy, but everyone else had to struggle a bit, or break standard best practices.
For reference, this is how Genesis allows us to insert code under the <body> tag with the Genesis Simple Hooks plugin:
That finally changes with the release of WordPress 5.2. We now have a new action hook for the body called “wp_body_open”, and all new themes going forward will implement it. In this article, I will show you:
- How to modify your current theme to support “wp_body_open”
- How to use “wp_body_open” to insert content immediately after the <body> tag
Modify your Existing Theme
Because WordPress 5.2 is so new, most themes won’t have an update immediately available that allows us to use wp_body_open. As a result, we need to modify our theme files manually. To do this, navigate to your theme’s folder, and find the file that contains the <body> tag. This will vary from theme to theme. For example, in the standard WordPress themes that come in-built, you’ll find it under “header.php”.
Open the file and locate the “body_class” function that outputs the body HTML tag. On the next line, add the following code:
<?php
if ( function_exists( 'wp_body_open' ) ) {
wp_body_open();
} else {
do_action( 'wp_body_open' );
} ?>
Like this:
Save your changes, and you’re done! Now we’re ready to use the new wp_body_open action to add code just after the <body> tag. You’ll need to watch out though as theme updates can undo this change. Ideally, your theme developer should update the theme to automatically include this code. But if there’s no guarantee that will happen, you should create your own child theme with a separate file containing the modified code.
Using the wp_body_open Hook
In your functions.php file or the place where you insert custom PHP code, paste the following:
function add_code_to_body() {
echo "Code added here";
}
add_action( 'wp_body_open', 'add_code_to_body' );
This is a very simple function that simply spits out “Code added here” after the <body> opening tag. If you don’t know how to add code like this, check out our beginner’s tutorial on adding code snippets to WordPress. Save your changes.
If everything goes well, you should now see the line “Code added here” underneath the body tag like this:
And that’s it! You can now modify the second piece of code to add whatever you want. Javascript with <script> tags are probably the most common use case scenario here, but you can also output inline CSS, especially since HTML 5 allows this. The use case is up to you, and you can insert any content you want. WordPress does recommend however, that you use this tag only for non-visible content and don’t use it for anything that would interrupt the layout of the page.
So now we finally have an in-built system to output code after <body>. WordPress developers who previously had to resort to clumsy workarounds can now breathe a sigh of relief!
I’m a NameHero team member, and an expert on WordPress and web hosting. I’ve been in this industry since 2008. I’ve also developed apps on Android and have written extensive tutorials on managing Linux servers. You can contact me on my website WP-Tweaks.com!
Your wp_body_open Hook doesn’t work. Have you checked it lately?
Hello. thanks for the great explanation.
However, this does not work with Tag Manager code!
Works fine with Tag Manager code, you just have to switch the “_” with ‘_’ because the google tag manager code uses “_” already