1. Skip to note content

   You must log in to vote on the helpfulness of this noteVote results for this note: 3You must log in to vote on the helpfulness of this note

   Contributed by Drew Jaynes — 3 years ago

   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' );
   

2. Skip to note content

   You must log in to vote on the helpfulness of this noteVote results for this note: 2You must log in to vote on the helpfulness of this note

   Contributed by Drew Jaynes — 3 years ago

   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 content

   You must log in to vote on the helpfulness of this noteVote results for this note: 0You must log in to vote on the helpfulness of this note

   Contributed by itskawsar — 8 months ago

   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

4. Skip to note content

   You must log in to vote on the helpfulness of this noteVote results for this note: 0You must log in to vote on the helpfulness of this note

   Contributed by gavleson — 3 months ago

   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:

   $screen = get_current_screen(); 
   print_r($screen);
   

5. Skip to note content

   You must log in to vote on the helpfulness of this noteVote results for this note: 0You must log in to vote on the helpfulness of this note

   Contributed by web2033 — 2 months ago

   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__ ));
   }

Have a note or feedback to contribute?