Enqueue Wordpress Plugin Admin Panel Scripts

How To Enqueue Wordpress Plugin Admin Scripts Only Where You Need Them

If you're building a Wordpress plugin with an admin panel, only enqueue your scripts/styles on your page

On of my pet peeves with Wordpress plugins is intrusive scripts and styles. They're the biggest contributor to big, slow Wordpress sites, and they give Wordpress a bad name.

When I'm building a plugin with an admin panel, I like to only enqueue my scripts and styles on that page.

Here's how I do it;

1. First, create your admin page

<?php  
add\_action('admin\_menu', 'nwd\_add\_admin\_page');  
function nwd\_add\_admin\_page() {  
  // add top level menu page  
  add\_menu\_page(  
    'My Admin Page',  
    'My Admin Page',  
    'manage\_options',  
    'my-admin-page',  
    'admin\_page\_html'  
  )  
}  

This code will add a top level menu item 'My Admin Page', which will display the HTML returned by the callback 'admin_page_html'

You may also want to create a submenu page which will be slightly different code.

2. Enqueue your scripts and styles cleverly

<?php  

add\_action('admin\_enqueue\_scripts', 'nwd\_admin\_enqueue\_scripts');  

public function nwd\_admin\_enqueue\_scripts($screen) {  
  // Check the $screen variable to see what page we're on  
  // if you created a top level page in the previous step  
  // $screen should be toplevel\_page\_$slug  
  // If $screen doesn't match, we will quit so we don't   
  // pollute the whole admin with our scripts/styles  


  // Quit if it's not our screen  
  if('toplevel\_page\_my-admin-page' !== $screen) return;  

  // If we get this far, it must be our screen  
  // Enqueue our assets  
  wp\_enqueue\_script('my-admin-page', plugin\_dir\_url( \_\_FILE\_\_ ) . 'assets/js/admin.js', array(), null, true);  
}  

This code is how you're probably already adding scripts, but the small difference is we check the $screen variable to see if we are on the right screen.

Wordpress will pass the $screen variable in when it calls your enqueue scripts function, and you can use this to check which admin page you're on.

Clever!