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.
What’s more, Avada has a specific space to add tracking scripts like Google analytics. See the screenshot below.
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).
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.
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.
- Plugins that add header and footer scripts sitewide, like Avada and Genesis.
- Plugins that add the scripts only on specific posts or pages.
- 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
footer.php files of your WordPress setup.
The 4 steps with illustrations below explain how you can do this without using a plugin.
- The first step to do this will be to create a child theme following these detail actions.
- The second step will be to copy the
header.phpfile from the parent theme on to the child theme. Same for the
footer.phpfile. This step too I’ve explained as in the first step above.
- In the third step, open the
header.phpfile in your WordPress admin from Appearance > Editor.
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.
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.