Are you interested in concealing subcategories or enhancing their appearance for better readability on your WordPress site?
WordPress allows you to categorize your posts into various categories and subcategories, which aids in navigation and search engine optimization. However, an extensive list of subcategories may not always be visually appealing.
In this guide, we will demonstrate how you can utilize a code snippet to hide subcategories and modify their style.
What is the Purpose of Using Subcategories in WordPress?
When creating posts for your WordPress website, it is essential to organize them using categories and tags. Proper categorization can significantly enhance your SEO, leading to increased traffic on your site.
Moreover, organizing your posts with categories and subcategories can improve your website’s navigation, making it easier for visitors to find the content they are looking for. As your site’s structure becomes more complex, creating subcategories can help you better organize your content.
For instance, a travel blog may have a category for sightseeing destinations in the United States. As the blog’s content grows, it may be necessary to create subcategories for specific cities such as Chicago, Los Angeles, and New York City.
If you choose to display your categories in a WordPress widget, you can use either a flat list or a hierarchy. Each option has its advantages, and you can choose the one that best suits your website’s needs.
To enable the display of a hierarchical structure for your categories in WordPress, navigate to Appearance » Widgets in your dashboard and select the ‘Show hierarchy’ option in the Categories widget.
No matter which option you select, the category list will eventually become lengthy and difficult to handle, and it will not appear attractive on your WordPress website.
In this tutorial, we will demonstrate how to conceal subcategories to simplify navigation of your category list. Additionally, we will demonstrate how to format the subcategories for a more polished appearance.
How to Conceal Subcategories in WordPress with CSS
This article will demonstrate how to use CSS code snippets to conceal and customize your subcategories in WordPress. These snippets can be added directly to your theme’s style.css file, a code snippets plugin like WPCode, or through the Theme Customizer in your WordPress dashboard.
For beginners, adding CSS can be challenging, and a mistake could potentially damage your WordPress site. If you’re unfamiliar with using code snippets, we recommend reviewing our guide on how to effortlessly add custom CSS to your WordPress site.
Now, let’s explore how to hide subcategories in WordPress. To do so, you’ll need to copy the code below and paste it into your theme’s style.css file, code snippets plugin, or WordPress Theme Customizer.
.children {
display:none;
}
To utilize the Theme Customizer, you must first go to Appearance » Customize and select ‘Additional CSS’ located at the bottom of the menu. From there, you can easily paste the code and click on the Publish button.
To confirm that the subcategories have been hidden, you can visit your WordPress site. We have provided before and after screenshots from our test website for reference.
The appearance is now more streamlined, but the subcategories are no longer visible to your site visitors. To address this, we recommend referring to our guide on how to showcase subcategories on your WordPress category pages.
By doing so, when your visitors click on the United States category, they will be able to view links to the subcategories, including Chicago, Los Angeles, and New York City, on that particular page.
How to apply CSS to customize the appearance of subcategories in WordPress
To customize the appearance of your categories and subcategories, you can utilize CSS. The extent of customization will depend on your CSS knowledge and the specific changes you wish to make to their appearance in your current WordPress theme.
For instance, if you have a hierarchical display of subcategories, adding vertical bars can help you distinguish which categories are on the same level. Here’s how you can achieve this.
The process of changing the style of your subcategories is similar to hiding them. You’ll need to copy the code provided below and paste it into either style.css, the WPCode plugin, or the WordPress Theme Customizer.
.children {
padding: 0005px;
margin: 0002px;
border-left: 1pxsolid#333;
}
If you utilize the Theme Customizer, ensure to click on the Publish button after making changes. After that, you can visit your WordPress site to preview the modifications. Below are the before and after screenshots from our test website.
You are welcome to modify the code to personalize the style according to your preferences. Additionally, CSS can be utilized to style various components of your WordPress theme, such as customizing the appearance of specific categories.