do_action( 'admin_enqueue_scripts', string $hook_suffix )

Enqueue scripts for all admin pages.


Parameters Parameters

$hook_suffix

(string) The current admin page.


Top ↑

More Information 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.


Top ↑

Source Source

File: wp-admin/admin-header.php

View on Trac



Top ↑

Changelog Changelog

Changelog
Version Description
2.8.0 Introduced.

Top ↑

User Contributed Notes User Contributed Notes

  1. Skip to note 1 content
    Contributed by Drew Jaynes

    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 on 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' );
    
  2. Skip to note 3 content
    Contributed by Drew Jaynes

    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' );
    
  3. Skip to note 4 content
    Contributed by itskawsar

    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' );
  4. Skip to note 5 content
    Contributed by Eugene Kopich

    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__ ));
    }
  5. Skip to note 6 content

    What if you want to load CSS, JS to specific pages from your created menu and submenu? ( multiple pages )

    function addPage()
    {
    global $customMenu, $customSubMenu;
            /**
             * Menu
             */
           $customMenu = add_menu_page( 'Custom Menu', 'Custom Menu', 'manage_options', 'custom-menu', 'customMenuPage', '', 10);
            /**
             * Sub Menu Pages
             */
            $customSubMenu = add_submenu_page( 'custom-menu', 'Settings', 'Settings', 'manage_options', 'settings', 'settings_page');
    }
    add_action( 'admin_menu', 'addPage');
      
    /** Enqueue Stylesheets **/
    function enqueueAdminStyles( $hook)
        {
            global $customMenu, $customSubMenu;
            $allowed = array( $customMenu, $customSubMenu);
            if( !in_array( $hook, $allowed)  )
            {
                return;
            }
            wp_enqueue_style( '-main-', 'assets/admin/css/ucsi.css', '', '1');
        }
    add_action( 'admin_enqueue_scripts', 'enqueueAdminStyles');
    

You must log in before being able to contribute a note or feedback.