Enqueuing Scripts and Stylesheets on the WordPress Back End

If you’ve been coding WordPress for a bit you’ll know that the right way to load stylesheets and scripts is by using the wp_enqueue_scripts hook which you call from your functions.php file.

Do it in a child theme or a plugin so that you don’t lose your changes when you update your theme.

In the callback to that hook, you can use the wp_enqueue_script function to load scripts (note it’s slightly different to the hook name in that it doesn’t have an ‘s’ on the end) and the wp_enqueue_style function for stylesheets (also no ‘s’ on the end of the function name).

You would 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);

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

}
add_action('wp_enqueue_scripts', 'clario_enqueue_scripts');

Here I’m loading up a stylesheet and a JavaScript file from the assets directory in the root of my plugin directory. I’m using the plugin_dir_url function to get that root directory and appending the rest of the filename.

Dependencies (jQuery)

The third parameter to the wp_enqueue_script function is the dependencies parameter. It is passed as an array. In the array, I’ve specified ‘jquery’ which means my script will load after WordPress loads jQuery and I’ll have access to jQuery in my script file. ‘jquery’ is the handle WP uses to load jQuery which is how I’m using it here.

Loading Scripts and Stylesheets on WordPress Admin Screens

If you’ve tried to add css and javascript to these load files to apply to the WordPress backend, you’ll know it doesn’t work. That’s because WP has a separate function to enqueue scripts for the back end which is called :

function clario_enqueue_admin_scripts(){

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

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

}
add_action('admin_enqueue_scripts', 'clario_enqueue_admin_scripts');

Above I’ve done the same thing as with the front end scripts but I’ve used the admin_enqueue_scripts hook to tell WordPress I want to load these scripts on the back end. Inside the callback I’ve used the same old wp_enqueue_script and wp_enqueue_style functions to load the files.

I’ve created separate JS and CSS files for the admin – you could put them all in the same file and load it for both the admin and front end, but then you’d be loading unnecessarily large files in both cases.

File Handle Conflicts

I’ve also been careful to change the file handles (the first parameter) to the wp_enqueue_script and wp_enqueue_style functions – if you accidentally use a file hand that has previously been used by another file, you’ll get funny behaviour and it’ll be hard to track down. So make sure you keep your file handles unique!

The featured image for this post is by Marcus Ganahl on Unsplash.