Note: This plugin is provided for free. Particularly if you use it to make money or in a profit-making context, however, I would appreciate if you could make a donation or give it a 5-star rating. Thank you!
Return to the main page of Tag Groups.
- 1 Installation
- 2 Instructions
- 3 Troubleshooting
- Find the plugin in the list at the backend and click to install it. Or, upload the ZIP file through the admin backend. Or, upload the unzipped
tag-groupsfolder to the
- Activate the plugin through the ‘Plugins’ menu in WordPress.
The plugin creates a new submenu under the Settings menu. The first thing you should do is go to the “Basics” tab and select the taxonomy that you want to organize in groups. The default is “post_tag”, which is the default taxonomy that people mean when they talk about “WordPress tags”2. In most cases you just keep the default.
- Don’t select more taxonomies than you actually want to use with that plugin.
- Don’t select more than one taxonomy from each post type. You can see the post type when hovering your mouse over a taxonomy.
- Avoid using hierarchical taxonomies, such as categories.
After you have saved your changes, a new submenu “Tag Groups” will appear under the menu of that chosen post type. For “post_tag”, you find the “Tag Groups” menu under “Posts”.
Create and Edit Tag Groups
The next step is to create groups. Before you have any tag groups, you cannot assign your tags to them.
The following screenshot gives you an overview of the various functions:
- Create a new group below a row by clicking on the plus icon.
- Click on the trash icon to delete a group.
- Click on an arrow to move a group up or down. The order is relevant for displaying groups in tag clouds.
- Drag and drop a group to a new position.
- Click into a name to edit it.
- Click on the number of tags to go to the list of tags, filtered by the selected group.
- Click on the paper sheets icon to go to the list of posts, filtered by the selected group.
You can always come back later and add, rename and reorder the groups.
Deleting a group will not delete any tags, but mark them as “unassigned”.
Next, go to the tags (or your chosen taxonomy) and assign them to groups. By default, each tag is unassigned (group ID 0). In the free version each tag can be assigned only to one group.
There are several ways how to assign tags to groups or unassign them.
- When you create a new tag, select the group in the drop-down menu.
- Click on an existing tag and on the edit screen select the group in the drop-down menu.
- Click on “Quick Edit” under the tag in the list and select the group in the drop-down menu.
- Change multiple tags in one go with the “Bulk Actions” menu.
This tool lets you assign multiple tags to one group, or unassign them all at once.
- Select multiple tags.
- Choose a group in the second drop-down menu.
- Click “Apply”.
You can filter the list of tags by a group to show only tags that belong to that group. Simply select the group under “Filter off” and click “Apply”.
On the Posts page (“All Posts” menu) you find a filter above the list that filters the posts by tag groups. If the filter is active, only posts are displayed that have at least one tag that belongs to the selected tag group.
Now you have tag groups and you have assigned some or all tags to these groups. Let’s now display them in a tag cloud that shows the tags sorted by these groups.
The free plugin comes with two types of tag clouds:
- A tabbed tag cloud where each group has its own tab.
- An accordion where each group can be opened and closed vertically.
Each shortcode comes with a variety of parameters that let you show and hide empty tabs or tags, set the smallest and largest font size, open tabs my clicking or hovering with the mouse pointer, you can prepend a character or have your own separator, you can customize the tooltip and add further queries to the link, and much more. You can find the description of these parameters on a separate page and also in the Settings.
Using these parameters and possibly some custom CSS, your tag cloud can even get rid of all tabs and just show the tags of one group.
Some points need to be highlighted:
- If you select more than one taxonomy then all the terms of the various categories will be mixed into one cloud.
- If you don’t use “post_tag” as your tag group taxonomy then you have to tell the shortcode which taxonomy it has to show. (For example taxonomy=”product_tag”7 if you use WooCommerce product tags.)
- If you need to list tag groups in parameters, use the IDs that you find on the Tag Groups page (where you create and edit groups).
You can choose from some default designs in the Tag Groups Settings, or you create your own theme. See “Creating Your Own Theme” below. That procedure is for advanced users who have access to the file system of the WordPress site.
If you need your tag clouds to match your theme’s colors and design, you might have to consult the creator of your theme. Adjusting the styling is beyond the capacities of this plugin.
By default the function tag_groups_cloud returns the html for a tabbed tag cloud. If you want to add the tag cloud directly into your theme, you could do it like this:
if ( function_exists( 'tag_groups_cloud' ) ) echo tag_groups_cloud( array( 'amount' => 10 ) );
The array can, of course, contain also more parameters:
array( 'include' => '1,2,5,6', 'amount' => 10 )
If the optional second parameter is set to ‘true’, the function will return a multidimensional array containing tag groups and tags:
if ( function_exists( 'tag_groups_cloud' ) ) print_r( tag_groups_cloud( array( 'orderby' => 'count', 'order' => 'DESC' ) , true ) );
post_in_tag_group( $post_id, $tag_group_id )
Checks whether the post with the given
$post_id has at least one tag that is part of the tag group with the given
$tag_group_id. Returns true or false.
You can find more examples of PHP code on this page.
Examples of Tag Clouds in Action
Examples are available on separate pages.
The free Tag Groups plugin gives you all you need to organize your tags in groups and to display them on your front end. If you like to extend the functionalities to posts (replace the tag box with one where tags are available in groups) or assign the same tag to many groups, you should take a look at the premium plugin.
Creating Your Own Theme
The tag cloud comes bundled with three themes 8. 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).
The tag cloud doesn’t show in a text widget, instead I see the shortcode
Try “Enable shortcode in sidebar widgets” in the settings.
The list on the posts page is messed up
Some users have experienced interference with other plugins that caused the list being messed up, showing wrong content etc. If that happens, turn off the filter in the settings at “filter on post admin”.
Styling doesn’t seem to be effective
Check if the values for div_id, div_class etc. are valid names for ids and classes. Maybe you also need to purge the cache of your WordPress installation. Use the developer tools of your browser to check if your styling gets overridden by other instructions (try “!important” to enforce yours).
The list on the Tag Groups page doesn’t load. I only see the wheel spinning forever
This usually means that somewhere your blog outputs a warning or alert that interferes with the data transfer to your browser. In most cases it is caused by another plugin.
Try the following:
- Deactivate all other plugins and see if that helps. If yes, re-activate them one by one (and keep checking the tag groups page) to identify the one that causes the message.
- Add to your wp-config.php file the following lines:
define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
Then reload the tag groups page and afterwards check the content of the debug.log file in the wp-content folder if there is any error message.
- In that case you may have to fix the file permissions for css and js files. ↩
- Note: The more general word for “tag” in WordPress is “term”. ↩
- because the standard WP query would connect them with the condition “AND” ↩
- because it interferes with the category pull down menu ↩
- Read more about shortcodes here. ↩
- If you do so, it is recommended to create a child theme first. Otherwise your edits will be overwritten next time you update that theme. ↩
- If you copy & paste code from this page, you will have to fix the quotes in your editor. ↩
- What I call “Gray” is actually”Smoothness” in the jQuery UI gallery – for historical reasons. ↩