WordPress 5.2 action that every theme should use

One of the most exiting features in WordPress 5.2 is a simple function that fires an action. But this minor function has a huge impact on theme and plugin developers that inject code to WordPress themes.

History

When WordPress developers want to insert Google Analytics script, Facebook Pixel or any other script to the page frontend, they hook either to the wp_head or the wp_footer actions to inject the code. Those two super useful action hooks allow developers to inject custom code using a simple syntax:

The wp_head() function introduced in WordPress 1.2.0, it fires the wp_head action that adds data to the <head> tag. The wp_footer() function introduced in WordPress 1.5.1, it fires the wp_footer action that adds data to the end of the <body> tag.

The problem is that up until now we couldn’t inject scripts or styles at the beginning of the <body> tag. This was a major drawback in WordPress core as marketers need to register various tracking codes at the beginning of the body tag before any content is displayed.

New Theme Structure

WordPress 5.2 introduces the wp_body_open() function which fires the wp_body_open action. All the default themes use them in their header.php file.

As of WordPress 5.2, the new theme structure should look like that:

Read more information in related WordPress Trac tickets: #42927, #12563 and #46679.

Updating Themes

If you are a theme developer you should add the newly introduces function to your theme.

Note that some themes have multiple <body> tags, depending on their structure. Those kind of themes should add the wp_body_open() next to the <body> tags.

Backwards Compatibility

There are two issues that theme developers may experience and how to overcome them:

Old WordPress Version

If a theme developer will add the wp_body_open() function to the header.php it will work as expected. But if the site is using an older WordPress version that doesn’t have the wp_body_open() function, it will cause a fatal error. You can’t call a function that doesn’t exist.

The simplest solution is to upgrade the theme’s Minimum Required WordPress Version to 5.2, but this won’t provide any backwards compatibility for older version.

To support the new function and action in WordPress versions prior to 5.2, you should register the new function by yourself in the theme’s functions.php file:

Custom Theme Hooks

Many themes use their own custom actions at the beginning of body tag. They should consider migrating to the core wp_body_open action.

For backwards compatibility, when injecting custom code, theme developers can use conditional logic to hook to the right action

Exciting Changes

The future of WordPress is bright. More and more new features are introduced and make the development process easier. If you know of a new function, filter or an action that theme developers should know about, please share in the comments bellow.

Rami Yushuvaev

I'm an entrepreneur, a web developer and a blogger. I’ve contributed code to each and every release since WordPress 2.8. I'm the Hebrew GTE responsible for the translation and the release of WordPress Hebrew version. The founder GenerateWP.com and several other WordPress related projects. I work mainly with Israeli startups and hi-tech companies, providing development services.

12 Comments:

Jonathan

6 years ago

Nice. Could be very useful as a lot of add-ins require some code injected just after the ‘body’ tag (e.g. FB pixel, etc.). May be some examples of when and why you would use this with some practical examples of useful code would be great 🙂

Reply
Wp

6 years ago

Hola. Y qué hay de wp_enqueue_scripts action hook

Reply
Jonathan Dingmanon Dingman

6 years ago

This has been a huge annoyance for a while now for me, I’m glad to see they’re making it official. I’ve had to use custom functions for the time being, just as the backwards compatibility does.

Reply
- Rami Yushuvaev
  
  6 years ago
  
  The original Trac ticket was opened almost 10 years ago. I think many theme developers will be happy to use standard hook supported by WordPress core, instead of using custom workarounds.
  
  Reply
Justin

6 years ago

I ask that you not urge theme authors to migrate their custom hooks. Often, theme hooks are used in child themes for outputting custom HTML (e.g. ad above the header).

This hook is specifically for scripts and such. The WordPress.org theme review team is already building a guideline around not allowing theme authors to utilize it for custom HTML output.

Theme authors will likely want to use both the core hook as well as their custom hooks because their purposes are likely different.

Reply
- Rami Yushuvaev
  
  6 years ago
  
  Justin, please read the discussion in #46743. We should start educating theme developers how to use the new tag.
  
  I didn’t know about the guidelines you are working on. Great news!
  
  Reply
Jake Hawkes

6 years ago

Google Tag Manager anyone! Pretty cool new feature and simple as!

Reply
romapad

6 years ago

Thanks for sharing this!

Reply
Tapio

6 years ago

I don’t understand why I can’t add random HTML.

I would like to add somewhat new widget area, shortcode or just some own PHP code just before or after the HEADER element of my theme (header, which has the id masthead).

I tested this by using Code Snippet plugin.
```
function custom_code(){
	return 'Testikoodia';
}
add_action('wp_body_open', 'custom_code' );
```
That didn’t do anything.

Reply
- Justin
  
  6 years ago
  
  The purpose of this hook is not for custom HTML. It’s for outputting scripts that must come immediately after body. Inserting HTML there can and will break how those scripts work.
  
  Create a custom hook for doing such things that comes *after* wp_body_open.
  
  Reply
- ristikoidenratkoja
  
  6 years ago
  
  I have just added custom PHP with the Code Snippet plugin by using add_filter or add_action.
  I don’t have experience about custom hooks and how to add them.
  
  Using own hooks might need to edit header.php?
  
  Reply
  - Rami Yushuvaev
    
    6 years ago
    
    Try this:
```
function body_open_script() {
    ?>
        <script>
            alert('Body tag...');
        </script>
    <?php
}
add_action( 'wp_body_open', 'body_open_script' );
```
    Reply

Blog