Once you’ve been working on WordPress-based projects for a while, you quickly learn how to properly include stylesheets and JavaScript dependencies for the administrative dashboard or the public-facing aspect of a theme or plugin.

That is, you’re familiar with admin_enqueue_scripts and wp_enqueue_scripts.

And although these two hooks provide a way to segment the way in which scripts are loaded, it’s possible to further optimize how JavaScript dependencies are loaded by only loading them on the page that they are required.

Specifically, there are two ways that you can add JavaScript in WordPress in the dashboard:

First, here’s the standard boilerplate method of registering and enqueueing a JavaScript source for the dashboard:

function custom_register_admin_scripts() {

wp_register_script( 'custom-javascript', get_template_directory_uri() . '/custom.js' );
wp_enqueue_script( 'custom-javascript' );

} // end custom_register_admin_scripts
add_action( 'admin_enqueue_scripts', 'custom_register_admin_scripts' );

I’m assuming you’re familiar with a number of things:

In the function above, the JavaScript source is loaded on every single page in the admin.

Use The Hook

The admin_enqueue_scripts passes a $hook argument to the callback function that indicates the page on which the function is being called. This makes it easy to conditionally include the script for a given page.

For example, say you were to update the function to only load the script on the themes page. Here’s how you’d do it using the $hook argument:

function custom_register_admin_scripts( $hook ) {

if( 'themes.php' == $hook ) {

wp_register_script( 'custom-javascript', get_template_directory_uri() . '/custom.js' );
wp_enqueue_script( 'custom-javascript' );

} // end if

} // end custom_register_admin_scripts
add_action( 'admin_enqueue_scripts', 'custom_register_admin_scripts' );

Clear, right? The $hook argument will typically include the filename of the page.

Get The Current Screen

The second way to do this is to use get_current_screen. This function returns an object that includes information about each page that allows us to retrieve a variety of information about the page that we’re on.

If we were to use get_current_screen() in the function above, the code would look like this:

function custom_register_admin_scripts() {

$screen = get_current_screen();

if( 'themes' == $screen->id ) {

wp_register_script( 'custom-javascript', get_template_directory_uri() . '/tom.js' );
wp_enqueue_script( 'custom-javascript' );

} // end if

} // end custom_register_admin_scripts
add_action( 'admin_enqueue_scripts', 'custom_register_admin_scripts' );

Notice, we’ve dropped the $hook argument and then we’re getting a reference to the current screen by storing it into the $screen variable. From there, we can look at the ID attribute.

Obviously, the ID attribute is a little different that the file path if you opt to use the argument in the first way, but it’s still easy enough.

So which is better?

Here’s the thing: both ways work and achieve the same thing. Usually, I try to make judgement calls on doing stuff like this based on how readable the code.

In this case, they’re nearly the same.

So what it boils down to is the context in which you’re registering the dependencies. If you need more information than just the ID of the page, then go with get_current_screen; otherwise, I think using the $hook argument is the way to go.