WordPress installation by default comes with few widgets. In addition, your theme and plugins can add additional widgets to include new features. You can go to “Appearance > Widgets” section in your WordPress administrator dashboard to view all available widgets in your setup. Out of all widgets, “Categories” is one of the default widgets you can use to display the blog post’s categories in the sidebar/footer. In this article let us explore more on how to add and customize WordPress categories widget.
When you create a post in WordPress, it is mandatory to assign a category to it. The default WordPress installation comes with category called “Uncategorized” which you can’t delete it. What you can do is to change this uncategorized to different name and use a default category for your site. This will help to avoid users seeing “Uncategorized” section in your published site. It is a good idea to always assign a proper category before publishing your post. Otherwise, when you save the post as draft or publish without assigning a category, WordPress will automatically use the post to default category. You can navigate to “Posts > Categories” section to view/edit/create categories for your site.
Adding Categories as a Widget
When you have multiple categories, you may be interested in showing them on your sidebar or footer. Since categories are sections of your site, this will help users to quickly find the section they are looking for without searching the site. Go to “Appearance > Widgets” section and add “Categories” blog or widget to your sidebar or footer area. WordPress 5.8 or later versions use block based widget editor where you can search and add the categories block. As you can see the widget will automatically pull out and display the list of categories available in your site.
If you are using classic widget editor, then drag and drop categories widget to the required place.
Note: If you are using the default twenty-twenty-theme, you will not see “Widgets” menu. Instead, you will find “Appearance > Editor” section where you can create page templates using full site editing. This could be the same situation with some of the blocks based themes. Since this is at preliminary level, we will discuss block and classic widget based editor in this article.
Default Categories Widget Options
After adding the widget to your sidebar or footer area, you can drag and drop to move up/down or even move from sidebar or to footer and vice versa. The categories widget has the following options:
- Display as dropdown – show the categories in dropdown or list view
- Show post counts – indicate the post count against each category
- Show hierarchy – show parent-child relationship within categories
- Show only top level categories – only show parent categories (only available for blocks)
- Advanced CSS – add custom CSS class to style the categories widget (only available for blocks)
As you can see, there are two additional options available for blocks which can be useful for customizing the categories widget.
Dropdown Vs List View
Below is how the categories widget will look like as dropdown and list view.
List view can be used when you have more space on the sidebar while the dropdown view can save you some space. Remember, the list view will impact the user experience as the description of each categories will be shown as title. You can hover the mouse over any category to see the description is displayed.
When you have long description, it will look congested when user moves the mouse over the category. On other hand, dropdown view does not show the category description.
Hiding Hierarchical View in List
The “Show Hierarchy” option may look good when you have one level of parent-child relation within categories. When you have multi-level hierarchy then the display will look congested. And disabling the “Show Hierarchy” option will remove the indent and show all levels equally. This will result in difficulty for the users to understand the category structure.
In most cases you may not need the sub-categories to show on all posts. You can do this easily with blocks editor by enabling “Show only top level categories” option “Unfortunately there is no default option to disable the hierarchical levels in classic widget editor. What you can do is to add the following CSS under “Appearance > Customize > Additional CSS” section.
Note: You can also add the custom CSS directly under “style.css” file under “Appearance > Theme File Editor” section. However, this is not recommended as the changes will be deleted when updating your theme.
If you want to customize further, right click and view the CSS class used on your theme for the “Categories” widget and add the custom CSS as per your need. For categories block, you can add additional CSS classes under “Advanced” section. After that, you can add styles for that class under “Appearance > Customize > Additional CSS” section.
Customizing Categories Widget with Plugins
If manually adding CSS class and styles is a difficult task for you, then you can look for plugins to customize the categories widget. There are very few plugins in WordPress repository that offers the custom categories widget function. One of the most relevant plugin we have found is AVH Extended Categories Widget. This is an easy to use plugin with vast customizing options for showing categories. Once installed and activated, you can see three widgets are offered by the plugin which can be added to sidebar / footer area under “Appearance > Widgets” similar to any other widgets.
- Replacement for the default categories widget
- Top categories widget
- Group categories widget
The plugin options and settings can be seen under the menu “AVH Extended Categories”. Most of the available options are related to group categories widget and there are no settings required to use the extended categories widget. We would highly recommend to read the FAQ section to understand the features the plugin better.
Replacement Widget for Default Categories Widget
This is basically the modification of default “Categories” widget and is being offered with more options.
- Display only the selected categories or exclude the selected categories
- Sort order with ascending and descending and sort with ID, slug, name or count.
- Restrict the number of child level categories to show.
- Use description as title.
- Use RSS link next to categories with an image.
Note: Remember, each category in WordPress has a unique RSS link. Showing the RSS link next to category is the best way for users to subscribe only to that category.
Top Categories Widget
The second widget is the top categories widget. This has similar options like the extended categories widget with an additional option to choose how many categories to show.
Group Categories Widget
When you create a post, you have an option to add the posts to particular group categories in addition to standard categories.
Using the menu options and the widget, you can easily control which categories are to be shown on different type of pages like home, archives, individual posts and search pages. Let us take an example:
- You have grouped category 1, category 2 and category 3 as group 1 when creating categories.
- Similarly group 2 consists of category 3 to 6.
- When creating a post 1, you select the category group as group 1.
- The published post will show the categories 1 to 3 from group 1.
- If you don not set any groups for the post then the display of category is controlled with the option you choose under “AVH Extended Categories > General Options > Options > Nonexistence Group“.
- If you set “None” then no categories will be displayed on the post.
Though you need some time to understand the concept of the plugin, especially the group categories, it is one of the best alternatives for the default “Categories” widget.
We strongly recommend using categories widget on your sidebar or footer area to help users to easily navigate through your site. The block based categories widget offers additional features like adding custom CSS and only showing top level categories. If you want to customize the classic editor based categories widget, use the plugin option as explained above.