How to Use & Work with jQuery UI in Wordpress

WordPress is the powerful CMS of PHP language. There are several features which makes flexibility to users to work and control the flow of application. WordPress have 10000+ available plugins at wordpress repository which manages wordpress for every functionality.

jQuery UI is a set of plugins which creates amazing effects, themes, widgets built in jQuery libraries.

What is jQuery UI ?

• jQuery UI are the set of plugin files which creates interactive web applications.

• It is Open source means freely available to use.

• Due to jquery plugins support, it creates a powerful theme mechanism.

• Easy to use and simple implementation in any applications.

• It has great level browser support extensions.

• Great collections of widget plugins.

jQuery have multiple libraries for different different tasks. It provides for jquery interactions like Draggable, Droppable, Resizable, etc.

It also contains several pretty useful widgets like Accordion, Autocomplete, Button etc.

How to use jQuery UI ?

There is very simple way to use jQuery UI in application. First we need an application like in HTML, in PHP any of the framework or language etc. Download basic files of jquery & jquery ui. Here, basic files refers to using jQuery main file and jquery ui css and jquery ui js.

Main jquery file can BE downloaded from several CDN links. Download any of like minified or simple.

Where we can find jQuery UI files in wordpress ?

WordPress is powerful system which maintains everything inside it. jQuery UI is also available as a default set of features. Many of the wordpress developers don’t have the idea to use them. Instead if they need, they used to bind extra plugin files from outside and work.

So, jQuery UI is default support feature of wordpress. As in the previous topic we have seen that when we want to use jquery ui features we need few files in application. In wordpress where we should find those files – interesting.

We can see the default available jquery ui files in wordpress. No need to download any extra plugin file to use jquery-ui features. Inside this folder we can find all widget plugin files and interactive files.

How can we load jQuery UI Plugin Files in WordPress ?

As already discussed, we need to these files –

• jQuery Main file

• jQuery UI CSS

• jQuery UI Plugin file

So, to use jQuery UI widgets, effects – We need to use above core files. In wordpress setup by default jQuery UI js, jquery main file we can find easily. But for CSS we need to download from it’s officialjQuery UI.

When we download theme from this link, we get jquery ui files with css files. For our work, we need only CSS because jquery ui js already available inside wordpress setup.

Let’s say we are going to create a plugin in which we will use jquery UI features (like widgets).

Create WordPress Project URL

define("JQUERY_UI_WP_URL", plugin_dir_url(__FILE__)); // It gives the plugin path

Load CSS, main jQuery file, jQuery ui js file

wp_enqueue_style("jquery-wp-css", JQUERY_UI_WP_URL . "assets/jquery-ui.min.css"); wp_enqueue_script("jquery"); wp_enqueue_script("jquery-ui-accordion");

wp_enqueue_style – This function will registers css file of jquery-ui. Keep in mind this CSS file we have download already from above steps. We have moved that downloaded CSS into any created plugin. JQUERY_UI_WP_URL is a constant defined above.

wp_enqueue_script – This function is used to registers javascript, jquery plugin files.

wp_enqueue_script(“jquery”); – This line loads jquery main file from wordpress setup. jquery.js file you can find at /wp-includes/js/jquery/jquery.js.

wp_enqueue_script(“jquery-ui-accordion”); – It loads jquery ui accordion js file. This files loads from /wp-includes/js/jquery/ui/accordion.min.js

Create a basic WordPress Plugin with jQuery UI

We are going to create a basic plugin in wordprss. In this plugin we will use jquery ui widget – accordion. Step by step about each functions we will see. Additionally, we will cover about plugin development step wise as well.

Create a Plugin Folder at path – /wp-content/plugins/my-jquery-widget

Create a plugin file namely inside that folder as – wp-my-jquery-widget.php

Step by step we append code into plugin file.

Registering Menu & a submenu on plugin activation

add_action("admin_menu", "jquery_ui_menus"); function jquery_ui_menus() { add_menu_page("Jquery UI WP", "Jquery UI WP", "manage_options", "wp-jquery-ui", "wp_jquery_ui_callback_fn"); add_submenu_page("wp-jquery-ui", "Accordion", "Accordion", "manage_options", "wp-jquery-ui", "wp_jquery_ui_callback_fn"); } function wp_jquery_ui_callback_fn() { ob_start(); include_once JQUERY_UI_WP_PATH . 'views/accordion.php'; $template = ob_get_contents(); ob_end_clean(); echo $template; }

wp_jquery_ui_callback_fn is a callback function which runs when we click on plugin menu or submenu. Because same callback function is used for both.

Inside this callback function we used PHP buffer concept to load view file. So, we need to create view file with the name accordion.php in /views folder.

Adding Html code to view file –

Learn Wp Plugin Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.Learn CakePHP Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.WP Theme development Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.List item oneList item twoList item threeMetabox Tutorials Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Let’s see the output what we have created so far

Now, we need to add library files for jquery UI for accordion widget –

function jquery_ui_js_files() { wp_enqueue_style("jquery-wp-css", JQUERY_UI_WP_URL . "assets/jquery-ui.min.css"); wp_enqueue_script("jquery"); wp_enqueue_script("jquery-ui-accordion"); // custom js file to call accordion method wp_enqueue_script("custom-script", JQUERY_UI_WP_URL . "assets/script.js", array('jquery'), "1.0.0", true); } // action hook to register our plugin files add_action("admin_enqueue_scripts", "jquery_ui_js_files");

Successfully, we have registered needed jquery ui files, also we have attached the css for ui theme.

Here, we have attached a custom script file “custom-script” in which we will add accordion method to use it.

jQuery(document).ready(function () { // #accordion-wp it's an id defined in accordion.php view file. jQuery("#accordion-wp").accordion(); });

When we reload the plugin backend at wordpress admin panel we will get output as –

Finally, we have implemented the concept of jquery ui in wordpress in a very easy way. No need to any extra js plugin files.

To get the complete code here we have the github link to download the source code. jQuery UI with WordPress Github.

How we can use Other Widgets of jQuery UI in WordPress ?

As you have seen so far, inside this – we need some basic files to add any widget to plugin. For example – we need jquery js plugin file for accordion, main file and a ui theme css file. That’s it.

Pragmatically, we used these lines for accordion –

wp_enqueue_style("jquery-wp-css", JQUERY_UI_WP_URL . "assets/jquery-ui.min.css"); wp_enqueue_script("jquery"); wp_enqueue_script("jquery-ui-accordion"); // for accordion widget

For other widgets in jQuery UI, we need their respective libraries as –

• JQuery UI Autocomplete – wp_enqueue_script(“jquery-ui-autocomplete“);

• JQuery UI Datepicker – wp_enqueue_script(“jquery-ui-datepicker“);

• JQuery UI Dialog – wp_enqueue_script(“jquery-ui-dialog“);

You can find complete information about available plugins here. Redirect to WordPress official documentation.

You should find something when you go to above link –