Adding Javascript to your WordPress theme can be a tricky task, especially if you want to avoid conflicts with plugins or parent WordPress themes. Many developers make the mistake of calling their javascript files directly in the header.php or footer.php file, which is not the correct way of doing it. In this guide, we will show you how to correctly call your javascript files using your functions.php file so that they load right into your site’s head or footer tag. This way, if you are developing a theme for distribution and your end user wants to modify the scripts via a child theme, they can do so easily. Additionally, if they are using minifying/caching or other optimization plugins, they will work correctly.
The Wrong Way to Add Javascript to WordPress Themes
Calling the javascript in your header.php file or footer.php file is not the correct way to add javascript to your WordPress theme. It often causes conflicts with other plugins, and doing things manually when working with a CMS is never a good idea.
The Right Way to Add Javascript to WordPress Themes
The better way to add 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.
For example, the code below will load the my-script.js file on your site:
wp_enqueue_script( ‘my-script’, get_template_directory_uri() . ‘/js/my-script.js’, array(), true );
As you can see, we 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, but if you are loading global scripts, you’ll want to place it either in your theme’s function.php file or in a separate file specifically intended to load scripts on the site. However, if you are only looking to load a script on a specific template file (for example, on gallery posts), you could place the function right in the template file.
WordPress Hosted Scripts
One cool thing about WordPress is that there are already a bunch of scripts hosted by and registered that you can use in your theme development. For example, jQuery, which is used in almost every project, should always be loaded from WordPress and never hosted on a 3rd party site such as Google. So before you add a custom script to your project, check the list of registered scripts to make sure it’s not already included in WordPress. If it is, you should load that one as opposed to registering your own.
Using the WordPress Enqueue Hook
When working with non-template files such as your functions.php file, you should be adding the function inside another function hooked into the proper WordPress hooks. This way, your scripts get registered with all the other scripts registered by WordPress, 3rd party plugins, and your parent theme when using a child theme.
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:
function myprefix_enqueue_scripts() {
wp_enqueue_script( ‘my-script’, get_template_directory_uri() . ‘/js/my-script.js’, array(), true );
}
add_action( ‘wp_enqueue_scripts’, ‘myprefix_enqueue_scripts’ );
Note: See how we are using the “get_template_directory_uri” function when defining the location of your script? This function creates a URL to your theme folder. If you are working with a child theme, you will want to use “get_stylesheet_directory_uri” instead so that it points to your child theme and not the parent theme.
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-script’, ‘alert(“hello world”);’, ‘after’ );
}
add_action( ‘wp_enqueue_scripts’, ‘myprefix_add_inline_script’ );
What this will do is add your inline javascript after the previously registered “my-script” script. When using wp_add_inline_script, you can only add inline code either before or after an already registered script. So, if you are trying to modify the code of a particular script, make sure it’s loaded after it. If you just need to add some custom code, you can hook it to the jquery script, which is generally loaded by most WordPress themes. If not, you can use the wp_enqueue_script to load the WordPress hosted version of jQuery.
By using this method, people can easily remove your inline scripts via a child theme or plugin add-on. It keeps all your custom javascript neatly organized and it is parsed by WordPress, which can be safer. If you are using a child theme, you can load your scripts via your functions.php file instead of copying over the header.php or footer.php files over to your child theme.
That said, if you are working in a child theme, you don’t need to do this. You can simply dump your code into your header using the wp_head or the wp_footer hooks.
