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

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:


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

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

My excuses for my bad english but it's the only way I have to communicate with you. Would you suggest a correction? Leave a comment, thank you!


Google Analytics instellen binnen je website? Zo doe je dat · June 24, 2020 at 11:27 am

[…] Insert header & footer (implementatie met code) […]

サーチコンソールで出ているエラーについて | おひとり様TV · June 5, 2020 at 12:43 pm

[…] Header and Footer lets to add html/javascript code to the head and footer and posts of your blog. Some examples are provided on the official page. […]

Come inserire il codice di google Analytics su WordPress – Comly · May 10, 2020 at 9:55 am

[…] editor?” La soluzione piu’ semplice almeno per me è stata usare questo eccellente plugin dalla interfaccia […]

3 smarte Ansätze für Cross-Channel Remarketing auf Facebook und Instagram - adsventure.de · April 27, 2020 at 10:07 am

[…] Header and Footer-Plugin […]

Building a simple analytics and tracking solution for the web using Azure Storage - Tech Daily Chronicle · April 24, 2020 at 2:10 pm

[…] also checked that I can embed the <img> tag easily within this blog. In WordPress I use the Satollo plugin that allows me to inject custom content in Head, Footer and Posts under Settings > Header and […]

Building a simple analytics and tracking solution for the web using Azure Storage - Jussi Roine · April 24, 2020 at 1:00 pm

[…] also checked that I can embed the <img> tag easily within this blog. In WordPress I use the Satollo plugin that allows me to custom content in Head, Footer and Posts under Settings > Header and […]

页脚添加备案号 – Funny Muddy · April 19, 2020 at 2:03 pm

[…] 方法一:找一个插件来添加页脚,header, footer and injections,增加如下代码片段: […]

【2020年3月】グーグルアドセンス審査合格した時のブログやテーマを紹介します | ピアノ調律師が米国株とブログを始めてみた · March 15, 2020 at 4:34 am

[…] code to the head and footer and posts of your blog. Some examples are provided on the official page.バージョン 3.1.6 | 作成者: Stefano […]

Essential WordPress Plugins - Mendel · February 24, 2020 at 3:55 pm

[…] strings into clickable link in WordPress. If clicked it will search contents contain same hashtag. Header and Footer – Header and Footer by Stefano Lissa lets to add html/javascript code to the head and footer […]

How to add custom JS script to all WordPress Pages or Posts - graysky.info · January 19, 2020 at 6:49 pm

[…] plugin is available in the WordPress Plugin Directory. Here you can find the plugin description on the developer’s […]

Hyper Cache – WordPress plugin 外掛推薦下載 | WordPress Themes佈景主题 · July 28, 2019 at 8:44 am

[…] 頁眉和頁腳 […]

Head, Footer and Post Injections – Gruppe 49ontop · July 21, 2019 at 6:06 pm

[…] Header and Footer lets to add html/javascript code to the head and footer and posts of your blog. Some examples are provided on the official page. […]

Come inserire i codice di Google Analytics su Wordpress - il Blog di Sebadima · May 6, 2019 at 10:14 am

[…] editor?” La soluzione piu’ semplice almeno per me eì stat usare questo eccellente plugin con una interfaccia […]

Wie du Facebook Retargeting und Website Custom Audiences richtig einsetzt - adsventure.de · January 15, 2019 at 7:09 pm

[…] 1. Header and Footer […]

My favorite WordPress plugins | Philippe Krief's Blog · September 15, 2018 at 1:16 pm

[…] Head, Footer and Post Injections: “Header and Footer” lets to add HTML/javascript code to the head and footer and posts of your blog. Some examples are provided on the official page. […]