How to Hide or Style Subcategories in WordPress

Do you want to hide subcategories in WordPress or set their styles so that your category list is easier to read? In WordPress, your posts can be categorized into different categories and subcategories. This helps with navigation and search engine optimization, but a long list of subcategories doesn't always look good on your site.

In this tutorial, you will be shown how to hide subcategories and change their styles using code snippets.

Why use subcategories in WordPress?

When you write posts for your WordPress website, you can use categories and tags to organize them. When you categorize your content correctly, you can improve yourSearch Engine Optimization (SEO)This will bring more traffic to your website.

Organizing your posts can also improve your site's navigation so visitors can more easily find what they're looking for. You can even create subcategories as your site's structure becomes more complex.

For example, a travel blogger might have a category about sightseeing destinations in the United States. As the content grows, it may make sense to create subcategories for cities like Chicago, Los Angeles, and New York.

If displaying categories in a WordPress widget, you can use either a flat list or a hierarchy. Here's how each option looks on our demo site:

Subcategories can be displayed in a hierarchical list

This can be done by visiting the WordPress dashboard on theexterior condition→widgetsand check the "Show Hierarchy" box on the category widget to do so.

Whichever option you choose, the list will end up being long and unmanageable and won't look good on your WordPress site.

How to Hide Subcategories in WordPress Using CSS

We use CSS code snippets to hide and style subcategories. Code snippets can be added directly to a theme's style.css files, code snippet plug-ins (such asWPCode), or add them using the Theme Customizer in the WordPress dashboard.

Adding CSS can be tricky for beginners, and making a mistake can break your WordPress site.

Let's see how to hide subcategories in WordPress.

Steps to hide subcategories

The following code needs to be copied and pasted into the theme's style.css file, code snippet plugin or WordPress theme customizer:

.children { display: none; }

• Using the Theme Customizer to Hide Subcategories

To use the theme customizer, you first need to navigate to "exterior condition"""customizable"

Then click on the bottom of the list "Other CSS". After that, just paste the code and click "post" button will do.

You can now visit your WordPress site to make sure the subcategories are hidden. Below are before and after screenshots of the test site:

Hide subcategories before and after:

This looks cleaner, but now your visitors can't see the subcategories. Might want to check out our guide on how to display subcategories on WordPress category pages.

If this is done, then when visitors click on the "United States" category, they will see links to subcategories on that page, such as Chicago, Los Angeles, and New York City.

How to style subcategories in WordPress using CSS

It is also possible to customize the appearance of categories and subcategories using CSS. This will depend on your own knowledge of CSS and what changes you want to make to their appearance in the current theme.

Steps to set subcategory styles

Changing the style of subcategories is the same process as hiding them. You need to copy the code below and paste it into the style.css,WPCode Pluginor in the WordPress Theme Customizer:

.children {
    padding: 0 0 0 0 5px;
    margin: 0 0 0 2px;
    border-left: 1px solid #333;
}

Setting subcategory styles using the theme customizer

If using the Theme Customizer, click "post"Button.

When you're done, visit your WordPress site to preview the changes.

You can also use CSS to style other elements of your WordPress theme. For example, you can use CSS to set different styles for each category.

reach a verdict

Hiding or styling subcategories in WordPress can help you keep your site neat and easy to navigate. By using simple CSS code snippets, it's easy to control how subcategories are displayed.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: [email protected]
④ Working hours: Monday to Friday, 9:30-18:30, holidays off