Examples of the Shuffle Box

The Shuffle Box is a tag cloud that allows you to filter the tags by their names or by their tag groups.

Options

See all parameters.

Code

[tag_groups_shuffle_box prepend="{" append="}" custom_title="{count} posts for all groups"]

Output

Hide the buttons to filter groups

[tag_groups_shuffle_box prepend="{" append="}" custom_title="{count} posts for all groups" show_group_filter=0]

Hide the button to show all groups

[tag_groups_shuffle_box prepend="{" append="}" custom_title="{count} posts for all groups" show_filter_all_groups=0]

Initially show a group

After loading the page you see the group with the ID 1.

[tag_groups_shuffle_box prepend="{" append="}" custom_title="{count} posts for all groups" include="1,2,3,6,7" initial_group=1]

Customize the text

[tag_groups_shuffle_box prepend="{" append="}" custom_title="{count} posts for all groups" include="1,2,3,6,7" placeholder="Enter text" not_assigned_name="unsorted" show_all_name="any group"]

Different design for the tags

[tag_groups_shuffle_box include="1,2,3,6,7" div_class="tag-groups-theme-tag-with-hole" largest=14 smallest=14]

Since this theme was not originally created for the Shuffle Box, we need to add some more custom styling:

.tag-groups-theme-tag-with-hole .cm-shuffle-box-input, .tag-groups-theme-tag-with-hole .cm-shuffle-box-button {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 2px 5px;
	font-size: 14px;
	line-height: 14px;
}
.tag-groups-theme-tag-with-hole .cm-shuffle-box-button-active {
	color: black;
	border: 1px solid black;
}

.tag-groups-theme-tag-with-hole .tag-groups-tag {
	margin:3px 6px !important;
}

.tag-groups-theme-tag-with-hole .tag-groups-tag a {
 	line-height:15px !important;
}