Conditionally Load Files in the WordPress Dashboard

Often times when developing plugins we like to include our own javascript and css files. Most of the time we want those files loaded only onto our plugin page, and not across our entire wp_admin backend. Just enqueue’ing the files across our entire dashboard is both irresponsible and bad practice. When doing this, you will often run into conflicting scripts or styles that override one another from other plugins or themes. Luckily for us there is a method to allow us to only enqueue and load files that we need, where we need them. Using this method we can conditionally load files in the WordPress dashboard. Loading those files only on the pages that actually use them is good practice and can actually decrease page load times on your dashboard. We all like a fast dashboard!

Enqueue The Files

Before we can do anything with out custom JS and CSS files, we first have to tell WordPress that we are going to load a file (style or script) and then we have to register the file. We can do so very simply by doing the following:

As you can see, we are writing a function that handles the loading of our style ‘our-custom-style.css’. First we register the style, which basically tells WordPress ‘Hey, we have this file that we are going to use at some point. I’m letting you know that it exists and to expect it.’ Then we actually load the style with wp_enqueue_style. This is telling WordPress ‘Here’s that script, actually load it this time.’

Enter the $hook Parameter

I had originally learned about this method from Pippin of Pippin’s Plugins in his post titled “Loading Scripts Correctly in the WordPress Admin“. If you don’t know about Pippin I suggest doing a bit of research. He’s big in the WordPress development/plugin community and puts out some really great plugins. He also has amazingly helpful tutorials on his site, where I frequent.

By just placing the above function into your plugin, or themes function.php you will successfully load a .css file onto every page of the admin dashboard. This is what we really want to try and avoid. We can take the function one step further, and add in a parameter that will help us dictate which page of the dashboard were on. The parameter we want to add in is $hook. You can do so by doing the following:

All we did above was add in $hook to the () of our function. This passes in the parameter that grabs the hook name of the page we are on. If you want to test it out or want to get the hook name of the current page, simply echo $hook in the function. This will print the hook name of the page that we are on.

Now reload your custom page, and you should see right below the admin bar a string printed of representing the hook name of the current page you are on. Using this information we can actually target this page, and load scripts and styles on this page only. Lets say for example, the $hook was reutnred as ‘top_level_page_custom_plugin’, we could write out our function to conditionally load scripts and styles on this page by writing the following:

Now ‘our-custom-style.css’ will only load on the page ‘top_level_page_custom_plugin’. This is an extremely powerful, yet simple method of conditionally loading scripts and styles on pages.