How to Add Header and Footer Scripts to Entire WordPress Site or Individual Posts & Pages

How to manage header and footer scripts

Some WordPress themes – Avada for example – have specific places to add header and footer scripts.

But, mind you, in these cases, the header and footer scripts that you add are for the entire site.

In the Avada theme – which incidentally is part of Envato’s ThemeForest and is one of the most popular WordPress themes – there is a separate arrangement to add sitewide header and footer scripts.

What’s more, Avada has a specific space to add tracking scripts like Google analytics. See the screenshot below.

Adding header and footer scripts in Avada theme

Similarly, StudioPress Genesis also has separate boxes under Theme Settings to place the header and footer scripts.

Refer the following screenshot (modified a bit to accommodate here).

Header and footer scripts can be added in separate places in Genesis theme

As I mentioned before, in both the above examples, the header and footer scripts are added sitewide, which means they are available on all pages and posts in your WordPress site.

What if you want to add a JavaScript or CSS script on just one specific page or post, which can be a landing page or some other page?

This is not possible with the examples shown above, the solution therefore is to use a plugin to achieve that.

Talking of plugins, there are 3 types of them.

  1. Plugins that add header and footer scripts sitewide, like Avada and Genesis.
  2. Plugins that add the scripts only on specific posts or pages.
  3. Plugins that do both.

I will explain the different types of plugins shortly, first let’s find out how you can add header and footer scripts on themes like this one that does NOT provide any separate place to add them, without needing a plugin.

Adding header and footer scripts to themes without a plugin

The ideal way to add header and footer script in themes that do not give separate place will be to place the codes in the header.php and footer.php files of your WordPress setup.

The 4 steps with illustrations below explain how you can do this without using a plugin.

  1. The first step to do this will be to create a child theme following these detail actions.
  2. The second step will be to copy the header.php file from the parent theme on to the child theme. Same for the footer.php file. This step too I’ve explained as in the first step above.
  3. In the third step, open the header.php file in your WordPress admin from Appearance > Editor.
  4. Finally, the fourth step will be to copy+paste the external scripts like the tracking code, or any other JavaScript or CSS script on to the header.php file.

Let me explain with screenshots how exactly this should be done.

Let’s say I want to use the Serif font Vollkorn SC, and the Sans Serif font Dosis in my website.

So, I go over to Google fonts website, and collect the CSS code as under.

<style>
@import url('https://fonts.googleapis.com/css?family=Dosis|Vollkorn+SC');
</style>

This is the script that I must put inside the header.php file so that the script appears in the header on all pages and posts.

Watch the illustrations below on how to do it.

Read the full post as a subscriber and enjoy these benefits!

  • All the supercool content creation hacks
  • Ready-to-use templates for video, animation, etc.
  • Quick tips to drive your business
  • Mini courses to help you succeed
  • Priority assistance for specific needs, and more..

Scroll to top