6

Hello wordpress users,

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

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?

2
  • And where your plugin runs? Does it have a custom page? Show the code for this part.
    – brasofilo
    Mar 29, 2013 at 17:34
  • Nor working doesn't really tell us anything. Is the script loading on edit.php?
    – Chris_O
    Mar 29, 2013 at 17:35

4 Answers 4

10

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.

1
  • I literally had to search uid 73 to find this damn answer I've been searching for an hour.
    – Christine Cooper
    Dec 27, 2014 at 21:48
1

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

0
0

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!

0
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'

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.