• Home
  • Archive
  • Tools
  • Contact Us

The Customize Windows

Technology Journal

  • Cloud Computing
  • Computer
  • Digital Photography
  • Windows 7
  • Archive
  • Cloud Computing
  • Virtualization
  • Computer and Internet
  • Digital Photography
  • Android
  • Sysadmin
  • Electronics
  • Big Data
  • Virtualization
  • Downloads
  • Web Development
  • Apple
  • Android
Advertisement
You are here: Home » How to Correctly Include jQuery-UI Effects on WordPress

By Abhishek Ghosh December 6, 2013 4:36 am Updated on December 6, 2013

How to Correctly Include jQuery-UI Effects on WordPress

Advertisement

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 :

Advertisement

---

  • 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
How to Correctly Include jQuery-UI Effects on WordPress

Official website and repo of sourcecode :

 

Vim
1
http://jqueryui.com/

Vim
1
#repository

Vim
1
https://github.com/jquery/jquery-ui

Vim
1
#Demo

Vim
1
http://jqueryui.com/demos/

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

 

There are Plugins for WordPress like –

 

Vim
1
http://wordpress.org/plugins/jquery-ui-widgets/

 

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 :

Vim
1
2
3
wp_enqueue_script(
"myUi","https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"
);

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 :

Vim
1
2
<script type='text/javascript' src='//source/wordpress/wp-includes/js/jquery/jquery.js?ver=1.9.1'></script>
<script type='text/javascript' src='http://localhost/wordpress/wp-includes/js/jquery/jquery-migrate.js?ver=1.1.1'></script>

And to footer :

Vim
1
2
3
4
5
<script type='text/javascript' src='//source/wordpress/wp-includes/js/jquery/ui/jquery.ui.core.min.js?ver=1.10.2'></script>
<script type='text/javascript' src='//source/wordpress/wp-includes/js/jquery/ui/jquery.ui.widget.min.js?ver=1.10.2'></script>
<script type='text/javascript' src='//source/wordpress/wp-includes/js/jquery/ui/jquery.ui.position.min.js?ver=1.10.2'></script>
<script type='text/javascript' src='//source/wordpress/wp-includes/js/jquery/ui/jquery.ui.menu.min.js?ver=1.10.2'></script>
<script type='text/javascript' src='//source/wordpress/wp-includes/js/jquery/ui/jquery.ui.autocomplete.min.js?ver=1.10.2'></script>

In case, you do not want all to load :

Vim
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function my_enqueue_scripts_method() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('jquery-ui-core', false, array('jquery'), false, false);
    wp_enqueue_script('jquery-ui-widget', false, array('jquery'), false, false);
    wp_enqueue_script('jquery-ui-mouse', false, array('jquery'), false, false);
    wp_enqueue_script('jquery-ui-accordion', false, array('jquery'), false, false);
    wp_enqueue_script('jquery-ui-slider', false, array('jquery'), false, false);
    wp_enqueue_script('jquery-ui-tabs', false, array('jquery'), false, false);
    wp_enqueue_script('jquery-ui-sortable', false, array('jquery'), false, false);
    wp_enqueue_script('jquery-ui-draggable', false, array('jquery'), false, false);
    wp_enqueue_script('jquery-ui-droppable', false, array('jquery'), false, false);
    wp_enqueue_script('jquery-ui-selectable', false, array('jquery'), false, false);
    //wp_enqueue_script('jquery-ui-datepicker', false, array('jquery'), false, false);
    wp_enqueue_script('jquery-ui-resizable', false, array('jquery'), false, false);
    wp_enqueue_script('jquery-ui-dialog', false, array('jquery'), false, false);
    //wp_enqueue_script('jquery-ui-button', false, array('jquery'), false, false);
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts_method', 1);

Tagged With how to engue jquery-ui-draggable in wordpres , how to register jquery ui tabs in wordpress footer , jquery , wordpress jquery ui

This Article Has Been Shared 566 Times!

Facebook Twitter Pinterest

Abhishek Ghosh

About Abhishek Ghosh

Abhishek Ghosh is a Businessman, Surgeon, Author and Blogger. You can keep touch with him on Twitter - @AbhishekCTRL.

Here’s what we’ve got for you which might like :

Articles Related to How to Correctly Include jQuery-UI Effects on WordPress

  • YouTube One Channel Design Guide With Free PSD

    YouTube One Channel Design requires a redesigning of your YouTube Channel for better branding. Here are links to official specs plus free PSD with guide to use.

  • HTML5 : Vocabulary and Interfaces

    HTML5 can be difficult to understand at high end usage. Basic usage of HTML5 is otherwise easy. Here is a list of Vocabulary and Interfaces for HTML5.

  • Planning and Using Responsive AdSense Ad Unit

    Planning and Using Responsive AdSense Ad Unit is crucial step because we are going to target the same place with three or more AdSense Ad Unit. Here is how.

  • WordPress Optimization Tricks : The PHP Files

    WordPress optimization tricks offers you some uncommon and common hacks to optimize the Page Loading speed specific to WordPress files only.

  • Company Formation and Ownership : Why, When and What

    Company Formation and Ownership is possibly unknown to many intelligent peoples. It is quite important to know (or even if at all need so) the things around it.

Additionally, performing a search on this website can help you. Also, we have YouTube Videos.

Take The Conversation Further ...

We'd love to know your thoughts on this article.
Meet the Author over on Twitter to join the conversation right now!

If you want to Advertise on our Article or want a Sponsored Article, you are invited to Contact us.

Contact Us

Subscribe To Our Free Newsletter

Get new posts by email:

Please Confirm the Subscription When Approval Email Will Arrive in Your Email Inbox as Second Step.

Search this website…

 

Popular Articles

Our Homepage is best place to find popular articles!

Here Are Some Good to Read Articles :

  • Cloud Computing Service Models
  • What is Cloud Computing?
  • Cloud Computing and Social Networks in Mobile Space
  • ARM Processor Architecture
  • What Camera Mode to Choose
  • Indispensable MySQL queries for custom fields in WordPress
  • Windows 7 Speech Recognition Scripting Related Tutorials

Social Networks

  • Pinterest (24.3K Followers)
  • Twitter (5.8k Followers)
  • Facebook (5.7k Followers)
  • LinkedIn (3.7k Followers)
  • YouTube (1.3k Followers)
  • GitHub (Repository)
  • GitHub (Gists)
Looking to publish sponsored article on our website?

Contact us

Recent Posts

  • What is ChatGPT? February 3, 2023
  • Zebronics Pixaplay 16 : Entry Level Movie Projector Review February 2, 2023
  • What is Voice User Interface (VUI) January 31, 2023
  • Proxy Server: Design Pattern in Programming January 30, 2023
  • Cyberpunk Aesthetics: What’s in it Special January 27, 2023

About This Article

Cite this article as: Abhishek Ghosh, "How to Correctly Include jQuery-UI Effects on WordPress," in The Customize Windows, December 6, 2013, February 5, 2023, https://thecustomizewindows.com/2013/12/how-to-correctly-include-jquery-ui-effects-on-wordpress/.

Source:The Customize Windows, JiMA.in

PC users can consult Corrine Chorney for Security.

Want to know more about us? Read Notability and Mentions & Our Setup.

Copyright © 2023 - The Customize Windows | dESIGNed by The Customize Windows

Copyright  · Privacy Policy  · Advertising Policy  · Terms of Service  · Refund Policy

We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
Do not sell my personal information.
Cookie SettingsAccept
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
SAVE & ACCEPT