WordPress Hooks: How to use admin_enqueue_scripts properly

WordPress Hooks are used to modify or interact with a specific code defined at a specific place in WordPress Core, Themes and Plugins.

There are two types of hooks – filters and actions.

Filters allow us to modify data during the execution of some methods or functions within the WordPress Core, Themes and Plugins. When using filter you need to return the modified data.

Actions allow us to execute custom code at a specific place within the WordPress Core, Themes and Plugins. Unlike filters, the action hook do not return anything back.

Filters always have at least one parameter attached to them, that is the parameter that we can modify and send back, while actions may or may not have anything attached to them.

admin_enqueue_scripts

This action hook enqueues scripts for the admin pages. It has one parameter that gives us information about the current admin page on which the hook is executed.

It can be used as follows:

add_action( 'admin_enqueue_scripts', 'load_admin_assets' );

/**
 * Load assets
 *
 * @param  string $location The location where the hook is executed.
 *
 * @return void
 */
 function load_assets( $location ) {
	if ( 'toplevel_page_wpb-settings' !== $location ) {
		return;
	}

	wp_enqueue_style( ... );
  }

If you need to load an asset (script and/or style) only on specific page, you can check if the location where the script executes matches the toplevel slug of the page you want it to load on.

In the example above, I registered a new custom admin page with a slug of ‘wpb-settings’.

add_menu_page(
   __( 'Boilerplate Plugin', 'wpb' ),
   __( 'Boilerplate Plugin Settings', 'wpb' ),
   'administrator',
   'wpb-settings',
   'settings',
  'dashicons-admin-generic'
);

The prefix is always ‘toplevel_page_’. So we check if the current page is not the page we want the script the load, we just return and stop the execution of our function.

You are building a custom plugin and you need a place to start? Checkout WordPress Boilerplate Plugin

This way we don’t overload the admin dashboard with loading assets on pages that do not need that script or style.

Note that you can do this check only with the admin_enqueue_scripts hook and not the wp_enqueue_scripts. The wp_enqueue_scripts hook has no parameters. There is another way to check where to load scripts with the wp_enqueue_scripts hook which I will explain in the next post.