Wordpress - Correct way to enqueue jquery-ui

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


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>