jQuery UI Widgets Pro Documentation

After purchase you can download the plugin zip file from your WPGO Plugins account area. Complete the following steps to install jQuery UI Widgets Pro on your site:

1. On the site you wish to install the plugin, go to the WordPress admin dashboard and click the Plugins link in the left hand menu.
2. At the top of the Plugins list page click the Add New button, and then on the next page click the Upload Plugin button.
3. You’ll now see a Choose File button. Click it and select the plugin zip file you downloaded to your computer earlier.
4. Once the plugin has been selected click the Install Now button to begin the installation process.
5. In a few seconds you should see a Plugin installed successfully message. Click the Activate Plugin link underneath to make the plugin ready for use.

Once installed and activated go to Settings > jQuery UI Widgets to access plugin settings. There are two tabs to navigate the various settings. The Main Settings tab is selected by default and contains the necessary options to manage which scripts and custom code are added to the front end of your site.

You have the option of adding jQuery UI widgets, effects, and interactions (as well as custom JavaScript/jQuery code and CSS styles) to ALL pages or to specific pages. The following sections cover both methods.

Adding Global Scripts and Custom Code

To add jQuery UI scripts and custom code to every page on your site go to plugin settings via Settings > jQuery UI Widgets.

Selecting jQuery UI Scripts

Firstly select the jQuery UI scripts you want to include from the three list boxes at the top of the Main Settings tab. Each one represents a different type of jQuery UI for convenience:

There’s a button underneath each list box which allows you to quickly select/deselect all scripts. If not all scripts are currently selected then clicking the ‘Select All’ button immediately selects all scripts. Otherwise, when all scripts are selected the button text changes to ‘Deselect All’ and clicking it immediately deselects all scripts (and the button text reverts to ‘Select All’ again).

To the right of each button there is a small information icon which links to the official jQuery UI documentation for each script type.

Adding Custom Code and Styles

Below the script list boxes is the ‘Custom jQuery Code’ and ‘Style jQuery with Custom CSS’ editors where you can add your custom code to control your jQuery UI widgets, effects, and interactions, and alter the default styles.

To help adding common stubs of code to the jQuery and CSS editors there are around 34 templates provided with the plugin. Firstly, if the jQuery editor is empty you’ll want to add a standard jQuery wrapper function (that’s compatible for use in WordPress) and add your custom code inside this. This wrapper function looks like this:

[javascript]
jQuery(document).ready(function($) {
// Add code here…
});
[/javascript]

However, you don’t need to add this manually as there is a button to the bottom left of the jQuery editor that will insert it for you. The first button clears the editor, and the second button inserts the jQuery wrapper. It’s recommended you clear the editor before adding the wrapper.

Once the correct jQuery wrapper function has been added to the editor you can add code manually or choose from one of the predefined templates. Click the drop down box to the bottom right of the jQuery editor and select the template you wish to add. Then click the ‘+’ icon to the right of the drop down box to insert the template at the current cursor position.

Some of the templates (such as the menu template) require additional CSS. When you insert these templates jQuery is added to the code editor as normal, plus styles are automatically added to the CSS editor as well. A notification is added to the top of the CSS editor when this is done (see screenshot above for an example of this).

You can also use the CSS editor to add custom styles to tweak jQuery UI widgets, effect, and interactions or to just add any general custom styles you wish to be added to every page.

Choosing a jQuery UI Theme

Towards the bottom of the ‘Main Setting’ tab is a drop down box where you can choose the jQuery UI theme that will be used to style all jQuery UI widgets. The full range of default themes are available from the drop down box.

If none of the default themes are suitable then you can create your own custom theme, to match your WordPress site perfectly, via the jQuery UI ThemeRoller. This is a great way to tweak one of the existing default themes or to create a completely new one from scratch!

To create a custom theme to use on your site follow these steps:

1. Create your custom theme using the online ThemeRoller tool. When you have finished editing, click the ‘Download theme’ button.
2. On the ‘Build Your Download’ page make sure ALL check boxes are selected (this is important).
3. 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 dashes NOT spaces.
4. Finally, before downloading your custom theme, make sure the version radio button selected is set correctly
5. Now, you can click ‘Download’ to download your custom theme to your computer which will be saved as a zip file. Locate your downloaded custom theme and extract the zip file.
6. 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’.
7. 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 style sheet. Make a note of the style sheet name, you will need it later on.
8. 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 (see screenshot below). 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. I’d recommend uploading your custom jQuery theme to this folder via FTP.
9. Finally, you just need to paste in the name of your custom theme style sheet in Plugin settings, in the textbox provided.
10. 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.
11. 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.
12. The path to your style sheet would then become ‘jquery-ui-themes/mytheme/jquery-ui-1.9.2.custom.css’.
    If for whatever the reason the Plugin cannot find your style sheet file it will display a warning message on the Plugin settings page.

Adding Scripts and Custom Code to Specific Pages

Adding scripts and custom code to individual pages is almost identical to how you do it on the plugin options page when adding scripts and custom code globally. All controls to add scripts and custom code are the same, to make it easy to switch between adding scripts globally or to individual pages.

To add jQuery UI scripts and custom code to individual pages, go to the post (or page) editor and scroll down until you see the ‘jQuery UI Widgets Pro’ meta box.

The main (and only) difference is that you won’t find the jQuery UI theme drop down on the post editor meta box. This is still currently a global option, which can be set via plugin options.^*

^*This is scheduled to be added to the post editor meta box in an upcoming release.