Wordpress - How do I Enqueue styles/scripts on Certain /wp-admin Pages?
The problem with @tollmanz answer is that since you're hooking off of the -print-styles and -print-scripts hooks, you must generate the HTML to load your scripts manually. This is not optimal, since you don't get the nice dependency and versioning that comes with wp_enqueue_script()
and wp_enqueue_style()
. It also doesn't let you put things in the footer if that's a better place for them.
So, back to the OP's question: what's the best way to ensure that I can enqueue JS / CSS on specific admin pages only?
Hook off the "load-{$my_admin_page}" action to only do things when it's your specific plugin's admin page that's loaded, and then
Hook off the "admin_enqueue_scripts" action to properly add your
wp_enqueue_script
calls.
Seems like a bit of a pain, but it's actually very easy to implement. From the top:
add_action( 'admin_menu', 'add_my_admin_menus' ); // hook so we can add menus to our admin left-hand menu
/**
* Create the administration menus in the left-hand nav and load the JavaScript conditionally only on that page
*/
function add_my_admin_menus(){
$my_page = add_menu_page( 'Page Title', 'Menu Title', MY_ADMIN_CAPABILITY, 'menu-slug', 'show_page_content' );
// Load the JS conditionally
add_action( 'load-' . $my_page, 'load_admin_js' );
}
// This function is only called when our plugin's page loads!
function load_admin_js(){
// Unfortunately we can't just enqueue our scripts here - it's too early. So register against the proper action hook to do it
add_action( 'admin_enqueue_scripts', 'enqueue_admin_js' );
}
function enqueue_admin_js(){
// Isn't it nice to use dependencies and the already registered core js files?
wp_enqueue_script( 'my-script', INCLUDES_URI . '/js/my_script.js', array( 'jquery-ui-core', 'jquery-ui-tabs' ) );
}
}
add_menu_page
and add_submenu_page
both return the page's "hook suffix", which can be used to identify the page with certain hooks. As such, you can use that suffix in combination with the variable hooks admin_print_styles-{$hook_suffix}
and admin_print_scripts-{$hook_suffix}
to specifically target these pages.
function my_menu() {
$menu = add_menu_page( 'Page 1', 'bar', 'something', 'else', 'foo' );
$submenu = add_submenu_page( 'theme_menu', 'Subpage 1', 'Subpage', 'something', 'else', 'foo' );
add_action( 'admin_print_styles-' . $menu, 'admin_custom_css' );
add_action( 'admin_print_styles-' . $submenu, 'admin_custom_css' );
add_action( 'admin_print_scripts-' . $menu, 'admin_custom_js' );
add_action( 'admin_print_scripts-' . $submenu, 'admin_custom_js' );
}
I find this to be a clean method for adding all of this because it's all handled within the one function. If you decide to remove this functionality, simply remove the call to the one function.
If you use get_current_screen()
, you can detect what the page you're on is. There is an example in the codex article that I linked which shows how to use get_current_screen()
with add_options_page()
, this method will work for any admin page.