Excluding categories from display with the Categories List Block using Custom CS

You’ll need to determine the term IDs of any categories you want to hide. You can then do something like this (only for a HTML category list, not a drop down):

.cat-item-123, .cat-item-456 {
    display: none;
}

To target a specific page’s categories list, look at the page’s body tag classes for something unique to the page. The classes for the tag are theme dependent, but we often see a class similar to postid-789. Include the class in appropriate selectors. For example:

.postid-789 .cat-item-123, .postid-789 .cat-item-456 {
    display: none;
}

For drop down category terms, the selector would instead be similar to:
option[value="123"]
if the term’s ID is 123

Thank you for the suggestion.

I used the appropriate category ids and tried it but it did not work.

I tried it using .cat-item-123 and cat-item.cat-item-123 but neither worked.

I am using only an a HTML category list and not a dropdown.

Any further suggestions?

Thank you for your help.

Provide a public URL so we can check the rendered CSS and give you an appropriate selector to use.

My site is not publicly accessible yet. I hope this screen shot showing the situation will suffice to ascertain what code is needed.

Thank you.

Unfortunately, a screenshot is not useful in situations like this because:

1) Some other CSS code on the page could be overriding the one you added, and this can’t be checked from a screenshot

2) Your implementation may be incorrect, and this can’t always be seen from a screenshot.

For instance, looking at your screenshot, it seems you added CSS styles where you were supposed to add CSS class(es) in the block editor (see image below). And that’s only what I can see… who knows what else is on the page!

Note that if you’re using a classic theme, you should add the CSS in APPEARANCE => CUSTOMIZE => ADDITIONAL CSS.

You should NOT add your CSS styles in the “ADDITIONAL CLASS(ES)” box in the block editor. That’s for classes, not styles.

If you’re still unable to work this out, then I’m afraid the only way I can help you with this is if you could provide a public URL where I can examine the code behind the page.

That you for explaining the problem.

I would ideally like to exclude/include specific categories in specific blocks on a particular page and not exclude them from the entirety of a page and/or the entire site, as I believe would happen if I applied the code in the area called APPEARANCE => CUSTOMIZE => ADDITIONAL CSS.

So, I guess I should say now I am looking for some code using CSS classes that would achieve the goal that I can apply in the “ADDITIONAL CLASS(ES)” box in the block editor if that approach is viable.

Can I provide a login to you via email so that you can view my site? I don’t have any pages of the site visible publicly yet.

Thanks again.

I’m sorry but we do not allow forum members to log in to other’s sites, nor to engage in off-forum contact. We want all communication to be here in public for everyone’s safety. This may seem rather extreme, but on a public forum open to everyone there could be people with bad intent. And we have other members who are quite naive when it comes to computers.

I’m not suggesting anyone participating in this topic has bad intent or are naive, but others following along may not realize how dangerous it can be to let complete strangers into their site. Even if this situation is relatively safe, we do not want to give anyone the idea this is a good, common practice.

To answer your other question, yes you can use the additional classes block setting to specify a class so your CSS will only apply to that block. Use this in place of the unique page ID selector I suggested earlier. It’s OK to place your custom CSS code in Additional CSS even though CSS there is placed on every page for your entire site. A unique post ID body tag or custom CSS class for the block ensures the styling will only apply to that specific page or block. CSS placed in Additional CSS has a very good chance of overriding any other equivalent rules that might already be in effect.

However, any element style attributes or CSS rules with !important modifiers are very difficult to override with other CSS no matter where it occurs on the page.

Thank you for the moderation and additional advice.

Based on what I?understood from your suggestion, I?added this code to the “Additional CSS” box inside the customizer options for the site (the post I am working with is #239 and the first two categories I want to hide are numbered 30 and 47).

.postid-239 .cat-item-30, .postid-239 .cat-item-47 {
display: none;
}

That didn’t result in the categories getting excluded from display, however, so I am not sure what I have failed to understand or apply to get this to work.

Also, it would seem if this code did work that it would hide these categories from the post entirely, but I?actually only want to hide them from one “Categories list block” on the page while including them in another “Categories list block” on the same page.

Any further advice how to achieve this would be greatly appreciated.

Thank you again.

You may not have done anything wrong. The problem is we cannot see the elements in question on a live page, so are unable to offer accurate advice. The suggestions offered are generic, based on what we can see on our own sites, which may not be applicable to your specific site.

Understood. So, practically speaking then, I need someone assess the exact situation happening on my site.

Could you advise how I can arrange that without going outside the rules of this forum?

I am not so naive as to give an unknown person a login to my site, but I perhaps someone could just view the site using a browser inspector and diagnose the problem. Am I wrong?

Thanks again for your help.

I perhaps someone could just view the site using a browser inspector and diagnose the problem. Am I wrong?

That has to take place here in the public forums. No private communication or exchange of contacts is allowed.

That’s why I asked you to provide a public URL in my very first response.

If you won’t provide a public URL, I’ll recommend you post a job ad and hire someone to help you privately: https://jobs.wordpress.net/

Good luck!

I see. I will need to complete work on other parts of my site before making a public url available. So, I will attend to that and later seek further support on this issue once I?can provide the necessary.

Thank you for all your help.