Header and Footer

Header and Footer WordPress Plug-in lets you to insert whatever you need in to the head and the footer parts of each blog page and before and after the content of posts.

Its main purpose is to add various scripts to track the access to the blog (such as Google Analytics code, the verification code required by Google Webmasters Tools, the Facebook script for the like button or the Twitter one or the Google one for the Google Plus 1 button).

To insert something you have only to copy and paste the code supply by th service you want to use, there is no need to install 5 different plug-ins to integrate 5 external services. Clearly, if you aren’t able to copy and paste following the specific service examples or if they are unclear, keep on using a specific plug-in.

The code to be added on head section or footer section can contain PHP script part as well that will be executed.

Code can be added before or after the posts so you can easily “inject” the AdSense or other advertising network code.

Was it useful to you? Don’t miss a +1 or a like, thank you!

Download

Header and Footer is available on WordPress Plugin Directory.

Quick list of features

(so you can decide to install or not)

  1. Add a custom code (Javascript, CSS, HTML) to the head (<head>) section of every blog web page (eg. Google Analytics, Facebook, …)
  2. Add custom code to the head section only on the home page (eg. Google Webmaster verification code)
  3. Add custom code on the footer (before the </body>) of each blog web page (eg. late loading third party script)
  4. Codes can contain PHP parts that will be executed to add injection logic (minimum programming skills needed)
  5. Add custom code before and after each post content
  6. Add custom code before and after each page content
  7. Optionally add the Facebook og:image tag so a like on a post will be shown with the thumbnail or first post image
  8. Configurable default image for og:image Facebook tag for posts without an image
  9. Facebook og:type tag for home and generic web pages
  10. bbPress compatibility: the og:image tag will be filled with the first forum (see the FAQ)

Disabling Injection on Single Post/Page

The injection can totally be disabled at post or page level. When editing a post where do you want to disable the injection, move under the editor and look for the “header and footer” box: there you’ll have the options to disable the header or the footer injection.

Please note: there is no way, actually, to disable only a selection of the injected content.

The Mobile Context

Since version 1.5.0.

The responsive designs, using the CSS media queries, are enough to adapt a site to the current user device. But when we talk about injection of JavaScript to show ads, we face the problem of non adapting banners and we need to hide them (but the device is required to process the code and load the banner).

In other situations we totally want to remove an injection or replace it with a different one from a different ad provider.

Part of the responsive thing (to adapt the content to the user device) can be done server side, detecting the kind of device is browsing the site (usually we only need to discriminate between phones and the rest of the devices). That detection is made using the “user agent”, a text sent by every device which can be interpreted to distinguish between a phone, a tablet or a desktop browser.

Today, tablet and desktop browser are almost identical, so the server side responsiveness is useful to detect phones and send them only the required content (reducing the page load, the network traffic, the power consumption and increasing the page speed).

Header and Footer provides a specific configuration to inject different things when a phone is detected. Here “mobile” and “phone” are used with the same meaning (sorry).

It detects the phone finding a match between the “user agent” device provided an a list of user agents configurable in the “advanced tab”. A default list of user agents is provided.

When the injections for mobile devices are enabled, they replace the standard ones once a phone is detected.

Mobile Configurations and Snippets

Snippets correctly works on mobile injections, so you can safely use them to define common parts between the different mobile configuration or even between all configurations.

The SEO options

The SEO (Search Engine Optimization) is a little off topic in Header and Footer plugin, anyway I added few options I think are missing on other SEO plugin. I’m not a SEO expert, so if you believe those options can lead to worse SEO performance, leave them disabled.

No-index for home sub pages

I want my home page indexed, of course, but I don’t want Google to add to its index the sub home pages, like:

http://www.myblog.com/page/2

since they are not content page and continuously changes as soon as I add a new article. Setting the option Header and Footer adds a meta tag with no-index indication on such pages.

No-index on search results

I don’t want Google to index search result pages. Your WordPress blog respond with a search results when you invoke it as:

http://www.myblog.com/?s=searchword

It’s not useful to have such URLs indexed since thay can be duplicated content. Setting the option Header and Footer adds ameta tag no-index on pages which responds “true” to the “is_search()” WordPress function.

Canonical tag on home page

Some plugin uses the home page URL (http://www.myblog.com/) with query string parameters (http://www.myblog.com/?a=value) to do special function. Sometime those URLs output the home page that can be indexed by Google (while we don’t want it to happen – it is duplicated content). Activating the canonical tag on home page, the meta tag “canonical” is added to the home page so the blog declares that the official URL for http://www.myblog.com/?a=value is http://www.myblog.com/ and Google considers only the latter.

F.A.Q.

About bbPress and og:image Facebook tag: where have I to add the image?

Creating a forum is like creating a post. Add an image from the forum editing panel (even if without inserting it on the forum description) and that image will be used.

Does the plug-in generate the other og: Facebook tags (not mentioned above)?

Actually not.

What image is used for the og:image tag on home page?

If a default image is specified, that one.

I added PHP but it will be printed out than executed.

PHP must be add this way: <?php some code ?>. It can spans multiple lines.

Usage

All posts about Header and Footer can be found under the tag “header footer“.

It’s so simple that this paragraph is not really useful, but… here a screen shot of the configuration panel with values I’m using in a my blog.

header-footer-1

There are themes which fo not have the “wp_footer” call, or have the footer crypted: check the source of generated pages to see if the code you configured is injected or not. Other plugins that add such kind of codes in the footer may have the same problem!

The image below is the source of an internal page of a my blog: the Analytics code is there.

header-footer-2

Using PHP code

PHP code can be used on footer and header configuration to add specific logic and control what will be inserted. The classical example is to avoid Google Analytics code while the admin is logged in.

Here an example directly from my blog:

<? if (!is_user_logged_in()) { ?>
<script type="text/javascript">
...GOOGLE ANALYTICS CODE...
</script>
<? } ?>

The surrounding

<? if (!is_user_logged_in()) { ?>

and

<? } ?>

let the code to be added only when a user is not logged in. Clearly this logic is good only for blog which have only an administrator, not the ones having lot of registered people that has to be tracked.

Versions and more

Everithing I wrote about Header and Footer plugin can be found under the tag “header footer“.


33 thoughts on “Header and Footer

  1. Pingback: Header and Footer | WP Plugin Directory

  2. freshwater

    being new, can you give me some “code” examples that work that i can place in the footer section? with some examples, i or other beginner can see how your plug in works. i don’t have ability to write code but i can copy and paste then change some values in the existent code like color, font, box size, image… i was hoping to put in a nice footer. and maybe your header can take a slider? here’s what i just put together as a base site http://dryduffelbags.com/

    thank you!

    tbp

  3. BraveVN

    Can I insert code into each post of difference categories ?
    example:
    1. Category A
    – Post A.1 – Header & Footer code 1
    – Post A.2 – Header & Footer code 1
    – Post A.3 – Header & Footer code 1

    2. Category B
    – Post B.1 – Header & Footer code 2
    – Post B.2 – Header & Footer code 2
    – Post B.3 – Header & Footer code 2
    Please help me.
    Thanks

      1. BraveVN

        Oh, sorry, this is my code:
        if (in_category(‘8′))
        echo ddpl_list(8);
        elseif (in_category(‘9′))
        echo ddpl_list(9);
        elseif (in_category(’11’))
        echo ddpl_list(11);
        else (in_category(’12’))
        echo ddpl_list(12);

  4. effen

    if you want to get rid of the tags and attributes just go on wordpress, editor, and then comments, copy the code so if you dosn’t work just past it on the exact same spot the exact same way… if it does work can you send me the html code for agentpress’s footer

  5. Yang

    Hi, nice plugin. I’m using this to add a footer to my post content. I found that these are only showing up on the website, and not in RSS feeds – any way this could support working on RSS feeds? Thanks in advance.

  6. Steve Hong

    It’s awesome that this plugin recognizes PHP. I’m using it for the same thing you recommend in your examples: hiding Analytics from logged in users.

    The plugin doesn’t work for adding CSS and JS, though, because my custom code is added into the head before other theme styles and scripts are included, ruining the hierarchies and dependencies. You changed it to a high priority in version 1.1.3, for reasons I understand, but this makes it less useful for a wide variety of other cases. I modified the code in plugin.php myself to decrease the priority (changed from 1 to 10): “add_action(‘wp_head’, ‘hefo_wp_head’, 10);”. This makes the custom code appear at the end of the head, after other CSS/JS.

    I’d like to recommend you offer an option to set the priority in the options page. A lot of people could use this for sitewide custom CSS/JS if you made this change. Thanks again for the plugin.

  7. Easy WP SEO

    Thanks a million for your plugin! This is so much better than editing themes and having to copy custom code into templates when you change them. I was going to write my own plugin for this but decided to do a search first. This saved me a ton of time! :D

  8. JUHLi SELBy

    Thank you for sharing this info! I’m a do-it-yourself-er and was trying to figure out how to add Google Analytics to my WordPress site. I appreciate it.

    P.S. Which comment system/plug-in is this? Cool that you can upload a pic!

  9. Chris

    Love your plugin, but I have one problem. I’m using the old Google Analytics tracking code because I need to also use a script to dynamically set up cross-domain link support. The script looks through the page and finds any links pointing to any of the domains I’m doing cross domain tracking on and then wraps them in the necessary code. The problem is that it is not seeing the links in my header because they are generated by JS and that js is somehow getting loaded after the code inserted by your plugin.
    How can I remedy this? Any thoughts?
    Check out the source http://robotmuaythai.com

    1. Steve Hong

      Chris, you have the same problem as I did. Your custom scripts are written into the head before other theme script dependencies. See my other comment for a fix you can make to the plugin.

  10. Evan

    Great plug-in. I didn’t know you could use PHP with it, that’s awesome!

    Have you ever thought about adding some simple hotkey functionality to it? (ex: ctrl-s saves)

    I primarily use this for custom CSS as it’s easier and quicker than updating the style.css or child theme files.

Leave a Reply