jQuery UI Widgets - ChoosePlugin.com

Simple, clean, and flexible way to add jQuery UI widgets to your site pages. Works right out of the box!

Author:	David Gwyer (profile at wordpress.org)
WordPress version required:	3.5
WordPress version tested:	4.8.1
Plugin version:	0.60
Added to WordPress repository:	07-06-2012
Last updated:	13-09-2017 Warning! This plugin has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.
Rating, %:	86
Rated by:	19
Plugin URI:	http://wordpress.org/plugins/jquery-ui-widget...
Total downloads:	105 522
Active installs:	2 000+
Click to start download

Screenshots
FAQ

Installation Instructions

Instructions for installing:

In your WordPress admin go to Plugins -> Add New.
Enter jQuery UI Widgets in the text box and click Search Plugins.
In the list of Plugins click Install Now next to the jQuery UI Widgets Plugin.
Once installed click to activate.
Visit the Plugin options page via Settings -> jQuery UI Widgets.

Usage:

Go to Plugin settings and add your jQuery UI code. e.g. $( “.tabs” ).tabs().
Select the check boxes for the jQuery UI scripts you want to be available on your site pages (they are all selected by default when the Plugin is first activated).
Select the theme that you want to use to render the jQuery UI elements.
Quite often, depending on the WordPress theme you are using (and the specific jQuery selectors), you may run in minor issues with the CSS rendering. To help with this, there is a text box that you can enter custom style rules to tweak the jQuery theme styles, so they match your theme perfectly.to match your WordPress theme.
To upload a custom jQuery theme created with the ThemeRoller, see the FAQ for specific details.

I am not really sure what HTML code I need to add for each jQuery UI widget. Can you give me some examples?

There are plenty of examples for each jQuery widget on the official demo and documentation pages which include example code you can analyse and use on your own pages.

How do you upload a custom theme using the official jQuery ThemeRoller?

The Plugin supports themes created with the jQuery interactive ThemeRoller which means you can very easily create a custom jQuery theme to match your WordPress theme perfectly.

Create your custom theme using the ThemeRoller online tool. When you have finished your masterpiece, click the ‘Download theme’ button.
On the ‘Build Your Download’ page make sure ALL check boxes are selected (this is important).
Click the ‘Advanced Theme Settings’ button on the right hand side of the page and a couple of text boxes will come into view. Add a name for your custom theme in the ‘Theme Folder Name’ text box. Make sure that any words are separated by a dashes NOT spaces.
Finally, before downloading your custom theme, make sure the version radio button selected is 1.9.xx.
Now, you can click ‘Download’ to download your custom theme to your computer. It will be saved as a zip file.
Locate your downloaded custom theme and extract the zip file.
Open up the extracted custom theme folder, and you’ll see three folders: ‘css’, ‘development-bundle’, and ‘js’. The one we are interested in is ‘css’.
Open the ‘css’ folder and inside will be a single folder containing your theme, which has the name you specified above. Inside this folder will be an images folder and a single stylesheet. Make a note of the stylesheet name, you will need it later on.
You need to now upload this custom theme folder to your site, so the Plugin can read the custom styles.
If you take a look at the Plugin settings page you will see the folder name that you should upload to. Usually this will be something like http://www.mysite.com/wp-content/uploads/. If you are running a WordPress multisite this will be something different. Using FTP upload your custom jQuery theme to this folder.
Finally, you just need to paste in the name of your custom theme stylesheet in Plugin settings, in the textbox provided.
So, if your custom theme folder is named ‘mytheme’ and your custom stylesheet is called ‘jquery-ui-1.9.2.custom.css’ then you would need to paste in something like ‘mytheme/jquery-ui-1.9.2.custom.css’ into the textbox.
If you wanted to try out multiple custom themes I would recommend adding a ‘jquery-ui-themes’ folder (or whatever name you wanted) and uploading all of your custom themes to this folder.
The path to your stylesheet would then become ‘jquery-ui-themes/mytheme/jquery-ui-1.9.2.custom.css’.
If for whatever the reason the Plugin cannot find your stylesheet file it will display a warning message on the Plugin settings page.

I have an issue with how the jQuery UI widgets are rendering with my WordPress theme. Can you help fix it?

This isn’t a Plugin issue. Any problems with how the jQuery CSS interacts with your current WordPress theme will need to be fixed by using tools such as Firebug, or by contacting the theme author to help tweak the CSS. I’m afraid I can’t help with CSS queries for specific themes.

The custom jQuery UI init code I added doesn’t seem to be working. What could the problem be?

Again, this isn’t a Plugin issue. If you are using custom init code for some jQuery widgets and it isn’t working then please use Firebug to detect the issue. I would also recommend posting on the jQuery forums if you are stuck.

Hide FAQ

ChangeLog