Plugin admin page stylesheet doesn't work

Question

I am trying to style my plugin's admin page. Below is the code is use, but neither the stylesheet nor the script shows up on my page.

add_action( 'admin_init', 'myplugin_admin_init' );
add_action( 'admin_menu', 'myplugin_custom_menu_page' );

function myplugin_custom_menu_page(){
    $page = add_menu_page( 'My Plugin', 'My Plugin', 'manage_options', 'myplugin/myplugin-admin.php', '', plugins_url( 'myplugin/images/icon.png' ), 33 );
     add_action( 'admin_enqueue_scripts' . $page, 'myplugin_admin_styles' );
     add_action( 'admin_enqueue_scripts' . $page, 'myplugin_admin_scripts' );
}

function myplugin_admin_init() {
  wp_register_script( 'myplugin-script', plugins_url( 'myplugin/script.js') );
  wp_register_style( 'myplugin-style', plugins_url('myplugin/stylesheet.css') );
}

function myplugin_admin_styles() {
    wp_enqueue_style( 'myplugin-style' );
}

function myplugin_admin_scripts() {
    wp_enqueue_script( 'myplugin-script' );
}

Any hints would be much appreciated!

Answer 1

An alternative way to add admin scripts/styles only on your plugin's page:

//The add_action to add onto the WordPress menu.
add_action('admin_menu', 'myplugin_custom_menu_page');
function myplugin_custom_menu_page() {
    $GLOBALS['my_plugin_page'] = add_menu_page( 'My Plugin', 'My Plugin', 'manage_options', 'myplugin/myplugin-admin.php', '', plugins_url( 'myplugin/images/icon.png' ), 33 );
}

add_action( 'admin_enqueue_scripts', 'my_enqueue_scripts' );
function my_enqueue_scripts($hook_suffix) {
    if( $GLOBALS['my_plugin_page'] == $hook_suffix ) {
        wp_enqueue_style( 'myplugin-admin', plugins_url('stylesheet.css', __FILE__) );
        wp_enqueue_script( 'myplugin-admin', plugins_url('script.js', __FILE__) ); 
    }
}

In this approach, you don't have to pay attention to screen name. You will always enqueue your scripts for your plugin's page only.