Enqueueing Scripts on a Custom Top-level Menu Page

by

I’ve created a menu page using the following function:

add_menu_page(
'Nonpareil options',
'Nonpareil options',    
'administrator',    
'nonpareil_theme_options',  
'nonpareil_theme_display'   
);

Now I want to load a js file only on this page. I’m trying to do so properly by enqueueing it only on my new page:

function nonpareil_options_js_enqueue($hook_suffix) {
    if( 'nonpareil_theme_options' != $hook_suffix )
    return;
    wp_enqueue_script( 'nonpareil-options', get_template_directory_uri().'/js/nonpareil-options.js', array('jquery') );
}       
add_action( 'admin_enqueue_scripts', 'nonpareil_options_js_enqueue' );

The script is not being enqueued. I think the issue is probably that $hook_suffix != “nonpareil_theme_options” on my new page, but in that case I have no idea what to put instead. What’s wrong here?

Thank you!

2 Answers
2

You could try replacing 

if( 'nonpareil_theme_options' != $hook )

with 

if( 'toplevel_page_nonpareil_theme_options' != $hook )

if you have the custom menu added like this:

add_action('admin_menu', 'register_custom_menu_page');
function register_custom_menu_page() {
    add_menu_page('Nonpareil options','Nonpareil options',    'administrator',    'nonpareil_theme_options',  'nonpareil_theme_display'   );
}

Edit:

It looks like you are using this admin_enqueue_scripts example in the Codex:

http://codex.wordpress.org/Plugin_API/Action_Reference/admin_enqueue_scripts#Example:_Target_a_Specific_Admin_Page

so in your case the Codex example would be like this:

function nonpareil_options_js_enqueue($hook) {
    if( 'toplevel_page_nonpareil_theme_options' != $hook )
    return;
    wp_enqueue_script( 'nonpareil-options', get_template_directory_uri().'/js/nonpareil-options.js', array('jquery') );
}       
add_action( 'admin_enqueue_scripts', 'nonpareil_options_js_enqueue' );

In the file /wp-admin/admin-header.php you have the following

do_action('admin_enqueue_scripts', $hook_suffix);
do_action("admin_print_scripts-$hook_suffix");
do_action('admin_print_scripts');

so you can see the difference, admin_print_scripts doesn’t take input, but admin_enqueue_scripts does (and this is the filter you are using in your code example).

If you wonder where toplevel_page_ comes from, you can check out the source code for get_plugin_page_hookname() since it is generating the value for $hook_suffix in your case.

Conclusion:

Add toplevel_page_ in front of your menu slug.

Leave a Comment