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 type="text/javascript" src="/scripts/myscript.js"></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 an action to load your javascript will help keep your theme out of trouble.

Example

<?php wp_enqueue_script( 'myscript', get_template_directory_uri() . '/js/myscript.js'); ?>

The code above will add the code needed to load the myscript.js file into the header.php file at the wp_head hook. As you can see I have only included the $handle, everything else is technically optional but probably a good idea to add to make it easier for people editing the theme.

The wp_enqueue_script() function can technically be used in any template file but it’s best to place all your scripts into a single function (like the example below) using the enqueue hook. This will keep things much neater and easier to edit in the future as well as easier to debug issues.

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 – actionused to load scripts in the WP admin

Example:

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.

function my_theme_scripts_function() {
   wp_enqueue_script( 'myscript', get_template_directory_uri() . '/js/myscript.js');
}
add_action('wp_enqueue_scripts','my_theme_scripts_function');
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.
AJ Clarke
This article has 7 comments
    1. AJ Clarke | WPExplorer says:

      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

      Admin
  1. Alan says:

    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?

    1. AJ Clarke | WPExplorer says:

      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.

      Admin
  2. Dan says:

    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

    1. AJ Clarke says:

      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.

      Admin

Leave a Reply