Head, Footer and Injections

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 and Support

Header and Footer is available on WordPress Plugin Directory, for support post your issue here.

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

Deprecated since version 3.2.0.

The detection of mobile devices, to inject a different set of codes, is made server side. Today is no more recommended, responsive code, both HTML and JavaScript, is the correct way to deal with mobile devices.

See here an example.

In most cases snippets provided by external platforms (Google, AddThis, Facebook, …) are already mobile-aware and do not need distinction on site side. Actually, they’re now mobile-first.

Anyway the mobile configuration and the detection rules are still working and they work this way: when a mobile device is detected, if a configuration has a “mobile” version and this version is enabled, the last one is used. Otherwise the “desktop” one is activated.

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:

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:

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 ( with query string parameters ( 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 is and Google considers only the latter.

Advanced features

Style id removal for CSS merge

WordPress has a fantastic feature we can name “style queue”. Every plugin that needs to add its style to the page can ask WordPress to “enqueue” it and WordPress will add it correctly.

But WordPress adds even an unique id to this CSS so every module or plugin that tries to merge the CSS is usually blocked. Giving a unique id to a style resource means that someone could reference to it, while a merge destroys that uniqueness.

Usually the id is not used at all and if removed the CSS merge can take place. For example the mod_pagespeed requires that id to be removed otherwise it won’t merge the styles.

(it require the compression to be removed as well, so if you use a cache plugin disable the compression if you’re using mod_pagespeed).

Media removal for CSS merge

If you read the paragraph above, you should know that another CSS link attribute can affect the merge and it is the “media” attribute. The media attribute is mainly used to add a set of style to change the appearance of the page when printing even if a lot of more options and uses are available.

Usually all plugins add the CSS with the “media” attribute set to “all”, and all them can be merged. But there are plugin which adds the CSS with media set to “screen” which can be important or not in your blog (read more here about media types).

If removing the media attribute if not a problem in your blog, you should benefit for a more wide merge of the styles. Anyway the “print” media type is preserved.


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.


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.


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.


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">
<? } ?>

The surrounding

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


<? } ?>

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“.

27 replies on “Head, Footer and Injections”