wp_list_categories: don’t show top level

Hi,

One way to do this with CSS would be like so:

ul:not(.children) > li > a {
  display: none;
}

I’m not sure if I understood correctly what you exactly wanted. This would hide Parent 1 and Parent 2 leaving all children visible.

To do so in PHP, do a term query for terms whose parent ID is 0, which gets all top level terms. Use the ‘fields’ argument of WP_Term_Query to only get IDs. Set the returned array as the ‘exclude’ argument in wp_list_categories().

Thanks for your answers, I’ll try them both tomorrow – stay tuned ??

Well, this is a bit weird. I’m trying to go for the CSS approach since my knowledge of CSS is better than WP-PHP.

But I’m not there yet, I always get the opposite of what I’m trying to achieve.

Here’s the simplified code:

<ul id=“allCatlist” class=“list-unstyled”>

	<li class=“cat-item cat-item-33”>
		<a href=“#” Category 1</a>
		<ul class=“children”>
			<li class="cat-item cat-item-5”> child 1 </li>
			<li class="cat-item cat-item-6”> child 2 </li>
			<li class="cat-item cat-item-1”> child 3 </li>
		</ul>
	</li>

	<li class=“cat-item cat-item-2”>
		<a href=“#” Category 2</a>
		<ul class=“children”>
			<li class="cat-item cat-item-3”> child 4 </li>
			<li class="cat-item cat-item-8”> child 5 </li>
			<li class="cat-item cat-item-4”> child 6 </li>
		</ul>
	</li>

</ul>

So, what I’m trying to achieve is that the “Category 1” and “Category 2” are not visible.

What am I missing…?

Already trying 2 approaches:

#allCatList ul li:not(.children) > a {
    background-color: red;
}

#allCatList li .cat-item:nth-child(1) a {
    background-color: yellow;
}

Weird: I always get the opposite and I’m not able to “reverse” the solution:

#allCatList .cat-item:not(.children) li {
    background-color: yellow;
}

Found it and sharing for further reference. You never know who might need it ??

#allCatList > li > a {
    //background-color: yellow;
    visibility: hidden;
}

Thanks for all the help @anssilaitila. And @bcworkz: I’m afraid your solution is a little bit to high-ended for me at this time but I’m learning a lot.

Cheers!

@twentyfourdegrees Great!

Now since your ul element has an id, your solution is just fine. Then again display: none; behaves a little differently, but I believe you found the proper solution already.