Enqueue jquery-ui elements in Wordpress theme opti

Question

Well, I know this is a commonly asked question, but almost all of them like '2 or 3 years ago'. Since Wordpress had some serious core changes recently, thought it'd be better to get an updated answer.

What I wanted to do is add this jquery slider to my wordpress custom admin page.

In today's Wordpress, is jquery-ui coming in built ? or I do need to include it using wp_enqueue_script or I should use some external url CDN?

Since I'm working on Wordpress 4.2, could you please tell me the proper way of adding this functionality?

Thanks!

Answer 1

jQuery-ui actually ships with WordPress. So since you are working in WordPress, this is how you should add jquery ui ( the slider ) to your application.

wp_enqueue_script( 'your-script-name', get_template_directory_uri() . '/js/your-js-app.js', array('jquery', 'jquery-ui-slider'), '1.0.0', true );

1) your-script-name is the name of your script.

2) get_template_directory_uri() gets the url to your theme. If you are using the above code in a plugin then use plugin_dir_url( FILE ).

https://codex.wordpress.org/Function_Reference/plugin_dir_url

3) array('jquery', 'jquery-ui-slider') is the list of dependencies that your js app requires. In this case it needs jquery and jquery-ui-slider.

4) 1.0.0 is the version of your js application.

5) true means you are outputting your application in the footer of the admin page.

More reference on wp_enqueue_script on https://codex.wordpress.org/Function_Reference/wp_enqueue_script

Answer 2

and at many cases you should use selector : 'jQuery' instead of '$'.

example:
$('#menu') in wp: jQuery('#menu')

Answer 3

Yes the wordpress allows you to add multiple dependencies. You can check the details on the wp_enqueue_script() page in the documentation.

What you'd do is add a dependency to your script where you initialize your slider. In your functions.php where you enqueue your scripts add this

wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array('jquery', 'jquery-ui-slider'), '1.0.0', true );

example.js is the script file where you initialize your slider. It depends explicitly on jquery and on jquery-ui-slider, so you know that the slider will work with the slider ui component of the jquery-ui.

It's split into parts so that you don't have to enque entire jquery-ui which is quite heavy on the page.