0

Within the section of header.php I have a div structure

<div id="header">
<div id="masthead">
<div id="branding">

...

I want to add a div within "branding" - I can do this easily be editing header.php directly. I also think that I can use functions.php to:

add_action('wp_head', 'add_div' );

...

and then echo in the code. Is there any way at all I can define where the code should be echoed though (i.e. tell the add_div function where it should add the code)?

1 Answer 1

2

The wp_head() template tag is intended to fire in the HTML document head, rather than the page header, and is used to output script and stylesheet links and tags, and other similar things in the HTML document head.

It should appear immediately before the closing HTML </head> tag, like so:

<?php wp_head(); ?>
</head>

If you want to be able to output something within the HTML markup itself, you have a couple options:

  1. Use get_header( $slug ) to output a custom header.php in a given context. For example, if you want your extra div to output on static pages, then in page.php, you can call get_header( 'page' ), which will then load header-page.php.
  2. Add in a custom action hook, and then write callbacks for that hook:

    <div id="header">
        <div id="masthead">
            <div id="branding">
                <?php do_action( 'wpse72753_branding_top' ); ?>
    

    Then you can define a callback to hook in to that location:

    function wpse72753_add_branding_div() {
        if ( is_page() ) {
            ?>
            <div><!-- some content --></div>
            <?php
        }
    }
    add_action( 'wpse72753_branding_top', 'wpse72753_add_branding_div' );
    

There may be other similar solutions, but the bottom line is: WordPress doesn't take control over the HTML structure of the presentation layer; that HTML structure is entirely Theme-dependent. So, whatever solution you implement will have to be via the Theme.

Edit

Re: this comment:

Theoretically could you echo JQuery code into the head via functions.php to create the div?

Absolutely! You just need to hook a callback into wp_head:

function wpse72757_add_head_script() {
    if ( ! is_admin() ) {
        ?>
<script type="text/javascript">
// script code goes here
</script>
        <?php
    }
}
add_action( 'wp_head', 'wpse72757_add_head_script' );

This callback would go in functions.php, or in a site Plugin, etc.

9
  • Thank you Chip. You see a little knowledge is a dangerous thing! I suspect editing the theme header.php directly is most straight forward - I need it for all content and from what you say I can only achieve that by editing theme files. Thanks again - appreciate the guidance..
    – Skip
    Nov 15, 2012 at 20:16
  • Supplementary question just occurred to me. Theoretically could you echo JQuery code into the head via functions.php to create the div? I'm most keen to keep theme file editing to a minmum because of the upgrade issue.
    – Skip
    Nov 15, 2012 at 21:07
  • "Theoretically could you echo JQuery code into the head via functions.php to create the div?" - Absolutely! See edited answer. Nov 15, 2012 at 21:14
  • Brilliant Chip thank you. Think there'll be a bit of mileage in this one for me.
    – Skip
    Nov 15, 2012 at 21:21
  • Hi Chip I'm just revisiting this - just looking at your code for functions.php to echo the script into header. Why is there a closing and then opening PHP tag? Also no mention of 'Echo' is that not required in the structure you suggest? I was thinking something like... add_action('wp_head', 'add_div' ); function add_div() { echo '<script type="text/javascript"> $(document).ready(function () { $(... script here); }); </script>'; }
    – Skip
    Nov 30, 2012 at 10:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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