The plugin comes bundled with six themes provided by jQuery UI1. Alternatively, you can also use your own theme. The easiest way to achieve this is to create one using the jQuery UI ThemeRoller, then download the file, extract from it the part containing CSS and images, upload the contained css folder to your WordPress wp-content/upload folder and then tell Tag Groups where to find it.
Here it is step by step:
- Go to jQuery UI ThemeRoller. On their page you find on the left side “Roll your own”; or pick one ready-made theme from the “Gallery.” In the center part of the page you can see a preview.
- Under the thumbnails in the Gallery or below the “Roll your own” tab you find the download button, taking you to another page (“Download Builder”) with several further options. You will need to select the version 1.12.x and under “Widget” the components “Accordion” and “Tabs”. Other components will be added automatically.
- Go to the settings at the bottom and enter as “CSS Scope” the class .tag-groups-cloud (including the leading dot) and download the file.
- Then you unpack the downloaded zip file. You will need the “images” folder and the “jquery-ui.theme.min.css” file.
- Create a new folder inside your/wp-content/uploads folder (for example “my-theme”) and copy there these two items (e.g. with a FTP client). This place should be safe from being overwritten by future updates of WordPress or plugins. If you want to keep your uploads folder organized, you can also create a containing folder for your css and add it to the “Theme Folder Name (e.g. “tag-cloud-themes/blue-theme”).
- Enter the name of this new folder (for example “my-theme”) in the field on the Tab Groups Settings page on the backend, select “own theme” and save the changes.
You can also leave the field for your custom theme empty. You may want to do this for example if the theme of your blog already provides tabs and you like to blend the tag cloud into this design.
If the styling doesn’t appear, you could first check if your uploaded files have the correct permissions. Try to load the css and images directly in your browser (like http://www.example.com/wp-content/uploads/my-theme/jquery-ui.theme.min.css).
- What I call “Gray” is actually”Smoothness” in the jQuery UI gallery – for historical reasons. ↩