• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
NameHero Blog

NameHero Blog

Web Hosting Tips & Resources From NameHero

  • Hosting
    • Web Hosting
    • VPS Hosting
    • WordPress Hosting
    • WooCommerce Hosting
  • Reseller
  • Enterprise
  • Domains
  • Account
  • Blog Home
  • Categories

Add Code To WordPress Body Tag With Version 5.2

Bhagwad Park

Published on: May 8, 2019

Categories: WordPress 3

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:

<img src="https://www.namehero.com/blog/wp-content/uploads/2019/05/Genesis-Simple-Hooks-Body-Tag-1024×546.png" alt="Genesis Simple Hooks plugin allows you to add code under the tag” class=”wp-image-25886″ width=”550″/>

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:

  1. How to modify your current theme to support “wp_body_open”
  2. 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:

Add code to WordPress body tag with new action hook

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:

Code added to body

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!

Bhagwad Park Profile Picture
Bhagwad Park

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!

Reader Interactions

Comments

  1. Stacey says

    July 18, 2019 at 8:32 am

    Your wp_body_open Hook doesn’t work. Have you checked it lately?

    Reply
  2. Gil says

    January 16, 2020 at 11:43 am

    Hello. thanks for the great explanation.
    However, this does not work with Tag Manager code!

    Reply
  3. Nathan Vogele says

    February 20, 2020 at 3:43 pm

    Works fine with Tag Manager code, you just have to switch the “_” with ‘_’ because the google tag manager code uses “_” already

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow & Subscribe

Exclusive promos, content and more!

Most Popular Posts

Speed up your site: solving the WordPress slowdown

NameHero’s Recommended WordPress Plugin and Theme Setup (2023)

How To Increase The InnoDB Buffer Pool Size

How To Fix A Stuck All-in-One WP Migration Import

How To Add A Subdomain In Cloudflare

Top Categories

  • WordPress
  • WordPress Tutorials
  • Enterprise Hosting
  • WooCommerce
  • Web Hosting
  • Resellers
  • Website Security
  • Website Development
  • Website Performance
  • VPS Hosting
  • SEO Tips
  • Announcements
  • Domain Registration
NameHero

NameHero proudly provides web hosting to over 40,000 customers with 99.9% uptime to over 750,000 websites.

  • Master Card
  • Visa
  • American Express
  • Discover
  • Paypal
Products
  • Web Hosting
  • VPS Hosting
  • WordPress Hosting
  • WooCommerce Hosting
  • Reseller Hosting
  • Enterprise Hosting
  • Domains
Help & Support
  • NameHero Blog
  • Support
  • Knowledgebase
  • Announcements
  • Affiliates
Company
  • About Us
  • Contact Sales
  • Reviews
  • Uptime
  • We're Hiring

Copyright © 2023 NameHero, LLC. All rights reserved.

  • Privacy Policy
  • Terms of Use
  • Acceptable Use Policy
  • Payment Policy
  • DMCA