We’ve all been there. Suppose you are writing your post and everything’s going fine. But your realize that there is some something apart from regular content needs to be added to your post’s content. It can be a tracking code, a custom button or even an embed such as a video or a form. In such a case, you either head over to third-party plugins such as code snippets or we hiresomeone to do it for you. In this article, we see how how you can easily add HTML code to <body> in WordPress without using any third-party plugins.
Why add HTML to <body> tag
As I mentioned earlier, there are circumstances when we need to add content to a page in WordPress that are beyond the conventional text or image. It can be of the following types –
- Tracking code
- Third-party form
- Custom table
- Video embed
- Google Map
- …and more
In such a scenario, we need to add custom HTML code to our page’s body. While WordPress has introduced features using which we can add most of the content without using any custom HTML, there is still a requirement for adding custom HTML in a post or a page to add certain functionalities to it.
How to add HTML to <body> in WordPress
Now, let’s take a look at how we can add custom HTML to the <body> tag of our page in WordPress. We’ll go through different methods for both the classic and the block themes. We’ll start from the simplest methods and gradually move towards more code-oriented ones where we might need to edit the theme files. So, let’s get started!
The custom HTML block
The easiest way to add custom HTML in <body> tag in WordPress is the Custom HTML block. We can add HTML anywhere within our page’s content. This feature is one of newer additions to WordPress and was introduced along with the Block Editor in WordPress 5.0.
You can access the Custom HTML block from the inserter in the Edit area of your post or page –
This is the preferable method if you are using the block editor and need to add some custom HTML code insidethe content of your post or page.
The “Text” tab
After the block editor, we now take look at how to add custom HTML to our content in the Classic Editor. When you go to the edit area of a post or page, you’ll se there are two tabs at the top right part of our WYSIWYG editor –
There are two tabs – Visual and Text. By default, the Visual tab is selected. The Visual tab shows the content as it will be shown on front-end. On the other hand, the Text tab shows the code of the content and replaces the buttons in WYSIWYG editor with quicktags. Here’s how it looks in a conventional WordPress install –
Like the Custom HTML block, this method is also used to add custom HTML to the content of a post or a page.
These were the no code methods. You didn’t need to edit any theme files in order to add custom HTML to your content. From now on, the methods we are going to discuss will require you to have a basic understanding of WordPress code and access to theme files. Let’s move on.
“the_content” filter hook
In this method, we use the the_content filter hook to modify the content of our page. Assuming you have a conventional WordPress installation, add the following code to your functions.php –
|
1 2 3 4 5 6 7 8 9 10 11 12 |
function my_theme_add_html_content($content) { $custom_html = '<p>HTML code to be loaded after page content</p>'; if (is_single()) { $content .= $custom_html; } return $content; } add_filter('the_content', 'my_theme_add_html_content'); |
In the code above, we added the following HTML snippet <p>HTML code to be loaded after page content</p> after our page’s content. This filter hook is especially useful if you plan on adding custom HTML content. Note that while we are using this hook to add custom HTML to our page’s content, the primary function of this hook is to modify content on a post page. We can customize our page’s content as per our requirement using this hook.
One limitation of this hook is that it is limited to sinle post type pages. It is not that effective in archive or search pages.
wp_body_open
This hook is also an effective way of adding custom HTML code to page’s body just after the opening <body> tag. Consider the following code –
|
1 2 3 4 5 6 7 |
function my_theme_add_html_content() { $custom_html = '<p>HTML code to be loaded before page content</p>'; echo $custom_html; } add_action('wp_body_open', 'my_theme_add_html_content'); |
This hook adds custom HTML content just after the <body> tag. The resulting HTML of our page in the browser should be something like this –
|
1 2 3 4 5 6 7 8 |
<body> <p>HTML code to be loaded before page content</p> . . page content . </body> |
You’ll notice our custom HTML gets added right after the opening <body> tag.
wp_footer
Another hook used to add custom HTML to our page is the wp_footer action hook. While the wp_body_open hook is used to add custom HTML just after opening <body> tag, this hooks adds custom HTML right before the closing </body> tag. This is an important hook which loads all the scripts scheduled to be loaded in footer. Consider the following code –
|
1 2 3 4 5 6 7 |
function my_theme_add_html_content() { $custom_html = '<p>HTML code to be loaded at the end</p>'; echo $custom_html; } add_action('wp_footer', 'my_theme_add_html_content'); |
In the code aboce, we hooked the my_theme_add_html_content function to wp_footer action hook to load custom HTML at the end of our page along with ant footer scripts. On inspecting the page in the browser, its HTML should look something like this –
|
1 2 3 4 5 6 7 8 9 10 11 |
<body> . . // page content . <p>HTML code to be loaded at the end</p> . . // footer scripts . </body> |
As you can see, our custom HTML is added at the end just before closing </body> tag along with the footer scripts. This hook is especially useful is you want to add any external script in your site ehich requires the DOM to be loaded.
Conclusion
So, this was it!We went through different methods we can use to add custom HTML to <body> tag in WordPress. While there are other methods we can use to add custom HTML to our pages, these are the most straight forward and easy-to-use and implement. Using these methods, we can add custom HTML code to any part of our page, be it at the top, in the content or even at the end of the page.
Hope you were able to learn something in this article. If you liked this article, do check out our blog. We explore the world of WordPress and share with you tips, tricks and gotchas of WordPress. See you in the next article!
