Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question
    
Congrats on your first WP Plugin! Hope you come back for more! :) –  John P Bloch Apr 12 '11 at 21:27
    
Thanks John. This plugin is a fork of one that the developer has dropped support for. The plugin is incredibly useful in my area of web development and support but the plugin is lacking some key features that I'm now building in. I am however building the plugin from scratch. I'm sure I will have many more questions to submit here soon :) –  Brady Apr 13 '11 at 10:08
add comment

3 Answers 3

up vote 4 down vote accepted

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'));
}
share|improve this answer
add comment

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.

share|improve this answer
    
This is the way I would recommend doing it - though I agree with Rarst's suggestion regarding use of add_options_page(). –  Chip Bennett Apr 12 '11 at 21:07
    
Yep, this would also work nicely. You forgot jquery dependency (part of question). –  Rarst Apr 12 '11 at 21:20
    
@Chip: did i post anything saying you should use something else? add_management_page() works the same, just adds the new created sub page to tolls menu instead of options. –  Bainternet Apr 12 '11 at 21:20
    
Thanks for your input on using admin_print_scripts-$page I've used this but awarded the answer to Rarst as he covered a number of other things I was after and he was first in... –  Brady Apr 13 '11 at 9:47
add comment

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

share|improve this answer
    
Thanks t3los. Yes I'm in a class and I've already been able to do what you've put from the examples above. But plus one for wrapping it all up for me and making me aware that I can put the initial add_action in the __construct of my class rather than after initializing my plugin class –  Brady Apr 13 '11 at 10:05
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.