8

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?

17

First of all, WordPress registers jQuery UI via wp_default_scripts(). Dependancies 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!

You have to include the theme you want by calling wp_enqueue_style(). Since you need the right version, you can call wp_scripts() and check for the registered jQuery UI core version.

// in constructor
    add_action( 'wp_enqueue_scripts', array($this, 'enqueue_scripts') );
    add_action( 'wp_enqueue_scripts', array($this, 'enqueue_styles') );

public function enqueue_scripts()
{
    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' );
}
public function enqueue_styles()
{
    $wp_scripts = wp_scripts();
    wp_enqueue_style(
      'jquery-ui-theme-smoothness',
      sprintf(
        '//ajax.googleapis.com/ajax/libs/jqueryui/%s/themes/smoothness/jquery-ui.css', // working for https as well now
        $wp_scripts->registered['jquery-ui-core']->ver
      )
    );
}

This code is using Google's CDN and the smoothness Theme, of course you can change this to a local path you ship with the theme/plugin.

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