How do I only load a plugin js on it’s settings pages?

1 Views

I have a plugin that is conflicting with some default wordpress functions. In the post and page creating/edit areas. I only need my functions on my settings pages. I have the js file loading in admin, no problem.

Can I tell the script not to load unless I’m viewing the settings pages for my plug?

Post Views: 1

Related posts

Leave a Reply

3 comments

  1. You need to use a plugin page-specific script enqueue hook.

    Edit

    Best-practice method is to use admin_enqueue_scripts-{hook}, rather than admin_print_scirpts-{hook}. But, because you’re targeting your own Plugin’s admin page specifically, either one is perfectly fine.

    The hook to avoid is the “global” admin_print_scripts.

    Original

    The call would look like this:

        /* Using registered $page handle to hook script load */
    add_action('admin_print_scripts-' . $page, 'my_plugin_admin_scripts');

    And you define the $page hook like so:

    $page = add_submenu_page( $args );

    Answer copied directly out of the Codex:

    <?php
add_action( 'admin_init', 'my_plugin_admin_init' );
add_action( 'admin_menu', 'my_plugin_admin_menu' );

function my_plugin_admin_init() {
    /* Register our script. */
    wp_register_script( 'my-plugin-script', plugins_url('/script.js', __FILE__) );
}

function my_plugin_admin_menu() {
    /* Register our plugin page */
    $page = add_submenu_page( 'edit.php', // The parent page of this menu
                              __( 'My Plugin', 'myPlugin' ), // The Menu Title
                              __( 'My Plugin', 'myPlugin' ), // The Page title
              'manage_options', // The capability required for access to this item
              'my_plugin-options', // the slug to use for the page in the URL
                              'my_plugin_manage_menu' // The function to call to render the page
                           );

    /* Using registered $page handle to hook script load */
    add_action('admin_print_scripts-' . $page, 'my_plugin_admin_scripts');
}

function my_plugin_admin_scripts() {
    /*
     * It will be called only on your plugin admin page, enqueue our script here
     */
    wp_enqueue_script( 'my-plugin-script' );
}

function my_plugin_manage_menu() {
    /* Output our admin page */
}
?>

  2. To make your life easier and coding faster (no core file search needed), we’ve written the “Current Admin Info” Plugin.

    This way you can easily see what you get back from the admin globals or the get_current_screen() function, which you then can access using the properties you see in the additional contextual help tabs.

    // See dump
var_dump( get_current_screen()->property );

# @example
// Get the post type
$post_type = get_current_screen()->post_type;
// Get the current parent_file (main menu entry that meets for every submenu)
$parent = get_current_screen()->parent_file;

    enter image description here

    enter image description here

  3. I don’t yet understand why, but according to Codex, you should only use admin_enqueue_scripts to enqueue styles/scripts in the admin. I have an open Question asking why, but haven’t yet received a satisfactory answer. The Codex entry might be in reference to this core dev’s post.

    Here’s how to do it the “correct” way (note: the admin_enqueue_scripts hook should only be called from another hooked function, e.g., as I’ve done in the second code block with admin_menu. If you try to hook admin_enqueue_scripts too early, you’ll get errors):

    add_action('admin_enqueue_scripts', 'YOUR_ENQUEUEING_FUNCTION');
function YOUR_ENQUEUEING_FUNCTION($hook_suffix) {
    global $my_menu_hook_akt;

    // exit function if not on my own options page!
    // $my_menu_hook_akt is generated when creating the options page, e.g.,
    // $my_menu_hook_akt = add_menu_page(...), add_submenu_page(...), etc
    if ($hook_suffix != $my_menu_hook_akt) return;

    $handle = 'my_js';
    wp_register_script($handle, 'http://example.com/path/to/my-javascript.js');
    wp_enqueue_script($handle);
} // function YOUR_ENQUEUEING_FUNCTION

    Below is a fully functional plugin to play around with; it does nothing except inject your javascript file into the <head> of only your options page – 

    <?php
// Plugin Name:0-Menu Test
global $my_menu_hook_akt;

add_action('admin_menu', 'create_menu_akt');
function create_menu_akt() {
    global $my_menu_hook_akt;
    $my_menu_hook_akt = add_menu_page(
        'My Cool Plugin's Title',
        'My Cool Plugin's Name',
        'manage_options',
        'my-cool-plugins-slug',
        'draw_options_page_akt'
    );
    add_action('admin_enqueue_scripts', 'enqueue_only_on_my_page_akt');
} // function create_menu_akt


function enqueue_only_on_my_page_akt($hook_suffix) {
    global $my_menu_hook_akt;

    // exit function if not on my own options page!
    // $my_menu_hook_akt is generated when creating the options page, e.g.,
    // $my_menu_hook_akt = add_menu_page(...), add_submenu_page(...), etc
    if ($hook_suffix != $my_menu_hook_akt) return;

    $handle = 'my_js';
    wp_register_script($handle, 'http://example.com/path/to/my-javascript.js');
    wp_enqueue_script($handle);
} // function enqueue_only_on_my_page_akt


function draw_options_page_akt() {
    // draw your options page
} // function draw_options_page_akt