Add Javascript to WordPress

WordPress is so extensible that it allows you to easily add new features and functionalities to your website without actually having to redesign your entire theme. Rather you can add the functionality by simply adding plugins. And if the functionality you would like to add is too small to create a plugin (which comprises just a few lines of code), you can use the functions.php file rather than creating a separate plugin.


(Special note: Are you looking for a list of tweaks/tricks you can easily make on your WordPress site without using a plugin? You may refer our guide here:101 WordPress tricks every serious blogger must know.)

The best thing about the functions.php file is that it acts like a plugin, which can be used to add features and extend the functionality of both the theme as well as WordPress installation.

That said, often times while enhancing your website with new features you’ll require adding additional javascript files to your WordPress theme especially if you’re looking to provide a friendlier user experience to your website visitors or if you’re verifying your site with third-party services.

Though you can easily add Javascript code directly to your header.php file, the problem with this method is that it can even cause conflicts with other plugins when they load their own JS scripts.

In this article by CollectiveRay, we take a look at the right way to add javascript to WordPress themes. As WordPress developers, this is one of the things which we will have to do very often.

If you're not confident of tweaking the code yourself, you might want to look at this article to learn how to recruit the best WordPress developer for your business:

Add Custom JavaScript into your WordPress Site

There are multiple ways to add custom Javascript code to your WordPress site, each with their own uses.

  • Embed a new Javascript file to your template (for all pages), such as for adding a 3rd party service such as Google Analytics
  • Add a script into select pages using a plugin such as Headers and Footers
  • Use functions.php to add it as part of the template's output



Adding Javascript to WordPress using plugins

If you would like to simply use a plugin for uploading a javascript to the theme’s header or footer file, ‘Insert Headers and Footers’ plugin could be the right choice for you. As the name says it allows you to add scripts to the header and footer files by hooking into wp_head and wp_footer.

You can download Insert Headers and Footers here.

This plugin is perfect because it allows you to add any script without running any risk of breaking stuff, you don't have to change any code yourself. (Of course, you need to make sure that the actual script is valid). 

Instead of modifying theme files with the custom Javascript, the plugin allows you to insert the code in either the header or the footer of your site. 

After you need to download and install the plugin:

  • Log in to your site's backend or admin.
  • Go to Plugins > Add new
  • Search for "Header and Footer" plugin and click on Install Now.
  • Once it has installed, click on Activate
Headers and footers

Upload a custom Javascript file

  • First you need to prepare the file for inclusion
  • Save your JavaScript code or file into a new test file with the .js extension.
  • Upload it into your site to the following folder: wp-content/themes/<theme-you-are-using>/js/
  • Go to Settings > Insert Headers and Footers.

We now have a couple of choice to load our file:

  1. Scripts in header (load inside head tag)
  2. Scripts in footer (load before closing </body> tag)

Use the location that matches best your specific needs using the following as an example:

<script src="<theme-you-are-using>/js/file.js"></script>
Insert script in head
  • Click on the "Save" button to finish and save.

Load custom JavaScript without a file

The 2nd option you can use us to the code directly into WordPress without the need of using a specific file. This can be used when you are using a 3rd party service, such as Google Analytics, Drip, or other tool which needs some script added to your site.

add script / code directly
  • Once again, click "Save" to finish.

Reload the front-end, and check your website's source to make sure that the code is now showing.

It's also a good idea to browse a few pages to confirm that everything still looks like it is working ok.

Check out more WordPress tips here

JavaScript in Your Template 

To use JavaScript repeatedly within your site, maybe you have created a script or need to add a 3rd party script in all your pages, you can set the call for the JavaScript, or the script itself, in the head of your header.php template file. This should be added between the meta tags and the style sheet link. This is exactly the same as if you were adding JavaScript in any HTML page. 

To "add" the JavaScript file into your site, in the head, you can use the following code:

<script type="text/javascript" src="//"></script>

Make sure that you have defined the type correctly, otherwise your site will not be valid.

You can then add any reference to functions used within the file you just added to the HTML where you need to use it. 

For example, this is an example of using the function you just added.

<h3 class="heading3">
<a href="/<?php the_permalink() ?>" >
Heading goes here</a></h3>
<script type="text/javascript">


Adding Javascript to WordPress using functions.php

The recommended method to add a javascript file to your WordPress theme is by using functions.php file with wp_enqueue_script.

Here’s how to do it.

Just open your functions.php file and copy the below code snippet to it. Make sure you replace the template URL with yours before saving.

function my_theme_scripts_function() {

  wp_enqueue_script( 'myscript', get_template_directory_uri() . '/js/myscript.js');



If you’re using a child theme, you’ll need to use get_stylesheet_directory_uri() instead of get_template_directory_uri()



Need help getting stuff done? Try these affordable top-rated gigs on Fiverr!

fiverr logo


Click here to find experts on WordPress fixes.

Click here if you need to create a full WordPress website.



Download the list of 101 WordPress tricks every blogger should know

101 WordPress tricks

Click here to Download Now

About the Author
David Attard
Author: David AttardWebsite:
David has been working in or around the online / digital industry for the last 18 years. He has vast experience in the software and web design industries and niches surrounding them. As a digital consultant, his focus is on helping businesses get a competitive advantage using a combination of their website and digital platforms available today.

One more thing... Did you know that people who share useful stuff like this post look AWESOME too? ;-)
Please leave a useful comment with your thoughts, then share this on your Facebook group(s) who would find this useful and let's reap the benefits together. Thank you for sharing and being nice!

Featured On

Inc Magazine Logo  

Sitepoint logo  

CSS Tricks logo   

webdesignerdepot logo   WPMU DEV logo   

and many more!



Get Started Now With ShutterstockShutterstock

Best Rated Caching Plugin

Make your website faster 

Monstrous B-Day Party

CLICK HERE for discounts!

Monstrous bday party

How to make your website FAST!

Step-by-step - free email course, how to make your website load in less than 1 second 


The Outstanding HungryJPEG Bundles

AWESOMENESS! Bundles of premium font + graphic packs at more than 96% OFF!  Get a bundle for just $9 - ONLY!

The Hungry JPEG Awesome font bundles


Work with

CollectiveRay (formerly known as DART Creations) is interested in developing partnerships with mutual benefit. If you like the stuff we publish and would like to develop a relationship, we'd be happy to hear from you. Go on - drop us a line - we'd love to hear from you :-)


Disclosure: CollectiveRay is funded personally out of pure passion for helping people working with websites. We do however generate some income through recommendations of products. This means if you click on a link and purchase an item we link to, we will receive a small sum out of that sale. We usually partner with vendors to make your purchase cheaper than buying direct.


InMotion Hosting CollectiveRay Deal

who are we?

CollectiveRay is run by David Attard - working in and around the web design niche for more than 12 years, we provide actionable tips for people who work with and on websites. We also run - a website for drone hobbyists.

David attard

Follow us on Social

Follow us on Facebook   Subscribe to our RSS Feed   Follow us on Twitter


Where are we hosted?

This site is proudly powered by FAST VPS InMotion Servers and given an insane speed thanks to StackPath CDN!

Web Hosting stackpath