9

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?

21

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/

| improve this answer | |
  • Thanks. I will try this. Any other way to do it without adding the header.php? Such as something using preg_replace? – Ramanan Mar 7 '16 at 9:22
  • 1
    You could, if for example you hook onto template_include or 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 use preg_replace that's up to you... – Adam Mar 7 '16 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. – Ramanan Mar 7 '16 at 10:47
  • 2
    Since WordPress 5.2, a standard tag is now available: wp_body_open() : developer.wordpress.org/reference/functions/wp_body_open – Junaid Bhura Jul 26 '19 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.. – Adam Jul 26 '19 at 11:08
4

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;
}
| improve this answer | |
0

Add this code in functions.php

function my_function() {
 echo'<div id="from_my_function"></div>';

}
add_action('wp_head', 'my_function');
| improve this answer | |
  • 14
    This will output inside the <head> not <body>. – cjbj Jul 11 '16 at 10:08
  • 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. – Mohamed Salem Lamiri Feb 1 '18 at 15:30
  • 1
    I 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. – Danger Mar 29 '18 at 17:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.