Load plugin scripts and styles only on plugin page

1 Views

Hello wordpress users,

I’m stuck with a problem while running 2 self made WordPress plugins.
I’ll use the following code :

Read More
define('PLUGIN_URL', plugin_dir_url( __FILE__ ));
add_action( 'admin_enqueue_scripts', 'plugin_load_js_and_css' );

function plugin_load_js_and_css() {
        wp_register_style( 'plugin.css', PLUGIN_URL . 'plugin.css', array());
        wp_enqueue_style( 'plugin.css');

        wp_register_script( 'plugin.js', PLUGIN_URL . 'plugin.js', array('jquery'));
        wp_enqueue_script( 'plugin.js' );
    }
}

But it’s loading this stylesheet everywhere in the admin panel.
Now I found this in the codex: 

function my_enqueue($hook) {
    if( 'edit.php' != $hook )
        return;
    wp_enqueue_script( 'my_custom_script', plugins_url('/myscript.js', __FILE__) );
}
add_action( 'admin_enqueue_scripts', 'my_enqueue' );

But this code is not working for my..
Does anyone have a another option? Or maybe know why it’s not working for me?

Post Views: 1

Related posts

Leave a Reply

4 comments

  1. When you register a plugin option page you get a hook from the registration function:

    $hook = add_menu_page(
    'T5 Demo',        // page title
    'T5 Demo',        // menu title
    'manage_options', // capability
    't5-demo',        // menu slug
    'my_render_page'  // callback function
);

    Use this hook to enqueue the scripts and styles:

    add_action( "admin_print_styles-$hook", "my_enqueue_style" );
add_action( "admin_print_scripts-$hook", "my_enqueue_script" );

    See my plugin T5 Admin Menu Demo for an example.

    Do not define a constant PLUGIN_URL. You will run into collisions with other code.

  2. After further research, @fuxia has the best answer, even when using Redux Framework for an admin menu. When using Redux, $hook will be toplevel_page_ concatenated with the value you entered in page_slug in the options-init.php file.

    For example:

    $opt_name = my_option

'page_slug' => $opt_name.'_settings'

add_action( "admin_print_styles-**toplevel_page_my_option_settings**", "my_enqueue_style" );
add_action( "admin_print_scripts-**toplevel_page_my_option_settings**", "my_enqueue_script" );

    Also, if you don’t remember what you set my_option to, just open your Redux admin panel and look at the URL, it should be:

    yoursite/wp-admin/admin.php?page=**my_option_settings**&tab=1

  3. Here is one scenario you might want to take care of!

    • You have multiple pages for your plugin

    Now you want to load your scripts and styles for those pages only!

    How can you do that?

    Solution:

    add_action( 'admin_enqueue_scripts', 'prefix_admin_scripts' );
function prefix_admin_scripts( $hook ){
    // use 
    // wp_die( $hook ); // get your page slugs
    if(
        ( 'current-plugin-page-slug-1' == $hook )
        ||
        ( 'current-plugin-page-slug-2' == $hook )
    ){
        // styles
        wp_register_style();
        wp_enqueue_style();
        // scripts
        wp_register_script();
        wp_enqueue_script();
    }
}

    reason you want to wrap the enqueue functions inside true condition is that, for multiple pages, your if condition will be always true and scripts will be never enqueued. See the example below:

    // inside admin script callback
if(
    ( 'current-plugin-page-slug-1' !== $hook )
     ||
    ( 'current-plugin-page-slug-2' !== $hook )
){
    return;
    // this will not work because at least one of the condition will be true in 
    // your plugins page and scripts will not be enqueued.
    // if you are thinking of using && (AND) operator that will not work either.
    // only way to successfully enqueue your scripts on both of the pages is to
    // wrap the enqueue function inside true condition block!
}
wp_register_style();
wp_enqueue_style();
wp_register_script();
wp_enqueue_script();

    This is a simple situation but for some reason, I was confused for a while.

    I hope this helps anyone!

  4. add_action('admin_enqueue_scripts', 'myplugin_include_static');

function myplugin_include_static()
{
    if (isset($_GET['page']) && sanitize_text_field($_GET['page']) === 'myplugin'):
        wp_enqueue_style( 'myplugin-general-style', plugin_dir_url(__FILE__) . 'static/css/myplugin.css', array(),'1.0' );
        wp_enqueue_script('myplugin-general-js', plugin_dir_url(__FILE__) . 'static/js/myplugin.js', array('jquery'), '1.0', true);
        
    endif;
}

    myplugin in ($_GET[‘page’]) === ‘myplugin’) is the value you set as 4th parameter ($menu_slug) when you add an admin page to your plugin via add_menu_page() function.

    function myplugin_admin_page() {
    add_menu_page(
        'My Plugin Name',
        'My Plugin Name',
        'manage_options',
        'myplugin',
        'myplugin_admin_page_html'
    );
}

add_action( 'admin_menu', 'myplugin_admin_page' );

    And plugin_dir_url(FILE) is relative to the page you add this code, if you want to use relative to root of your plugin folder, define a constant like

    DEFINE('MYPLUGIN_ROOT', plugin_dir_url(__FILE__) );

    and use

    MYPLUGIN_ROOT . 'static/js/myplugin.js'

    in any subfolder file you add to your plugin instead of

    plugin_dir_url(__FILE__) . 'static/css/myplugin.css'