How to Correctly Include jQuery-UI Effects on WordPress

How to correctly include jQuery-UI effects on WordPress on your existing Theme without much compromise on Page Loading Speed? It is made easy with our Guide. Those who are new, can read our previous article What is jQuery with Example. jQuery-UI effects on WordPress can be done by using some Plugins or using wp enqueue script. Here are some important articles which are directly or indirectly related or can be used with this guide on how to correctly include jQuery-UI effects on WordPress :

 

1. Handy Guide for WP Enqueue Script For WordPress Themes
2. Eliminate Render-blocking Javascript and CSS WordPress
3. Transient and WordPress
4. Why My WordPress is So Slow?

 

How to correctly include jQuery-UI effects on WordPress : Introduction

 

jQuery UI is an extension of free JavaScript library jQuery and provides solutions to design and add functionality of the user interface. jQuery UI was released in September 2007, announced by John Resig on jquery.com. The latest release, 1.10.1, requires jQuery 1.6 or later. jQuery UI uses Grunt js.

Interactions :

• Draggable and Droppable – allows Drag and Drop
• Resizable – allows the user to magnify an element in and out
• Selectable – Advanced functionality for marking elements
• Sortable – adds functionality for sorting of similar items

Effects :

The underlying jQuery framework already offers some effects which jQuery UI extends :

• Color animation
• Animation of a class – animates the change of a style sheet class
• Blend effects
• Widgets

Widgets are pre-programmed solutions for Web developers who want to use common elements of user interfaces:

• Autocomplete
• Provides a function for auto-completion of text fields, also alaviable via Ajax
  Button
• Provides an interface for providing common buttons designs
• DatePicker
• Provides a menu to select a date ready dialogue
• Offers the possibility of adding a dialog box
• Provides an interface for displaying a progress bar
• Provides a slider
• Tabs
• Gives the developer the option tabs represent
• Accordion
• Represents a type of folding with certain elements for automatically extend and retract

Official website and repo of sourcecode :

 

How to correctly include jQuery-UI effects on WordPress : Options to include

 

There are Plugins for WordPress like –

 

 

However, we will suggest to use methods described in the guide WP Enqueue Script For WordPress Themes. These method will not throw/increase the bad sort of warning – Eliminate Render-blocking Javascript in Google Page Loading Speed test. You must deliver from a CDN for quicker deliver. The fact is, all of these scripts are already registered to print in the footer. You can see wp-includes/script-loader.php for details. When you try to register the scripts again WordPress doesn’t change that :

The workaround would be to register a new script for wp_head with those scripts as dependencies (the third parameter of wp_enqueue_script()). Do not register the scripts in another order before WordPress does it! This will affect wp-admin and probably other pages too.

So, the things goes like this :

function add_scripts(){
wp_enqueue_script( ‘jquery-ui-autocomplete’ );
}
add_action(‘wp_enqueue_scripts’, ‘add_scripts’);

Add these in header with some Header Footer sort of Plugin, most theme has some functions :

And to footer :

In case, you do not want all to load :