In this article, I’ll explain how to add script to your entire WordPress site or on individual pages or posts with just one tool. But first, why add script at all!
Now, the problem is, it’s not easy to add a site-wide script to your WordPress site, unless you’ve access to the template files,
footer.php, and you know how to append codes to those files.
Accessing header.php, footer.php
I’ll soon come to the 'one-tool-does-all' promised above, before that let’s spare a few lines on how to access the
footer.php files (or indeed any other template files).
The best way to go about is to install and activate a child theme, then copy the template files from the main theme to the child theme for making changes in them as needed.
The 4 top reasons to use a child theme are here. You can –
- make your changes portable and replicable,
- forget worrying about losing any customization you made whenever the parent theme is updated without destroying your modifications,
- easily test the changes you make to the website appearance, and
- cut your development time since you are not redoing the whole thing.
Remember though, in the recent releases, WordPress actively warns you not to make any changes in the template files, not even in the CSS file, lest something goes wrong and your website stops functioning properly.
The solution > add script using plugin
Notice, there are 2 main issues on the question of adding script –
There is one point to remember. You may insert JS or CSS in the body of a post or page. See the screenshot below showing WordPress’ instructions.
It’s however a good idea to have the option to insert a script in the footer instead, because that helps you
- avoid clutter inside the post,
- avoid slowing down of page loading (if there’re too many scripts), and also
- locate the script easily in case you want to remove or modify it anytime in the future.
So, let’s look at 3 plugins here (there are many others in fact) for our purpose,
- the first one for site-wide script insertion in the header and footer,
- the second one that allows you to add script site-wide in both header and footer, and also in the header of individual pages and posts, and finally
- the third plugin that lets you add script in the header and footer site-wide and also on individual pages.
A) Insert Headers and Footers -> Only site-wide
This is a simple popular plugin by WPBeginner that solves the basic problem of adding script to the header and footer in the whole site, where none exists in WordPress by default.
This plugin is useful for placing tracking scripts like Google Analytics, Facebook Pixel, etc. for the entire site, but you cannot add script to individual pages.
The screenshot below shows how easy it is to add script in the header and footer.
B) Header and Footer Scripts -> Site-wide + header on single page / post
With this plugin by Digital Liberation, you’ve the added advantage of inserting scripts in the header of individual pages and posts, though you cannot do this in the footer.
This could presumably be because whatever you add in the footer is essentially part of the body in the HTML code.
This means that unlike header which comes in thesection and before the start of
, footer is a sibling of the body element and comes inside the , usually just before the
You may still want to add script to the footer for the reasons I explained above.
We now come to the third plugin, which I explain below.
The advantage with this plugin is that you’ll have granular control over adding scripts to your website.
In other words, if you have added site-wide Google Analytics code, but you DO NOT wish to include it on a certain page or post, you can do that easily on that page or post.
So, let’s check out the plugin.