Plugin - Make sure jquery is loaded in my settings page plus my JS file

Question

I'm creating my first wordpress plugin and I'm struggling to find the correct and best way to make sure jquery and my own JS file is included on my settings page of my plugin.

I do not need them to load anywhere else unless on my settings page.

What code and where do I put it in my plugin?

This is what I have so far as for creating the settings page:

add_action("admin_menu", "create_admin_pages");

function create_admin_pages() {
    add_submenu_page('options-general.php', "MYPLUGIN", "MYPLUGIN", 10, "my-plugin", 'settings_page');
}
functions settings_page() {
    // Settings form is here and I need Jquery and my script loaded for this
}

EDIT: The code above is somewhat been dumbed down so not to reveal the plugins function until its ready to be released. The Plugin I'm coding is wrapped in a class so its ok that the function names are generic.

Answer 1

First use add_options_page() - shorter wrapper, better practice.

Second you need to save its return in some (global or static) variable. That is often used thingie and confusingly referenced by different names in documentation. Global $hook_suffix holds such value for current page.

function create_admin_pages() {

   global $my_page;

   $my_page = add_options_page(...

From there it is something like this:

add_action('admin_enqueue_scripts', 'enqueue_script');

function enqueue_script($hook_suffix) {

    global $my_page;

    if ($my_page == $hook_suffix)
        wp_enqueue_script('my_script', plugins_url('my_script.js', __FILE__), array('jquery'));
}

Answer 2

You can admin_print_scripts-{$page} hook to inclue or enqueue your scripts on your page only, something like:

$page = add_management_page( 'myplugin', 'myplugin', 9, __FILE__, 'myplugin_admin_page' );
add_action( "admin_print_scripts-$page", 'myplugin_plugin_add_scripts' );

function myplugin_plugin_add_scripts(){
  wp_enqueue_script('myscript', '/wp-content/plugins/myplugin/myscript.js'); 
}

the same way you can also use admin_print_styles-$page to include your css styles.

Answer 3

If your code is wrapped inside a class, use a class variable to store the plugin's page hook, it'll make for easy reference, and basically do what Rarst is doing but without needing the global statements...

class WPSE_Example_Code {
    private $hook;
    function __construct() {
        add_action( 'admin_menu', array( $this, 'on_admin_menu' ) );
    }
    function on_admin_menu() {
        $this->hook = add_options_page( .. your params .. );
        add_action( 'admin_enqueue_scripts', array( $this, 'on_admin_enqueue_scripts' ) );
        // OR (you'd not need the conditional statement in the function below if using this method)
        // add_action( 'admin_print_scripts-' . $this->hook , array( $this, 'on_admin_enqueue_scripts' ) );
    }
    function on_admin_enqueue_scripts( $hook_suffix ) {
        if( $this->hook != $hook_suffix )
            return;
        wp_enqueue_script( 'your-script-handle', plugins_url( '/yourfilename.js', __FILE__ ), array( 'jquery' ), '1.0', true );
    }
}

Technically speaking, either admin_print_scripts-$hook or admin_enqueue_scripts are both suitable for your use, which you use is really a matter of preference. I tend to use the admin_print_scripts-$hook myself(because i usually only need a script for a single page, it avoids the need to write conditional logic inside the callback, as per my example).