Wordpress - Why the hell isn't my script loading?

The other day I wrote a post about how to load scripts and styles on the WordPress front and back ends using two different enqueue hooks. If you’re like me, you’ve had some moments where you’ve looked at the way you’ve loaded a file 25 times to make sure you’ve done it the WordPress way, it all looks good, and yet, the file is just not loading.

For me, that’s because I’m hurtling along trying to get to the fun part, I’ve copied and pasted code from another plugin and overlooked that a small bit of it is not doing what is necessary to load the file. For example, enqueueing a script in an enqueue hook (right), but accidentally putting it in the hook that loads it in the admin screen, when you really wanted to load it on the front end (wrong).

No amount of page refreshing is going to fix that. It turns out that there is a lot going on when you enqueue a file. Here are some ways it can go wrong.

Using the Wrong Enqueue Hook – Front or Back End

As I mentioned in my previous post, there are different hooks for loading styles and scripts on the front and back ends. If you’re not using the right hook, your script won’t be loading where it should:

If you’re loading scripts and styles for the front end use the wp_enqueue_scripts hook
If you’re loading scripts for the back end, use admin_enqueue_scripts

Using the Wrong Function to Load the file

Inside the enqueue hook, you use different functions depending on if you are loading CSS or JS. wp_enqueue_style is used to load CSS and wp_enqueue_script is used to load Javascript. If you mismatch the type of script and the function to load it, then the file won’t load, so make sure you’re using the right one!

You’ll end up with something like this:

function clario_enqueue_scripts(){

  wp_enqueue_script('clario-main-js', plugin_dir_url(__FILE__)  . 'assets/main.js', array('jquery'), '0.1', true); // load js

  wp_enqueue_style('clario-main-css', plugin_dir_url(__FILE__)  . 'assets/style.css', array(), '0.1', 'all'); // load css

}
add_action('wp_enqueue_scripts', 'clario_enqueue_scripts'); // enqueue on front end

Unique File Handles

The wp_enqueue_style and wp_enqueue_script functions both take a file handle as a first parameter – that is a pointer to the file that you can use later to reference it.

It has to be unique! That means, unique across the whole code base, including 3rd party plugins, themes etc. If you use a file handle that has previously been used by another script or style, you’ll get funny behaviour and your file probably won’t load.

wp_enqueue_script('clario-main-js', plugin_dir_url(__FILE__)  . 'assets/main.js', array('jquery'), '0.1', true); // file handle should be unique

If you’re not sure whether this is the problem you are facing you can temporarily change the file handle to something random like a string of numbers to see if the file loads eg:

wp_enqueue_script('clario-123456789876543234567', plugin_dir_url(__FILE__)  . 'assets/main.js', array('jquery'), '0.1', true);

Functions to get File Locations

The second parameter to the enqueue functions is the src parameter. It expects “Full URL of the stylesheet, or path of the stylesheet relative to the WordPress root directory.” (from WP documents).

Depending on where in WP you’re trying to load the file (theme, child theme or plugin) you’ll need to use different functions to get the file location:

Plugin or Theme?	Function to get file location	Example
Plugin	plugins_url() OR plugin_dir_url()	plugins_url( ‘assets/style.css’ , __FILE__ ) OR plugin_dir_url(__FILE__) . ‘assets/style.css’
Child Theme	get_stylesheet_uri() OR get_stylesheet_directory_uri()	get_stylesheet_uri() OR get_stylesheet_directory_uri() . ‘/assets/style.css’
Theme	get_template_directory_uri()	get_template_directory_uri() . ‘/assets/style.css’

plugins_url() VS plugins_dir_url()

Here’s a little discussion on plugins_url and plugins_dir_url. They work differently but can be used to the same effect – you just need to be careful you’re doing it right.

get_stylesheet_uri() vs get_stylesheet_directory_uri()

The get_stylesheet_uri() function returns the URL for the main stylesheet that is located in the root of the child theme with the ‘style.css’ portion appended, so if that is the file you want to load, you can just use this function without adding anything to it.

get_stylesheet_directory_uri() returns the root of the active child theme – you can append folders and a file to this to get the full URL.

Trailing Slashes

The plugins functions return trailing slashes, the template and stylesheet directory functions do not.

File Version Number

The fourth parameter to the enqueue functions is version and it sets the version number of the file. You can’t really get it wrong as such, but it is used by WordPress to cache the file for performance reasons.

If you know that your file has loaded but you are not seeing the changes you have made to the file reflected in the site, it might be that WP hasn’t reloaded the file since you made the changes. You can update the file version to get WP to reload it and then refresh the page.

Takeaway

There are a few moving parts to enqueueing scripts and styles in WordPress and also some different ways to achieve the same thing. If you’ve copied and pasted code, or you’re just not getting the desired results, go back and check that you’ve used the right enqueue hook, your file handle is unique, the file URL points to the actual file and that you’ve used the right function to load the script!