Hiding All Children of a Certain Category

With wp_list_categories(), you can exclude categories in some ways:

  • You can hide any category with the exclude parameter, use comma separated list for multiple categories.
  • You can show only the children of a certain category with the child_of parameter.

However, there seem to be no way with to make that function completely hide the entire children of a category. Sure, you can use exclude, but if you have a gazillion of child categories and/or adding them frequently, thing can get cumbersome.

Wait. Why does this matter?

Well, a funny edge case with Pico is that when there are a ton of child category in a dropdown menu, it will create a long, empty white space even after the footer ends. It turns out that Suckerfish dropdown works by hiding those submenus from view, but they’re still there affecting margins. If you have a lot of them, the page will get longer.

So a quick solution would be to hide all children from that category. I looked around and didn’t seem to find an answer. I was hoping for the exclude_tree parameter to do the job, but based on my (admittedly limited) experiment, it won’t do whatever it is supposed to do (the trac ticket is for wp_list_pages(), but I suppose they’re the same).

CSS to the rescue

There’s probably a solution that involves writing a plugin and mucking around with PHP, but being lazy I then realized that wp_list_categories() outputs a class with the category’s ID inside each <li>. In that case, a simple display:none should do:

.cat-item-15 ul { display: none; }

The code example above will hide all children of the category ID 15. Simple, easy, with the added benefit that the children category links still show up on the HTML and therefore readable by search engine crawlers and page readers. Downside is that it only works specifically for that case; can’t really use it for a catch-all solution.

You may also like...