Adding Javascript To WordPress Themes The Right Way

When I discovered the power of JavaScript I’ve been using it since to enhance my WordPress themes with image sliders, hover animations, drop-down menus…etc.

There is a specific way for adding Javascript to your WordPress theme in order to prevent any conflicts with plugins, the problem is that many theme developers (yes I did this mistake when I was first learning to code WordPress themes) call their javascript files directly in the header.php file instead of the functions.php file.

In this blog post I will show you how to correctly call your javascript files using your functions.php file so they load right into your wp_head tag and also a quick trick for using the Google hosted javascript instead of using the Javascript included with WordPress then the one in the WordPress install.

Wrong Way To Add Javascript To WordPress Themes

Calling the javascript in your header.php file, such as shown below, is NOT the best way and I highly recommend against it because it often times causes conflicts with other plugins that load their own JS scripts.

<script src=""></script>

The Right Way To Add Javascript To WordPress Themes

The better for adding javascript to your WordPress theme is to do so via the functions.php file using wp_enqueue_script. Using the wp_enqueue_scripts action to load your javascript will help keep your theme out of trouble.


wp_enqueue_script( 'my-script', get_stylesheet_directory_uri() . '/js/my-script.js', array(), true );

The code above will load the my-script.js file on your site. As you can see I have only included the $handle but you can also add dependencies for your script, version number and whether to load it in the header or footer (default is header).

The wp_enqueue_script() function can technically be used in any theme or plugin template file (when used in a template file it will load the script in the footer of the site) but it’s best to include it in your functions.php file when using a theme or in a core plugin file when using a plugin via one of the available enqueue hooks to keep everything neat and make it easier for people to remove scrips if needed via a child theme or add-on plugin. This will keep things much neater and easier to edit in the future as well as easier to debug issues. See below for an example of using the theme hooks.

Using The WordPress Enqueue Hook

Fortunately WordPress has two different action hooks you can use for calling your scripts.

  1. wp_enqueue_scripts – action used to load scripts on the front-end
  2. admin_enqueue_scripts – action used to load scripts in the WP admin

Here is an example (that would be added to your functions.php file) of how to create a function and then use the WordPress hook to call your scripts.

 * Enqueue a script
function myprefix_enqueue_scripts() {
    wp_enqueue_script( 'my-script', get_stylesheet_directory_uri() . '/js/my-script.js', array(), true );
add_action( 'wp_enqueue_scripts', 'myprefix_enqueue_scripts' );

Adding Inline Javascript Code

While you can easily paste inline javascript in any template file via the script tag it can be a good idea to also use WordPress hooks for adding your inline code, especially when it’s a core plugin or theme code. Below is an example of adding inline scripts to your site:

function myprefix_add_inline_script() {
    wp_add_inline_script( 'my-inline-js', 'alert("hello world");' );
add_action( 'wp_enqueue_scripts', 'myprefix_add_inline_script' );

By using this method people can easily remove your inline scripts via a child theme or plugin addon, it keeps all your custom javascript neatly organized and it is parsed by WordPress which can be safer.

AJ Clarke
Post Author: AJ Clarke

Hey. My name is AJ and I am the boss around here. I own and operate WPExplorer. A website dedicated to everything I love about WordPress.

Disclosure: This page contains external affiliate links that may result in us receiving a comission if you choose to purchase said product. The opinions on this page are our own. We do not receive payment for positive reviews.
Got something to say? Join the discussion.
  1. stephane says:
    Where do you put the add_action ? in the function.php ?
    • AJ Clarke | WPExplorer says:
      AJ Clarke | WPExplorer
      In functions.php is fine. But also now in WordPress you can enqueue a script on any file without having too hook into wp_enqueue_scripts
  2. stephane says:
    Thanks :)
  3. Do you have to add this code for every file? Is there a way to add multiple files without having to call a function for each one?
    • AJ Clarke | WPExplorer says:
      AJ Clarke | WPExplorer
      You have to use wp_enqueue_script() for each file you want to load, but you can place them all into 1 function and hook into "wp_enqueue_scripts". If you really want I guess you could create an array of the file names you want to load and if they are all in the same location do a foreach loop to go through each of the items in the array so you only use wp_enqueue_script() once.
  4. Hi AJ, For all of us noobs out there, can you detail (and visually illustrate) where "The Action" and the "Example" (both) would be placed? Maybe even break it down to show how the functions file would look after you have added the script? Cheers, Dan
    • AJ Clarke says:
      AJ Clarke
      Hi Dan, I just updated the post a bit, but have a look at the CODEX it explains it much better. You can use the wp_enqueue_script function technically anywhere, however, it's much cleaner to keep it in your functions.php file or a file that is called from the functions.php, because having all the scripts loaded from 1 place makes it easier to troubleshoot, debug and update.

Leave a Reply