How to add own javascript/css file to wordpress plugin menu page?

Question

I want to write my first WordPress plugin and could need some help. I don't know how to add my javascript file to the dashboard area head when clicking on the menu item of my plugin. This is what I've done so far:

1st step: created a directory and a php-file in the wp-content/plugins directory, added the head of the plugin like this:

/* Plugin Name: Test Plugin
Plugin URI: http://my-plugin.com/
Description: test test test
Version: 1.0
Author: me
Author URI: http://my-plugin.com/
License: GPLv2 or later
*/

2nd step: With this function I add my plugins name (top level menu item name) at the bottom of the dashboard menu. I dont even know why the name and the slug name are listed twice. I got that code from: here. I also dont know what "mt-top-level-handle" does. There is no function for it and it still works. "manage_options" is the capability variable which defines the user permissions on this page. (Anyone knows how to make this page accessable for admins,(authors) only? )

add_action( 'admin_menu', 'register_my_menu_item' );
function register_my_menu_item() {
     add_menu_page(__('top level menu item name','slug-name'), __('top level menu item name','slug-name'), 'manage_options', 'mt-top-level-handle', 'my_plugins_page' );
}

3rd step: This simple function displays "Hello World" on the plugins page.

function edit_table_page() {
?>
    <h2>Hello World</h2>
<?php
}

Now I'd like to know how to use my javascript file(s) on that plugins page. I need to add it after the jquery file is loaded.

All I found about adding scripts was this:

add_action('wp_enqueue_scripts', 'my_scripts');
function my_scripts() {
   wp_enqueue_script('jquery'); 
   wp_register_script('my_script', plugins_url('js/my_script.js', __FILE__),array("jquery")); 
   wp_enqueue_script('my_script');
}

That didn't work. So how to do it right? :)

Answer 1

add_menu_page() returns the hookname on success. You can leverage that to enqueue your script on the dynamic load-{$hookname} hook:

add_action( 'admin_menu', 'register_my_menu_item' );
function register_my_menu_item()
{
    $my_plugins_page = add_menu_page(
        __( 'top level menu item name','my_plugin_textdomain' ),
        __( 'top level menu item name', 'my_plugin_textdomain' ),
        'manage_options',
        'mt-top-level-handle',
        'my_plugins_page'
    );
    add_action( 'load-' . $my_plugins_page, 'so20659191_enqueue' );
}

function so20659191_enqueue()
{
    wp_enqueue_script( 'my_script', plugins_url( 'js/my_script.js', __FILE__ ), array( 'jquery' ), null, true );
}

function my_plugins_page() {
?>
    <h2>Hello World</h2>
<?php
}

Answer 2

Found a solution! adding js-files:

add_action('admin_enqueue_scripts', 'my_scripts'); // add scripts to dashboard head
function my_scripts() {
    wp_enqueue_script('jquery'); 
    wp_register_script('my_script', plugins_url('js/my_script.js', __FILE__),array("jquery")); 
    wp_enqueue_script('my_script');    
}

adding CSS File:

add_action('admin_enqueue_scripts', 'my_styles');
function my_styles() {
    wp_register_style( 'custom_wp_admin_css', plugins_url('my-plugin/css/style.css'));
    wp_enqueue_style( 'custom_wp_admin_css' );
}