On the website, we usually need to insert code after the body tag. Normally, this is an unseen JavaScript code within a script tag. External services like Google Analytics, Google Tag Manager, Google Adsense, Facebook, etc. provide a script that needs to be added either before the closing of the head tag or after the immediate opening of the body element.
WordPress provides wp_head() action used to inject code before closing the head tag. Similarly, the action wp_footer() helps to add code before the closing of the body element(not after the opening of the body). So far, WordPress developers use wp_footer() to inject code in the body tag. Sometimes developers add code statically after the opening of the body element. But, both these options are not recommended.
Adding code statically makes sense as per recommendations from external services. But this technique would stop us from updating a theme.
Fortunately, WordPress 5.2 introduces a new action called wp_body_open(). This method triggers wp_body_open action and is used to place code after the opening of the body element. Let’s see how we can do this.
Add Code After the Body Tag in WordPress
If you are using the latest version of WordPress, you should add the wp_body_open() method next to your body tag as shown below. You’ll most probably find the body tag inside the header.php file.
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>After this, you can use the action wp_body_open to inject your code immediately after opening the body tag. Add the below code to your functions.php file.
add_action('wp_body_open', 'add_code_on_body_open');
function add_code_on_body_open() {
echo '<script>Your code here</script>';
}That’s it! It is that simple. This code works well with WordPress version >= 5.2. If you are using an older version of WordPress, you need to also define the wp_body_open method as follows.
if ( ! function_exists( 'wp_body_open' ) ) {
function wp_body_open() {
do_action( 'wp_body_open' );
}
}You may want to put a different script on pages, posts, or categories. In WordPress, you can easily apply such conditions and put scripts accordingly. The below code can be used to have a different script on a page, post, or category.
add_action('wp_body_open', 'add_code_on_body_open');
function add_code_on_body_open() {
if ( is_front_page() ) { // for home page
echo '<script>Your code here</script>';
} elseif ( is_page('PAGE_SLUG') ) { // for specific page
echo '<script>Your code here</script>';
} elseif ( is_single() ) { // for single post
echo '<script>Your code here</script>';
} elseif ( is_category() ) { // for category
echo '<script>Your code here</script>';
}
}This is a clean and efficient way to inject your code after the opening of the body tag. WordPress developers should use this technique on their websites. Read more about the wp_body_open action on the documentation.
Related Articles
- MailChimp Integration in WordPress Without Using a Plugin
- Adding Custom Image Button with Media Uploader in WordPress
- Load Dynamic Content on Bootstrap Modal in WordPress
If you liked this article, then please subscribe to our YouTube Channel for video tutorials.
Hi Sajid, I’ve been trying to run a function on page load, and the way I’ve gone about this is by using in the body tag, but I’m unsure how to get it to work on my WordPress site.
Could you be more clear where I should add the wp_body_open() tag? I’ve tried imbedding a custom HTML element in the webpage through the WordPress editor, although I haven’t been able to get the function to run.
Should I be editing it in the back end instead?
If you know of a better method I could use to run myFunction() on page load, please let me know! Thanks 🙂
Put it inside
header.phpjust after the opening of the body tag.how can this be made so that specific script is called up by specific pages or specific category/terms?
Carl, I updated the code in article for your query.