How to load plugin CSS and JS scripts on plugins pages only

[AITpro Admin]

Email Question:

I’m currently developing my very first WordPress plugin and I was wondering if you could help me find a solution to a very specific problem related to script enqueueing.

* If you don’t have the time, I completely understand and you can ignore the rest of this email. *
I have some CSS and JS files that I load using admin_enqueue_scripts() however I noticed that this hook allows these files to run on every page in the entire admin area. Of course this is a waste of resources but also a potential conflict problem.

What is the best way to sandbox my scripts so that they only run on my plugin’s pages?

I find the $hook provided by the admin_enqueue_script() is almost useless for plugin’s admin_menus. It only gives ambiguous names for menus and sub_menus. Is there no way around filtering every single ambiguous page slug?

I’m currently using the get_current_screen() function in order to grab the ‘parent_base’ data and filtering based on that. However the screen object loads pretty late into the page loading and specifically the ‘parent_base’ isn’t loaded until the page is pretty much finished loading. This is why when I tried using the ‘current_page’ action hook, it didn’t work since the screen object wasn’t completely filled out.

I’m looking for something similar to ‘parent_slug’.
Or, perhaps there’s a completely different solution.

I’d like to re-iterate, you don’t have to answer this if you don’t have time. I really appreciate the time you’ve given me thus far.
Thank you.

[AITpro Admin]

Edit|Updated:  5-22-2015 – this code was outdated and has been deleted – see a better more efficient example here: http://forum.ait-pro.com/forums/topic/remove-plugin-scripts-from-loading-in-other-plugin-pages/

[James]

Wow, Thanks so much for your help! This such a better technique than my current ‘work-around’. I’ve tried to replicate your technique as best as I can but I seem to have hit a road block. My admin_init hook callback function is definitely being called, however I don’t think my function for enqueueing the scripts is being called.

This is what I have, perhaps there’s something I missed? :S

function wcmb_admin_init() {
wp_enqueue_script( 'jquery' );

# Register Scripts and Styles for easier enqueueing later
wp_register_style( 'wcmb-bootstrap-css', plugins_url( '/admin/css/bootstrap.min.css', __FILE__ ), array(), '3.0');
wp_register_style( 'wcmb-admin-css', plugins_url( '/admin/css/admin.css', __FILE__ ), array(), '0.1.0');
wp_register_script( 'wcmb-bootstrap-js', plugins_url( '/admin/js/lib/bootstrap.min.js' , __FILE__ ), array('jquery'), '3.0', false );
wp_register_script( 'wcmb-validation-js', plugins_url( '/admin/js/lib/jqBootstrapValidation.js' , __FILE__ ), array('jquery'), '1.3.6', false );
wp_register_script( 'wcmb-admin-list-js', plugins_url( '/admin/js/admin-list.js' , __FILE__ ), array('jquery'), '0.1.0', true );
wp_register_script( 'wcmb-admin-add-js', plugins_url( '/admin/js/admin-add.js' , __FILE__ ), array('jquery'), '0.1.0', true );
wp_register_script( 'wcmb-admin-options-js', plugins_url( '/admin/js/admin-options.js' , __FILE__ ), array('jquery'), '0.1.0', true );

# Load scripts and styles ONLY on my-plugin-directory-name specified pages
# This ensures that resources are wasted on other admin pages and prevents potential conflicts
add_action( 'load-my-plugin-directory-name/admin/views/list.php', array( $this, 'wcmb_enqueue_admin_scripts' ) );
add_action( 'load-my-plugin-directory-name/admin/views/add.php', array( $this, 'wcmb_enqueue_admin_scripts' ) );
add_action( 'load-my-plugin-directory-name/admin/views/options.php', array( $this, 'wcmb_enqueue_admin_scripts' ) );
}

function wcmb_enqueue_admin_scripts() {
wp_enqueue_style( 'wcmb-bootstrap-css' );
wp_enqueue_style( 'wcmb-admin-css');

wp_enqueue_script( 'wcmb-bootstrap-js');
wp_enqueue_script( 'wcmb-validation-js');
}

[AITpro Admin]

Put wp_enqueue_script( ‘jquery’ ); in the page function.  Also I do not see the action where you are loading the admin_init function

function wcmb_enqueue_admin_scripts() {

wp_enqueue_style( 'wcmb-bootstrap-css' );
wp_enqueue_style( 'wcmb-admin-css');

wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'wcmb-bootstrap-js');
wp_enqueue_script( 'wcmb-validation-js'); 
}

[AITpro Admin]

Also the action needs to be wrapped in this condition is_admin to make sure it is only loaded in the wp-admin backend area

if ( is_admin() ) {

add_action( 'admin_init', 'bulletproof_security_admin_init' );

[James]

Okay, I’ve moved ‘jquery’ to the suggested location and also added the is_admin() check as suggested

This function is where I am calling that add_action( ‘admin_init’ )

  # Initialize Everything
  function __construct() {
    # register admin pages for the plugin
    add_action( 'admin_menu', array( $this, 'wcmb_admin_pages_callback' ) );

    # register scripts and styles only available in the Front End
    add_action( 'wp_enqueue_scripts', array( $this, 'wcmb_add_JS' ) );
    add_action( 'wp_enqueue_scripts', array( $this, 'wcmb_add_CSS' ) );

    if ( is_admin() ) {
      # register scripts and styles only available in the Back End
      add_action( 'admin_init', array( $this, 'wcmb_admin_init' ) );

      # Add admin notice handler
      add_action( 'admin_init', array( $this, 'wcmb_admin_notice_handler' ) );
    }

    # register form handlers
    add_action( 'admin_post_wcmb_add_form_handler', array( $this, 'wcmb_add_form_handler' ) );
    add_action( 'admin_post_wcmb_options_form_handler', array( $this, 'wcmb_options_form_handler' ) );

    # Add a sample shortcode
    add_action( 'init', array( $this, 'wcmb_sample_shortcode' ) );

    # Register activation and deactivation hooks
    register_activation_hook( __FILE__, 'wcmb_on_activate_callback' );
    register_deactivation_hook( __FILE__, 'wcmb_on_deactivate_callback' );
  }

[AITpro Admin]

It seems to me you are trying to do things out of order – ie registering scripts before you call the function that is supposed to register the scripts. wcmb_admin_init This is the only function that should be registering scripts even if some are front end and some are backend.  If you have a plugin that is loading scripts on the front end then you should load scripts at the bottom of front end pages and use the footer.  http://codex.wordpress.org/Function_Reference/wp_enqueue_script

I can only provide general help here and cannot assist you to build a plugin by going back and forth in the Forum.  I don’t have time to do this right now.  Trying to get BPS Pro 8.0 released today.

[AITpro Admin]

Actually you can register and enqueue front end scripts separately.  And they would not load if they were wrapped in is_admin.  Sorry juggling a million things right now.  BPS Pro new version release days are hectic and insane.

[James]

Wow, really sorry about the bad timing.
I definitely do not want to impose anything on you.

As a side note, those front-end script/css loading callback functions are empty (placeholder functions for now)
I will definitely make them load in the footer though, that sounds like a better idea.

I’m starting to wonder if it doesn’t work due to the absence of a global $bulletproof_security; in my function?
Hmm, probably not, seems like the function isn’t being called at all, probably something to do with the load-{name} hook
I probably messed it up somehow.

Anyway! I’m rambling.
I apologize for stressing you out at bit. You should definitely get back to your work.
I will try to figure this out, I’ll let you know how it goes.

Thank you so much for your time!

[AITpro Admin]

Nope the global has nothing to do with it.  We are actually not even using that global at this point either.  It will be used later on.  Another factor may be that you are using a Class.  With a Class this gives you much better control and security of your public and private functions, but may also cause standard functions to act differently depending on how and where you are loading your Class.  I can get into this some more at another time either tomorrow or Thursday.

[James]

I actually managed to figure it out!

I was sprawling through your admin/includes/admin.php analyzing the differences.
I was also looking through the load-{$plugin_page} hook source
I noticed a difference between the way you ‘added’ your menus and how mine are ‘added’.

Your pages were directly referencing files in your plugin.
However my pages were references to a callback function which then in-turn referenced those files.

After I found out that, I realized that the load-{$plugin_page} hook doesn’t reference a file, it references the page slug defined in add_menu_page / add_submenu_page.

I changed my add_menu_page / add_submenu_page page slugs to reference the direct location of the file and mirrored that slug in the load-{$plugin_page} hook.
Still didn’t work.
Then I realized that I still had a callback function defined at the end of my add_menu_page / add_submenu_page, I removed the callback function everything worked exactly as expected.
The load-{$plugin_page} now calls the callback function and enqueues everything!

So in summation.

• load-{$plugin_page} references a page slug
• load-{$plugin_page} doesn’t work if the add_menu_page / add_submenu_page has a callback function specified
• add_menu_page / add_submenu_page needs to be referencing a direct path to the file

Phew! That was a weird one.
If only http://codex.wordpress.org/Plugin_API/Action_Reference/load-(page) had more darn information!

Thank you for all your time and suggestions! GREATLY appreciated!

[AITpro Admin]

Good job!

Yeah the WP Codex pages give you the exact information about what WP functions do and general info about what does what, but of course they do not try to explain every possible usage so that is where the fun starts with trial and error coding work.  😉

[Author]

Posts