do_action( 'admin_enqueue_scripts', string $hook_suffix )
Enqueue scripts for all admin pages.
Description
Parameters
- $hook_suffix
-
(string) The current admin page.
Source
Changelog
| Version | Description |
|---|---|
| 2.8.0 | Introduced. |
More Information
admin_enqueue_scripts is the proper hook to use when enqueuing scripts and styles that are meant to be used in the administration panel. Despite the name, it is used for enqueuing both scripts and styles.
It provides a single parameter, $hook_suffix, that informs the current admin page. This should be used to enqueue scripts and styles only in the pages they are going to be used, and avoid adding script and styles to all admin dashboard unnecessarily.
Selectively enqueue a script in the admin
The admin_enqueue_scripts action hook can also be used to target a specific admin page. In this example we are loading a javascript file in the head section of edit.php.
/** * Enqueue a script in the WordPress admin, excluding edit.php. * * @param int $hook Hook suffix for the current admin page. */ function wpdocs_selectively_enqueue_admin_script( $hook ) { if ( 'edit.php' != $hook ) { return; } wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'myscript.js', array(), '1.0' ); } add_action( 'admin_enqueue_scripts', 'wpdocs_selectively_enqueue_admin_script' );Figure out your $hook name
If you are unsure what the $hook name of the current admin page of which you want to conditionally load your script is, add this to your page:
Enqueue a custom stylesheet in the admin
Sometimes you want to load a set of CSS and/or Javascript documents to all admin pages. You can do this from within your plugin or from your themes function file:
/** * Register and enqueue a custom stylesheet in the WordPress admin. */ function wpdocs_enqueue_custom_admin_style() { wp_register_style( 'custom_wp_admin_css', get_template_directory_uri() . '/admin-style.css', false, '1.0.0' ); wp_enqueue_style( 'custom_wp_admin_css' ); } add_action( 'admin_enqueue_scripts', 'wpdocs_enqueue_custom_admin_style' );Another way to load scripts or css in specific admin page by using this function
In this example, we are loading a javascript and a css file in the head section of nav-menus.php page.
function add_script_to_menu_page() { // $pagenow, is a global variable referring to the filename of the current page, // such as ‘admin.php’, ‘post-new.php’ global $pagenow; if ($pagenow != 'nav-menus.php') { return; } // loading css wp_register_style( 'some-css', get_template_directory_uri() . '/css/some.css', false, '1.0.0' ); wp_enqueue_style( 'some-css' ); // loading js wp_register_script( 'some-js', get_template_directory_uri().'/js/some.js', array('jquery-core'), false, true ); wp_enqueue_script( 'some-js' ); } add_action( 'admin_enqueue_scripts', 'add_script_to_menu_page' );Expand full source codeCollapse full source code
Load css and js only on a particular sub-menu page
// custom css and js add_action('admin_enqueue_scripts', 'cstm_css_and_js'); function cstm_css_and_js($hook) { // your-slug => The slug name to refer to this menu used in "add_submenu_page" // tools_page => refers to Tools top menu, so it's a Tools' sub-menu page if ( 'tools_page_your-slug' != $hook ) { return; } wp_enqueue_style('boot_css', plugins_url('inc/bootstrap.css',__FILE__ )); wp_enqueue_script('boot_js', plugins_url('inc/bootstrap.js',__FILE__ )); }