How to properly enqueue JQuery UI in WordPress

WordPress comes along woth many JQuery libraries that are for performance reasons obviously not entirely loaded. But what it you want a custom script to use some of the elements. Then it would be great to use the basic package since you can be sure it will be updated with every wordpress version automatically.

Simply drop this script into your themes function.php:

function load_JQuislider(){

wp_enqueue_script('jquery');
 wp_enqueue_script('jquery-ui-core');
 wp_enqueue_script('jquery-ui-slider');

//Enqueue the jQuery UI theme css file from google:
 $wp_scripts = wp_scripts();
 
 wp_enqueue_style(
 'jquery-ui-theme-smoothness', //select ui theme: base...
 sprintf(
 'https://ajax.googleapis.com/ajax/libs/jqueryui/%s/themes/smoothness/jquery-ui.css',
 $wp_scripts->registered['jquery-ui-core']->ver
 )
 );
 
}
add_action('wp_enqueue_scripts', 'load_JQuislider');

What does this code do?

• It  makes sure basic JQuery is loaded (which is usually the case).
• It loads the UI core which is needed for the slider cause there are dependencies.
• It loads the UI Slider Element.
• It then checks for the version of the loaded JQuery library and uses this for the path to load the according JQuery UI style file from Google.

The last step is ipmportant and tricky, cause you need the correct version for the embed path.

Realized with help from:

This solution uses a constructor class which I did not want:

• https://wordpress.stackexchange.com/questions/273986/correct-way-to-enqueue-jquery-ui

This helped me to understand how the constructers work so I could complete the upper code and then rearrange it for use without constructors.

• http://www.9bitstudios.com/2013/03/clean-up-your-functions-php-file-by-using-classes-in-wordpress/

This was my original inquiry about the issue.

• https://wp-types.com/forums/topic/cred-how-to-use-jquery-ui-slider-for-numeric-input/#post-623417