Today I found myself once again needing to use jQuery in a new WordPress plugin I am developing for a client. I won’t lie, I often dread having to use jQuery within WordPress. It has been getting easier however, especially since WordPress version 3.3.x when they made many of the jQuery UI libraries part of the WordPress core. The trick is knowing that and knowing how to use them! For example I didn’t know about the jQuery UI libraries being part of the WP core until recently, so was just hacking my own jQuery into WordPress. The problem with hacking in a jQuery UI or any other jQuery code, is that it will usually break some other jQuery code in WordPress. Therefore I am putting together a quick reference guide on how to include jQuery and jQuery UI scripts in WordPress plugins and themes for my own reference and for other developers who can profit from this information.
First, here is a list of 35 jQueryUI elements already available within WordPress as of version 3.3.x:
| Name: | Enqueue Value: | Dependency: |
| jQuery UI Core | jquery-ui-core | jquery |
| jQuery UI Widget | jquery-ui-widget | jquery |
| jQuery UI Accordion | jquery-ui-accordion | jquery |
| jQuery UI Autocomplete | jquery-ui-autocomplete | jquery |
| jQuery UI Button | jquery-ui-button | jquery |
| jQuery UI Datepicker | jquery-ui-datepicker | jquery |
| jQuery UI Dialog | jquery-ui-dialog | jquery |
| jQuery UI Draggable | jquery-ui-draggable | jquery |
| jQuery UI Droppable | jquery-ui-droppable | jquery |
| jQuery UI Menu | jquery-ui-menu | jquery |
| jQuery UI Mouse | jquery-ui-mouse | jquery |
| jQuery UI Position | jquery-ui-position | jquery |
| jQuery UI Progressbar | jquery-ui-progressbar | jquery |
| jQuery UI Selectable | jquery-ui-selectable | jquery |
| jQuery UI Resizable | jquery-ui-resizable | jquery |
| jQuery UI Selectmenu | jquery-ui-selectmenu | jquery |
| jQuery UI Sortable | jquery-ui-sortable | jquery |
| jQuery UI Slider | jquery-ui-slider | jquery |
| jQuery UI Spinner | jquery-ui-spinner | jquery |
| jQuery UI Tooltips | jquery-ui-tooltip | jquery |
| jQuery UI Tabs | jquery-ui-tabs | jquery |
| jQuery UI Effects | jquery-effects-core | jquery |
| jQuery UI Effects – Blind | jquery-effects-blind | jquery-effects-core |
| jQuery UI Effects – Bounce | jquery-effects-bounce | jquery-effects-core |
| jQuery UI Effects – Clip | jquery-effects-clip | jquery-effects-core |
| jQuery UI Effects – Drop | jquery-effects-drop | jquery-effects-core |
| jQuery UI Effects – Explode | jquery-effects-explode | jquery-effects-core |
| jQuery UI Effects – Fade | jquery-effects-fade | jquery-effects-core |
| jQuery UI Effects – Fold | jquery-effects-fold | jquery-effects-core |
| jQuery UI Effects – Highlight | jquery-effects-highlight | jquery-effects-core |
| jQuery UI Effects – Pulsate | jquery-effects-pulsate | jquery-effects-core |
| jQuery UI Effects – Scale | jquery-effects-scale | jquery-effects-core |
| jQuery UI Effects – Shake | jquery-effects-shake | jquery-effects-core |
| jQuery UI Effects – Slide | jquery-effects-slide | jquery-effects-core |
| jQuery UI Effects – Transfer | jquery-effects-transfer | jquery-effects-core |
As you can see in the above table, the first 22 items in the list only require jQuery as a dependency. For those, you probably will only need to enqueue the value from the “Enqueue Value” column to make use of the library in your plugin or theme. You often will need to enqueue style for the jQuery library separately as well because as far as I know, WordPress doesn’t include many of the styles yet. the last dozen or so in the above table all require jquery-effects-core, so to use those, I believe you’ll need to enqueue that as well for them to work. For a complete list of other jQuery scripts that are already within the WordPress core, please visit the following codex page:
https://developer.wordpress.org/reference/functions/wp_enqueue_script/
That page also explains usage of the wp-enqueue-script function to a degree, but not as detailed as my special-use case described here.
How to Enqueue jQuery UI Elements in WordPress Plugin or Theme
Next I’m explaining how to include a jQuery UI library into your own WordPress plugin or theme. If you’re making a plugin, the code below will go into your plugin’s main file and if you’re working on a theme, then place the code below in the theme’s functions.php file. In the following code examples, I’ll demonstrate how to include both the jQuery UI element and the corresponding CSS file for using a datepicker in both the front-end and admin areas of WordPress. The code would be the same for any of the UI elements in the above table except that you would of course change the valuse to be enqueued for both the core jQuery file and the CSS file from googleapis.com.
PHP Code to use jQuery UI on the WordPress Front-End
function my_datepicker_function(){
//Enqueue date picker UI from WP core:
wp_enqueue_script(‘jquery-ui-datepicker’);
//Enqueue the jQuery UI theme css file from google:
wp_enqueue_style(‘e2b-admin-ui-css’,’http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css’,false,”1.9.0″,false);
}
add_action(‘wp_enqueue_scripts’, ‘my_datepicker_function’);
How to add PHP Code to Use jQuery UI on the WordPress Admin or Back-End
The PHP code to include the same datepicker UI in a WordPress back-end, admin page is nearly the same. The only difference is the hook we use in the add_action line at the end of the code is different. For front-end use, we used the wp_enqueue_scripts hook, but for admin use, we will use the admin_enqueue_scripts hook instead. That’s all folks!
Then simply include your HTML and script tag wherever you want to use your datepicker in this case like so:
<div class=”wrap”>
<input type=”text” class=”datepicker” name=”datepicker” value=””/>
</div>
<script>
jQuery(function() {
jQuery( “.datepicker” ).datepicker({
dateFormat : “dd-mm-yy”
});
});
</script>
Summary
the above example code is just for datepicker UI, but can easily be manipulated for any of the jQuery UI elements in the above table, so experiment and find the one that works for you. You will often need to google the jQuery UI element’s name and view an online demo of how it is used without WordPress to get exact code and then simply incorporate the above technique into what you learn. I did this with the sortable UI and it worked great. Good luck!