Grouped Categories
Photo by *Micky* Categories are very easy to set up in a blog. So easy in fact, that we can often get carried away and end up with dozens of categories, all clogging up space in our sidebars. Rather than deleting these categories, we can remove the clutter by linking the categories into groups.

We then show only the group titles in the sidebar, and when a group title is clicked, the list of categories in that group expands beneath it. You can see a demo here.

This solution is very easy to implement, will remove the clutter for the vast majority of your users. For your users, and search engines, who have disabled Javascript, the complete list of categories will be shown as normal (And for the code junkies, it’s also XHTML valid!)

1 – Group Your Categories

Before you begin, it is best to have the groups already sorted. Write out a list of your categories, and list similar categories beside each other. Eventually you will be able to split the original list into a small number of separate lists. These lists will be your groups.

2 – Copy and Paste

In WordPress, open header.php, and right above the </head> tag, paste the following:

<script language="JavaScript" type="text/javascript"><!--
document.write("<style type='text/css'>ul#hiddencats li ul {display:none;} ul#hiddencats li {cursor:pointer;} ul#hiddencats li ul li {cursor:auto;}</style>");
// --></script>

Now, after the <body> tag (Also in header.php usually), paste the following:

<script type="text/javascript">
function show(ele) {
var srcElement = document.getElementById(ele);
if(srcElement != null) {
if(srcElement.style.display == "block") {
srcElement.style.display= 'none';
}
else {
srcElement.style.display='block';
}
}
//return false;
}
</script>

3 – Update Your Sidebar

In sidebar.php, find the following line: (The text in brackets may look slightly different)

<?php wp_list_categories('title_li=<h2>Categories</h2>'); ?>

Delete the line, and replace it with:

<ul id="hiddencats">
<li onclick="show('cat1')">Group Title
<ul id="cat1">
<?php wp_list_categories('title_li=&include='); ?>
</ul>
</li>
</ul>

In this code, replace the “Group Title,” text with the name of your first group. Then in your WordPress admin panel, load the Manage > Categories page. Every category will be listed, along with a “Category ID” in a column to the left of the name.

Make a note of all the category IDs for the categories in your first group, then after the “&include=” section of the code above, write in the IDs, in a comma separated list, going from lowest to highest.

For example, if I found my categories IDs for the first group to be 15, 4, 29 and 2, then the wp_list_categories line in my code would look as follows:

<?php wp_list_categories('title_li=&include=2,4,15,29'); ?>

4 – Add More Groups

To add a second group, you follow exactly the same steps, with one small difference. After the </li> from the original code, paste the following:

<li onclick="show('cat2')">Group Title
<ul id="cat2">
<?php wp_list_categories('title_li=&include='); ?>
</ul>
</li>

IMPORTANT – Notice how the “cat1“s from the original code have changed to “cat2.” For each additional group you add, make sure you adjust this value. Have a look at the source code of the example to see how the final code is structured.

That’s it. You can add as many groups as needs be, and use CSS to style it all. If you do use this on your blog, please leave a link in the comments here. I’d love to see how it turned out!

What’s more is that this script isn’t specific to categories. You can toggle the visibility of any element in your blog. Can you think of any creative uses for it?

Enjoy this post? You should follow me on Twitter!