Cut Category Clutter and Toggle Visibility
54
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!
That’s ve-e-ery cool :D
I love expand/collapse features.
They are attractive and very pleasant to use.
I use it in http://www.truden.com in many places.
BTHW, did you change your background color, Michael?
I would do that with my blog, but too bad I don’t use WordPress for Slyvisions.com. I’ll use it for my other blog. Nice tip!
Sly from Slyvisions.com
And i used to think I’m the only stupid person to use expandable lists on my blog! Anyway.. great post :)
Excellent tutorial! I was thinking of reorganising the Categories in my blog and this is something I ought to look into.
By the way, I’ve changed the upper part of my blog’s theme. What do you think?
Truden – Nope, the colors haven’t changed. Did you get a new monitor perhaps? (And I like your use of collapsing sections in truden.com – Looks good. :D )
Sly – Cool. :D . The only part that is specific to WordPress is the category code itself. If you wanted to, you could adapt the code to any platform if you played with it a bit. :)
Nuts & Milk – You have the most stunning Blogger blog I’ve ever seen! Fantastic work. :D
pablopabla – It looks far better! I’m glad you got rid of the big red box, and I like the horizontal navigation. :D
Can I make 2 suggestions just? Put some RSS subscription details in the top of the sidebar (The footer isn’t visible enough), and turn the title at the top into a link. (You can keep the text white, not-underlined etc. But it should be a link. :) )
Thanks Michael
I’m glad you liked it!
No, Michael, I didn’t change my monitor, but only now I noticed that my laptop is showing different colors on daylight and electrical light.
On electrical light your background color looks like tending to pink (slight nuance).
I’m glad you like my collapsing blocks.
I made it for the users. They like to organize the site in their own way (what to see and what not / using cookies to keep the position)
Waiting for your next article :D
Ahh Truden, I think I know what you mean now. The background of the little code sections?? I actually think I’ve seen what you mean before! I’ll look at that tonight, on electrical light as you said, and sort things out. Thanks for pointing it out to me!
And cool – It’s good to know you’re listening to your users. :)
What you said about organizing the site is exactly what I thought of when I first saw it. It reminded me of forums which allow you to do the same thing with the different sections. Fantastically useful for regular visitors!
No, Michael, I mean your background (#f6f3e9), but it is normal to see it different on different monitors and different light. You can do nothing about it.
I suppose that the red on my laptop monitor is too high.
I must reduce it a little.
Ahh – Okay, I’ll definitely look into this tonight. I’ll play with my monitor settings a little, and see how things come out. I might switch to a more web-safe color if things go badly. :)
Thanks again,
Michael
thanks so much for taking your time to write this!.
I just now got to read it- yesterday was crazy :)
Here’s a questions. I have a catagory converter plugin where I had already started grouping… for example
Main topic would be “family”
I basically made that a category parent
then under I put.
-marriage
-lukas
-owen
-in-laws
etc….
Of course when I show my categories I had thought that it would do exactly what you are describing, but instead it just re-ordered my list… no toggles.
Is there a way to shortcut some of this by combining this code with category converter or should I just start from scratch???
And seriously I *try* to read about 100+ blogs (though lately I barely get to reading anymore!) and this is one of my favorite blogs.
I found the plugin you mentioned. It seems that it is just a quick way of editing categories?
By giving a category a parent in WordPress, it only changes one thing: the URL of the category (eg. your marriage category will now be at http://www.mommyzabs.com/category/family/marriage).
I can see that you’ve been pretty lucky with your URLs though (The posts don’t have the category names in the address bar). Most blogs couldn’t get away with changing categories like that, because it would break a lot of links. For you, only the page category links would change, which probably doesn’t matter too much to you (Do many sites link to your category pages?).
To get the toggles though, you’d have to use the method I wrote about anyway I’m afraid. The only advantage you’d have with ordering the categories with that plugin is that you could change the wp_list_categories line a little, allowing you to add new subcategories to each group through the WordPress admin panel, without having to touch your theme files again. (If you want to do that, let me know and I’ll show ya. It would only take a second to explain. :) )
Does that help answer your question at all?
And hehe – Thanks! I really do appreciate the compliments. If this posts help even just you, then it makes writing it more than worthwhile. :D
finally got to reading your reply- time time time! :)
I’m afraid to even open my rss reader right now so fortunately it’s often coming to mind to type your address on my browser.
I am hoping to get to trying this category method tomorrow or saturday. If I get that all nice and neat I’ll probably then want to hear about adding new cat’s easier. On my mom site it is so hard to narrow down cat’s since my topics are everywhere.
luckily with my other blog categories aren’t as abundant! I can build it right!
As far as address title I had help with that (formatting the permalinks). No one really links to category pages, every once in awhile I have but I don’t think it will effect much.
You have any idea how to alter it so that you can display images for sidebar titles in K2???? Just a long shot topic idea :)
-mz
I have it all done, except I can’t figure out where to put the one after part. Either I’m blind or k2 makes it more difficult to find?? The rest didn’t take as long as I thought it would thogh!
AND I just realized that a lot of categories that I have deleted awhile ago, are still showing on my sidebar? Strange.
-mz
Yep – You can use images as sidebar titles, but I think we’d confuse each other if we tried both things at once! xD
I’ll help ya out with those after the categories are sorted. :)
In K2, the bit is right after where you found the bit. The difference is that there is some extra code in it. :) (Don’t worry about that code. Just leave it there.). It will look like this in k2:
<body class=”<?php k2_body_class(); ?>” <?php k2_body_id(); ?>>
Okay, i put the code after that line in k2 header.php
but no change?
hm.
Oh and for sidebar images- more of a post idea then “please take your precious time and tutor me.” Ha.
I’m gonna go click on your ads a couple times :)
nevermind, you took your ads away.
lol – Yep – No more ads. The new stuff are affiliate links. I think they’re less ugly than the old advert was. :D
You have the 2 scripts in right, so now you have to go onto step 3. :) (The harder step. :( )
Michael, I’m having problem to unsubscribe from this comments. When I click on the link in my email I’m getting:
You may not access this page without a valid key.
And you don’t have “manage your subscriptions” link on the comments page.
It’s not a problem for me (this conversations will end up one day :D ), but it could be a problem for the other users.
Hi Truden – Thanks for letting me know about this problem. I tested it all out again, and the email link worked for me, but I know how volatile emails can be! I’ve added the “Manage Subscriptions” link you mentioned. Hope that works for ya instead. :)
(Sorry about that – I know we’ve been getting quite off-topic on this post! xD )
No problem, Michael.
I just thought that it would be good to know it.
I already did 3 when I did one- I just didn’t know how to do 1, that is why I’m wondering why it hasn’t worked- I have done all of it?
Mommy Zabs – You haven’t done step 3 I’m afraid. What you did with the plugin only affected URLs (Not the actual template). That’s what I was trying to explain in the first comment.
I guess I wasn’t clear enough. :(
BUT you have made it easier for yourself. All you need to do is take sidebar.php and delete the code for the categories, and replace it with something like this:
<ul id="hiddencats">
<li onclick="show('cat1')">Group Title
<ul id="cat1">
<?php wp_list_categories('title_li=&child_of='); ?>
</ul>
</li>
<li onclick="show('cat1')">Group Title
<ul id="cat1">
<?php wp_list_categories('title_li=&child_of='); ?>
</ul>
</li>
<li onclick="show('cat1')">Group Title
<ul id="cat1">
<?php wp_list_categories('title_li=&child_of='); ?>
</ul>
</li>
</ul>
Adding in the category ID of each of the parent categories you made, after the child_of= :)
I know I did that 2 nights ago. hmmmm. is it not showing up on my source page?
let’s see if i can insert an image in here…
did i put it in the wrong place?
okay putting an image in there did not work.
tell me if you can see this from the link:
http://www.reuters.com/article/healthNews/idUSPEK27505720070824
okay i’m really puffing up your comment number, that is the wrong copy paste link :) HA
http://www.mommyzabs.com/wp-content/themes/k2/images/Picture%2014.png
Ahh. Are you using widgets? If so, that will be why. :(
To get around that, you should install the King Widget Framework (It’s not really a plugin. Just needs to be uploaded. :) ), and then the King Text Widget. With that installed, your normal text widgets will be fancier, allowing you to paste all of the code you put into sidebar.php, into that widget. :)
(Sorry – I should have mentioned widgets in the article!)
Yes k2 is widgets for sidebar- in fact i don’t really know it any other way. I wonder if that is why a lot of the plugins that have to do with sidebar don’t work for me? maybe? like to commmentors, I can’t get that to work.
i love the idea of fancier widgets! To you think that will make it so that i can use an image for the sidebar titles?
Thanks so much AGAIN!
Yep – That’s why those plugins wouldn’t work. :)
But with that new plugin I’ve just given you, you can install any sidebar plugin you want, so long as you put the code into one of the fancy text widgets and check the “Include php” box. :D
Let me know how it goes for you!
Hi Michael,
I am struggling with categories, too, and did think of doing a drop-down box. I have a few on my site, using code from flooble — but this code has been problematic. I moved blogrolls to their own page (http://www.sbpoet.com/blogrolls.html), where the drop-down doesn’t work at all.
I use TypePad, and I don’t use advanced templates — so all this must be done with Typelists. Are you familiar with that?
Can you recommend a code for me (non-techie) that might work with Typelists?
I’m very impressed with your blog, and have subscribed.
Hey sbpoet,
I haven’t used Typepad before, and they won’t let me try out the free trial without giving my credit card details (I’m pretty paranoid about giving that out online!)
Could you email me (address is my first name at this blog) a screenshot of the typelists screen please? I’ll be able to let you know if Typelists give you enough power for this. :)
And thanks – I’m glad you’ve subscribed. Hope to see you around!
I didn’t read the comments but this is a very bad idea. In your demo you listed MS and Apple, and the appropriate children. But I and others would probably mark a post with MS and XP. This way of hiding categories, you will never be able to access the main MS, or Apple categories.
Hi Ryan,
There wouldn’t be MS or Apple categories.
This method is based on the idea that your original list of categories are all the subcategories in the example (Ie. XP, Vista, Leopard etc.). Microsoft and Apple are only added in during this process, to label their sub-categories, and they are never made into categories. :)
There is a few problems with that…if you have more than 5-10 categories you’d be there all day, either hardlinking each one or doing your master label and include the various categories. You still have to edit the sidebar every time you made a new category. Also
If you had only 5-10 categories, there would be no need for this at all. That number is easily manageable for a reader. :)
But yes, you’re right that you would have to edit the sidebar with each new category you add. It is still a lot better than allowing a list the size of King Kong to build up in your sidebar though.
I would say that it all depends on the layout. If you have lots of things going on, 10 categories look nasty.
I haven’t even thought about what an accessibility nightmare this may be.
Ryan, I think you’re being pretty critical of something you haven’t thought a lot about. You hadn’t read things properly with your first complaint, and it seems you haven’t again. The following is taken from the post:
“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!)”
How much more accessible do you want?
I’m all open to criticism. I’d just like if you could give a little more basis to your criticisms please. :)
*sigh*
XHTML valid != accessible. :( Sorry if you think that, if you want backup for this, a quick and dirty example is a flash site. Yeah it is probably 100% XHTML valid but it is 100% inaccessible about 75-90% of the time, but this is getting from the point. I know a number of blind users that do not disable JS.
Obviously not. Try reading my post on valid code…
Incase you didn’t understand the paragraph I quoted to you:
If the user has JS disabled, then they will be given the original list of categories as normal!
THAT is accessible! Why not actually test the demo before writing these comments?? :(
Hi, thank you for this nice script!
It’s not working entirely for me yet, the listed categories don’t show up under the goup names.
Link: http://www.noukiesims2.net/wp it’s the ‘Stuff’ list. Could you check the coding and give me a tip?
Link to coding part: http://www.noukiesims2.net/Coding02.txt
Thanks in advance, this will really help if it works!
Geetings from Nouk :)
Sorry, forgot to click email notification…
I have it working now, I made the mistake of having subcategories!Thank you for writing this, my page looks much better!Thanks again, Nouk :)
Hey Nouk,
I’m glad you got things working (And I love the faint color you used to show the sub-links. Well done). You can make the subcategories work with this if you want them to, but it’s a little more work (You just need to take a good look at the HTML that WordPress is making, and style things accordingly). If I went through it in the post though, I think it would have just been over-complicating the process for most people. Sorry.
Hi Michael,The faint color was all the work of the original creator of the theme :DBut I like it too, it makes it look more distinctive instead of just green.I don’t think I need to put anything else in subcategories, since this script already takes over the function I had for the main categories anyway :)Thanks again, I was searching for a long time for a plugin, and never found anything that worked. This is excellent, just what I needed!Greetings from Nouk
Nouk,
Well, congrats to the original creator then! ;)
I’m glad you’re happy though. Cya about!
Hi Michael,
I have been searching for a couple of hours to find a way to list my posts in a hierarchal manner under the categories, not to mention the further hours spent fiddling on the website with widgets and categories. A good learning experience for me I suspect so not time wasted. And then I found your site. :)
Your script for managing groups of categories looks perfect! I’ve read through all the comments and visited the websites and am very impressed.
Is there a script or workaround so I can have my posts as children with the categories as the parents? I really want exactly what you have done with Microsoft and Apple.
My site is a work in progress. After ignoring it for 6 months I’m now back (yesterday) with a new theme and an upgrade to 2.7. I also need to probably relink everything on the front page but that’s not a problem.
Thanks, I hope this will work.
Kathy
Hey Kathy,
Yep, you coukd change the code above to get back, by replacing lines like:
Which shows the list of categories, to listing the posts. However, that would get really messy in your sidebar, even with the hide script.
Take a look at my sitemap page: http://www.problogdesign.com/site-map/
The links on it are a bit of a mess and should be styled differently, but it’s basically what you said. That page is made automatically for me by this plugin: http://www.dagondesign.com/articles/sitemap-generator-plugin-for-wordpress/
Might find it useful!
Thanks Michael,
I’ll have another look at Dagon Design. They have a heap of interesting plugins. It was the coding that put me off earlier.
Kathy
Hope you find something you like! Come back here and let me know if it doesn’t work out. :)
Hi Michael,
I am stuck on part 3, I have this code in my sidebar.php:
I have about 16 categories but only want to apply the toggle effect on one of them which is about number 14 down the alphabetical list in the sidebar. Can you please help me with implementing number 3 above in the attached code?
Thanks for your help!
Love your new banner :)
I’ll have another look at Dagon Design
Hi, nice blog