9

I'm having a tough time including jquery-ui scripts and styles in my plugin. It seems that my wp_enqueue_script calls are simply ignored.

There are already many questions similar to this one, but all answers I've found so far boil down to call wp_enqueue_script inside the wp_enqueue_scripts action hook, which I'm already doing.

In the constructor of my class I call:

add_action( 'wp_enqueue_scripts', array($this, 'enqueue_scripts') );

and then, below:

public function enqueue_scripts()
{    
  wp_enqueue_script( 'jquery-ui-core', false, array('jquery') );
  wp_enqueue_script( 'jquery-ui-widget', false, array('jquery') );
  wp_enqueue_script( 'jquery-ui-mouse', false, array('jquery') );
  wp_enqueue_script( 'jquery-ui-accordion', false, array('jquery') );
  wp_enqueue_script( 'jquery-ui-autocomplete', false, array('jquery'));
  wp_enqueue_script( 'jquery-ui-slider', false, array('jquery'));

I've checked that the code actually gets executed each page load. However the pages lack the <link> tags for the jquery-ui library. I've already tried with and without the jquery dependency explicitly specified in the third argument of the wp_enqueue_script calls.

I've also tried with a plain WP 4.8 installation with no plugins installed other than mine, and with the default twenty seventeen theme only. No dice.

What's wrong with my code?

23

First of all, WordPress registers jQuery UI via wp_default_scripts(). Dependencies are already set, so you only need to enqueue the script you really need (and not the core). Since you're not changing version number or anything, it is ok to only use the handle.

// no need to enqueue -core, because dependancies are set
wp_enqueue_script( 'jquery-ui-widget' );
wp_enqueue_script( 'jquery-ui-mouse' );
wp_enqueue_script( 'jquery-ui-accordion' );
wp_enqueue_script( 'jquery-ui-autocomplete' );
wp_enqueue_script( 'jquery-ui-slider' );

As for the stylesheets: WordPress does not register jQuery UI styles by default!

In the comments, butlerblog pointed out that according to the Plugin Guidelines

Executing outside code within a plugin when not acting as a service is not allowed, for example:

  • Calling third party CDNs for reasons other than font inclusions; all non-service related JavaScript and CSS must be included locally

This means loading the styles via CDN is not permitted and should always be done locally. You can do so by using wp_enqueue_style().

| improve this answer | |
3

If you are enqueuing your own script, you can just add 'jquery-ui-accordion', for example, to the list of dependencies. All the required dependencies will be added automatically. Example:

wp_enqueue_script( 'my-theme', get_stylesheet_directory_uri() . '/js/theme.js', array( 'jquery', 'jquery-ui-accordion' ) );

Will generate this code:

<script type='text/javascript' src='/wp-includes/js/jquery/ui/core.min.js'></script>
<script type='text/javascript' src='/wp-includes/js/jquery/ui/widget.min.js'></script>
<script type='text/javascript' src='/wp-includes/js/jquery/ui/accordion.min.js'></script>
<script type='text/javascript' src='/wp-content/themes/theme/js/theme.js'></script>
| improve this answer | |
1

I've modified your script. try with this, it is working.

add_action( 'wp_enqueue_scripts', array($this, 'enqueue_scripts') );
public function enqueue_scripts()
{    
  wp_enqueue_script( 'jquery-ui-core');
  wp_enqueue_script( 'jquery-ui-widget');
  wp_enqueue_script( 'jquery-ui-mouse');
  wp_enqueue_script( 'jquery-ui-accordion' );
  wp_enqueue_script( 'jquery-ui-autocomplete');
  wp_enqueue_script( 'jquery-ui-slider');
}
| improve this answer | |
  • Unfortunately in my case it does not work. – Lucio Crusca Jul 20 '17 at 9:36
  • @LucioCrusca Please see my answer. While WordPress registers jQuery UI scripts, it does not do so for styles, you need to do that yourself as I showed – kero Jul 20 '17 at 9:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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