View Categories

Create Your Own Accordion and Tab Themes

The Tag Groups plugin comes bundled with several themes provided by jQuery UI. These apply to Alphabetical Tag Cloud, Tabbed Tag Cloud and the Accordion Tag Cloud features.

Alternatively, you can also use your own theme. The easiest way to achieve this is to create one using the jQuery UI ThemeRoller. In this guide we’ll show the six steps to create a new theme.

  • Go to jQuery UI ThemeRoller.
  • You can click “Roll Your Own”, or pick a ready-made theme from the “Gallery.”
  • Under the “Roll Your Own” tab, you can modify the Font Settings, Corner Radius, Header/Toolbar, Content, and more. In the center part of the page you can see a preview of your theme.
Build your own JQuery gallery
  • When you’re finished, click the yellow “Download theme button”.
  • On the next “Download Builder” page, select the version 1.12.x.
The JQuery Download builder
  • Go to the settings at the bottom and enter as “CSS Scope” the class .tag-groups-cloud (including the leading dot).
  • Download the file.
Download your JQuery UI theme
  • Unpack the downloaded zip file. You will need the “images” folder and the “jquery-ui.theme.min.css” file.
Unpack the downloaded zip file for the theme
  • Create a new folder inside your/wp-content/uploads folder. For example, the folder can be “my-theme”.
  • Add your two items into the folder.
  • Go to “Tag Groups” in your WordPress admin area, then “Front End”, then “Themes and Appearance”.
  • Enter the name of this new folder in the “own theme” field.
  • Save the changes and check your new design with a Alphabetical Tag Cloud, Tabbed Tag Cloud, or Accordion Tag Cloud display.
Creating a new theme from JQuery YI

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, 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).