I am using the Wordpress theme Twenty Twelve (a child of it to be precise).
I want to know how to insert some HTML just after body opening, in just functions.php and not using header.php.
Is that possible?
1
-
For future readers developing their own theme, or with bad/old themes, see this docs note.– WalfJun 14 at 1:30
Add a comment
|
3 Answers
Twenty Twelve does not have any hooks that fire immediately after the opening <body> tag.
Therefore you in your child theme which extends the parent Twenty Twelve theme, copy the header.php across to your child theme directory.
Open the header.php file in your child theme and just after the opening body tag add an action hook which you can then hook onto via your functions.php file.
For example in your twenty-twelve-child/header.php file:
<body <?php body_class(); ?>>
<?php do_action('after_body_open_tag'); ?>
Then in your twenty-twelve-child/functions.php file:
function custom_content_after_body_open_tag() {
?>
<div>My Custom Content</div>
<?php
}
add_action('after_body_open_tag', 'custom_content_after_body_open_tag');
This will then render in your HTML as:
<body>
<div>My Custom Content</div>
Recommended reading:
https://developer.wordpress.org/reference/functions/do_action/
UPDATE: JULY, 2019
As commented by Junaid Bhura from WordPress 5.2 a new theme helper function wp_body_open has been introduced that is intended for use as per the likes of other helper functions wp_head and wp_footer.
For example:
<html>
<head>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<!-- BODY CONTENT HERE -->
<?php wp_footer(); ?>
</body>
</html>
In your theme functions.php file (or suitably elsewhere)
function custom_content_after_body_open_tag() {
?>
<div>My Custom Content</div>
<?php
}
add_action('wp_body_open', 'custom_content_after_body_open_tag');
IMPORTANT
You should ensure that the hook exists within the theme that you are wanting to inject-into as this may not be widely adopted by the community, yet.
If NOT, you will still need to follow the principle of extending the theme with a child theme with the exception that YOU would use:
<?php wp_body_open(); ?>...instead of OR in addition to:
<?php do_action('after_body_open_tag'); ?>
Recommended reading:
https://developer.wordpress.org/reference/functions/wp_body_open/
-
Thanks. I will try this. Any other way to do it without adding the header.php? Such as something using preg_replace?– RamananaMar 7, 2016 at 9:22
-
1You could, if for example you hook onto
template_includeor similar, however it is strongly advised against doing that because not only is it inefficient, it could be very unreliable if something changes in the parent due to an updatge. Extending the parent theme using a child theme is the best practice, it is predictable and expected, plus it gives you a great deal of control, such as using the example shown above. However if you want to usepreg_replacethat's up to you...– AdamMar 7, 2016 at 10:27 -
Thanks once again. I am using your code and works nice. Actually my question was from a child viewpoint only but simply using functions.php of the child theme. But anyway after implementing your code, I realize it's straightforward, lightweight and simple.– RamananaMar 7, 2016 at 10:47
-
4Since WordPress 5.2, a standard tag is now available: wp_body_open() : developer.wordpress.org/reference/functions/wp_body_open Jul 26, 2019 at 0:53
-
@JunaidBhura thank you for your suggestion on this old thread. I have updated the example above to elaborate as to the new core helper function and hook that mau be present in themes and hopefully widely adopted in the future..– AdamJul 26, 2019 at 11:08
A very, very, very dirty solution would be:
/* Insert tracking code or other stuff directly after BODY opens */
add_filter('body_class', 'wps_add_tracking_body', PHP_INT_MAX); // make sure, that's the last filter in the queue
function wps_add_tracking_body($classes) {
// close <body> tag, insert stuff, open some other tag with senseless variable
$classes[] = '"><script> /* do whatever */ </script><noscript></noscript novar="';
return $classes;
}
answered Jul 21, 2017 at 9:48
Add this code in functions.php
function my_function() {
echo'<div id="from_my_function"></div>';
}
add_action('wp_head', 'my_function');
-
19
-
Well wp seems to be smart enough, it is actually added to the body! If it's a meta then it will be injected inside the header otherwise it will be displayed in the body. Feb 1, 2018 at 15:30
-
1I believe @cjbj is correct. It's looks like it's the browser that's moving it to the body, not WordPress. View source on a page where you've inserted in to the head and that's where you'll find it.– DangerMar 29, 2018 at 17:15
-
2Don't do this! This will create invalid HTML by inserting the
<div>in the<head>. The browser will try to fix this by closing the head (inserting</head>) just before the<div>. This can break your page, because everything after the inserted<div>will now be in the body not the head. Feb 10, 2021 at 17:16