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.

  • Congrats on your first WP Plugin! Hope you come back for more! :) Apr 12, 2011 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 :)
    – Scott
    Apr 13, 2011 at 10:08

3 Answers 3


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'));

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.

  • This is the way I would recommend doing it - though I agree with Rarst's suggestion regarding use of add_options_page(). Apr 12, 2011 at 21:07
  • Yep, this would also work nicely. You forgot jquery dependency (part of question).
    – Rarst
    Apr 12, 2011 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, 2011 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...
    – Scott
    Apr 13, 2011 at 9:47

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

  • 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
    – Scott
    Apr 13, 2011 at 10:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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