With WP UI 0.5.5, it is now possible to use multiple custom themes downloaded from jQuery UI themeroller. Till now it was not straight away possible to use even multiple jQuery UI themes on the same page, but trust me, with this guide, it’s a breeze!
Create and download the custom theme from themeroller
Visit the jQuery UI themeroller page. You will now land on the Roll Your Own tab. You can start customizing your theme from here.
If you want to base your custom theme on another theme, click the “gallery tab”, and click edit under the desired theme.
Customize the theme to your heart’s content.
Now comes the essential part, entering the correct CSS scope and folder name. I chose .wpui-custom and wpui-custom as an example, and this will be the argument to the WP UI shortcodes later on.
[wptabs style="wpui-custom"] .................... [wptabs type="accordion" style="wpui-custom"]....
- As it is essentially a CSS class name, it shall contain alphabets, letters(not as the first character though), hyphens and underscore.
- Make sure you enter the preceding dotbefore the CSS scope.
- You can also click “unselect components“, before clicking download. This will cut down the download size to 400KB~
Click Download and then save the file (named something like jquery-ui-1.8.xx-custom.zip.)
Uploading the files to your server
Unzip the downloaded file and in the folder unzipped, navigate inside the CSS folder. There should the folder “wpui-custom” , as per our example and we chose that at the last step. This is the only folder we need to upload.
Fire up your FTP client, login to your server and browse to your uploads directory.
If the wordpress blog is in http://example.com/blog ,then the uploads folder should be at /blog/wp-content/uploads/ , assuming that your wordpress is installed in the folder “blog” present in the root folder. Basic guide on using FileZilla is at codex.
This should brief that in a bit.
That’s all, the hard part’s over. Now the fun part.
Manage jQuery UI custom themes with WP UI
- Go to wordpress admin -> WP UI options page -> Style Tab -> Manage jQuery UI custom themes. See that empty table over there? That’s ready for some fresh made Custom themes.
- Click scan uploads, it should start scanning the uploads/wp-uidirectory and add them to the list.
- Do you have your theme uploaded elsewhere,want to link the theme? Click Add Theme.
- Need to edit that last entered theme? just Double click anywhere on the row, edit box will open up.
Now just click changes and you are ready to go!
Using the custom themes with Shortcodes
Remember that shortcode argument I told you earlier? Yes, that is now the style’s name. To use it, take for example with our example customize-downloaded-custom(ah!) theme “wpui-custom” ,
Now view the front end of your blog, your tabs and accordion should be using custom themes you created!