Using jQueryUI in WordPress

by Curtiss   |   last updated February 20, 2012   |   PHP Tutorials ·

With the update to WordPress 3.3.x, the WordPress core now includes the entire jQueryUI suite packaged in the download. No longer do plugin and theme developers have to include their own custom builds of jQueryUI elements (hopefully they never did include custom builds of the elements, but there are quite a few plugins and themes that did). Instead, you simply need to enqueue the existing scripts.

Following is a full list of the jQueryUI elements included in WordPress, along with their “handles” for use with the wp_enqueue_script() function.

• UI Core
  • Core – jquery-ui-core
  • Widget – jquery-ui-widget
  • Mouse – jquery-ui-mouse
  • Position – jquery-ui-position
• Interactions
  • Draggable – jquery-ui-draggable
  • Droppable – jquery-ui-droppable
  • Resizable – jquery-ui-resizable
  • Selectable – jquery-ui-selectable
  • Sortable – jquery-ui-sortable
• Widgets
  • Accordion – jquery-ui-accordion
  • Autocomplete – jquery-ui-autocomplete
  • Button – jquery-ui-button
  • Dialog – jquery-ui-dialog
  • Slider – jquery-ui-slider
  • Tabs – jquery-ui-tabs
  • DatePicker – jquery-ui-datepicker
  • ProgressBar – jquery-ui-progressbar
• Effects
  • Effects Core – jquery-effects-core
  • Effects “Blind” – jquery-effects-blind
  • Effects “Bounce” – jquery-effects-bounce
  • Effects “Clip” – jquery-effects-clip
  • Effects “Drop” – jquery-effects-drop
  • Effects “Explode” – jquery-effects-explode
  • Effects “Fade” – jquery-effects-fade
  • Effects “Fold” – jquery-effects-fold
  • Effects “Highlight” – jquery-effects-highlight
  • Effects “Pulsate” – jquery-effects-pulsate
  • Effects “Scale” – jquery-effects-scale
  • Effects “Shake” – jquery-effects-shake
  • Effects “Slide” – jquery-effects-slide
  • Effects “Transfer” – jquery-effects-transfer

There is one caveat, though. As of right now, WordPress does not include any CSS for many of these jQueryUI elements. Instead, you will have to temporarily include your own. I honestly couldn’t recommend the best way to do this. It seems to me that the best way is probably to download the appropriate CSS for each element and save them as separate CSS files, then register and enqueue them as they are necessary.

The WordPress team is working on putting together complete jQueryUI themes for the WordPress admin area, so you probably won’t need to use your custom CSS build for long.