How to Add Script to WordPress Page or Post Using Just One Tool

Add script to single post or page

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!

Well, you might want to add script – whether JavaScript or a CSS script – for reasons like enhancing the functionality or altering the look of your website.

For example, you might be adding the Google Analytics code and/or the Facebook Pixel to all the pages and posts of your website, so that you’re able to analyse the nature and movement of traffic to your site.

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, header.php and/or 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 header.php and 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

Thank goodness for WordPress’ generosity, like many other solutions, here too you can use a plugin to add script in the header and/or footer for the entire site, or to individual posts and pages.

Notice, there are 2 main issues on the question of adding script –

  • adding JavaScript or CSS script site-wide, on all pages and posts, and
  • adding JavaScript or CSS script to individual posts and pages.

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.

Add script to post body as explained by WordPress

It’s however a good idea to have the option to insert a script in the footer instead, because that helps you

  1. avoid clutter inside the post,
  2. avoid slowing down of page loading (if there’re too many scripts), and also
  3. 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,

  1. the first one for site-wide script insertion in the header and footer,
  2. 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
  3. 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

Add script - insert header and footer

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.

It's easy to add script with the plugin

B) Header and Footer Scripts -> Site-wide + header on single page / post

Add script with plugin, Header and Footer Scripts

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 the section and before the start of , footer is a sibling of the body element and comes inside the , usually just before the tag.

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.

You can not only add script to headers and footers of individual posts and pages and also site-wide, you can disable or omit the site-wide script on individual posts or pages.

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.

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