How to add custom JavaScript to WordPress


In certain cases, you may require custom JavaScript on your site. Usually to execute this, it will require modification of your theme file.

JavaScript is a programming language that runs not your server but on the users server. This enables developers to do a whole range of things without slowing down your website.

Sometimes you will be requested to copy and paste JavaScript codes on your site to add third party tool. These short scripts usually go to the head section or the foot section before the <\body> tag of your site.

A less intrusive option is to install the “ Header and Footer scripts “. This adds custom JavaScript without the intrusive modification of your theme file.

Let me quickly take you on how to install Header and Footer Script.

Steps to follow;

  • Log on to your WordPress Admin page.
  • Go to Plugins, Select Add new.
  • Search for “Header and Footer Scripts” on the search box.
  • Then, click on “Install now” and activate the plugin.

Mission one completed, Now let’s take a look on how to uploadJavaScript file using Header and Footer Scripts.

Option 1.  Upload a Custom JavaScript file

  • Save the custom JavaScript code(i.e your already written JavaScript code) into a file with the .js format.
  • Upload it into your site to this folder: wp-content/themes/your-theme/js/
  • Then, go to Settings, Select Header and Footer Scripts.

Now you have two options to load the file:

  • Scripts in header (load inside head tag)
  • Scripts in footer (load before closing body tag)

Use the location that match better your needs using this syntax as example:

<script src=”http://www.yoursite.any/wp-content/themes/your-theme/js/file.js”></script>

Click “Save settings” button when you’re done.

Option 2: Load custom JavaScript without a file

Alternatively, you can add your code directly into WordPress without the need for a custom .js file: what you just need is simple copy and paste.

  • Kindly, go to Settings, Select Header and Footer Scripts.
  • Then, copy your JavaScript code and paste it in between the script as shown below

Click “Save settings” button when you’re done.

Also check up some interesting WordPress tutorial;

How To Stop Spam Comment On WordPress



Please enter your comment!
Please enter your name here