Correct way to enqueue jquery-ui

Question

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?

Answer 1

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().

Answer 2

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>

Answer 3

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');
}