Take the 2-minute tour ×

I have two simple functions that load stuff using wp_enqueue_style() and wp_enqueue_script(), something like these:

function admin_custom_css()
{ wp_enqueue_style( 'stylesheet_name', 'stylesheet.css') }; 

function admin_custom_js 
{ wp_enqueue_script( 'javascript_file', 'script.js') };

... and a few admin pages, created with add_menu_page() and add_submenu_page()

function my_menu() {
   add_menu_page('Page 1', 'bar', 'something', 'else', 'foo');
   add_submenu_page( 'theme_menu', 'Subpage 1', 'Subpage', 'something', 'else', 'foo'); 
add_action('admin_menu', 'my_menu'); 

How do I load my two functions only on these pages?

Right now I'm using:

add_action('admin_init', 'admin_custom_css' ); 
add_action('admin_init', 'admin_custom_js' );  

But it loads my files on every admin page, which is not nice at all.

Can I do this via one simple line in functions.php or have to enqueue them within my pages separately (I prefer the first option strongly, since I'd have to edit a lot of admin-page-creating-functions).


share|improve this question
add comment

5 Answers

up vote 14 down vote accepted

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

   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.

share|improve this answer
add comment

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?

  1. 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

  2. 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(){
        wp_enqueue_script( 'jquery-ui-core' );
        wp_enqueue_script( 'jquery-ui-tabs' );
        // 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' ) );
share|improve this answer
+1 - This is the way to go IMO. The individual namespaced (someaction-$hook) hooks are nice for 1 or 2 actions, but if you're authoring a plugin, you may need to do a lot of different things just on your option page(s) which makes this method really convenient. I usually just add 1 action to the load-$hook hook that fires my option_page_actions function to which I may add many other hooks/filters etc. Because those actions are only called on the page of choice, hooks beyond that point don't need to use the namespaced hooks (as you have shown), which is much more efficient & intuitive. –  Evan Mattson Jun 2 '13 at 16:34
add comment

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.

share|improve this answer
add comment

You could take @tollmanz answer, and expand on it slightly, allowing for conditional usage as well...


/* Add admin pages */   
function my_admin_pages(){
    $menu = array();
    $menu['main_page'] = add_menu_page('Page 1', 'bar', 'something', 'else', 'foo');
    $menu['sub_page'] = add_submenu_page('theme_menu', 'Subpage 1', 'Subpage', 'something', 'else', 'foo');
        if($key == 'main_page'){
            /* Print styles on only the main page. */
            add_action('admin_print_styles-'.$value, 'print_styles');
        /* Print scripts on all of our admin pages. */
        add_action('admin_print_scripts-'.$value, 'print_scripts');
add_action('admin_menu', 'my_admin_pages');
share|improve this answer
add comment

From the documentation:

admin_print_scripts mainly used to echo inline javascript. admin_print_scripts should not be used to enqueue styles or scripts on the admin pages. Use admin_enqueue_scripts instead."

Same with admin_print_styles.

share|improve this answer
add comment

Your Answer


