Display Subcategories on Category Pages in WordPress: A Comprehensive Guide

If you run a WordPress website with a large amount of content—whether it’s a blog, an e-commerce store, or a news portal—organizing your content effectively is critical for user experience (UX) and search engine optimization (SEO). Categories and subcategories are foundational tools for this organization, helping visitors navigate your site and find relevant content quickly.

While WordPress automatically generates category pages (e.g., yoursite.com/category/travel), these pages often default to displaying only posts, not the subcategories nested under the parent category. This missed opportunity can confuse visitors: imagine a user lands on your "Travel" category page but can’t find subcategories like "Europe," "Asia," or "Budget Travel"—they might leave without exploring deeper.

In this guide, we’ll explore why displaying subcategories on category pages matters, walk through three detailed methods to implement this (manual coding, plugins, and theme customization), troubleshoot common issues, and share best practices to ensure your subcategories enhance, not hinder, UX. By the end, you’ll have the tools to transform your category pages into intuitive hubs that keep visitors engaged.

Table of Contents#

  1. Understanding Categories and Subcategories in WordPress

    • 1.1 What Are Categories?
    • 1.2 What Are Subcategories?
    • 1.3 The Hierarchy: Parent and Child Categories

  2. Why Display Subcategories on Category Pages?

    • 2.1 Enhanced User Navigation
    • 2.2 Improved SEO and Internal Linking
    • 2.3 Reduced Bounce Rates
    • 2.4 Better Content Discoverability

  3. Methods to Display Subcategories on Category Pages

    • 3.1 Method 1: Manual Coding (For Developers)

      • 3.1.1 Understanding WordPress Template Hierarchy
      • 3.1.2 Using get_categories(): The Core Function
      • 3.1.3 Displaying Subcategories as a List (Basic Example)
      • 3.1.4 Advanced: Subcategories with Thumbnails, Post Counts, and Links
      • 3.1.5 Adding Subcategories to category.php or archive.php
      • 3.1.6 Using Hooks to Inject Subcategories (e.g., Genesis, Astra Themes)

    • 3.2 Method 2: Using Plugins (For Non-Technical Users)

      • 3.2.1 Plugin 1: Category Page Layout (Beginner-Friendly)
      • 3.2.2 Plugin 2: List Category Posts (Flexible Shortcodes)
      • 3.2.3 Plugin 3: Custom Category Templates (For Theme Developers)

    • 3.3 Method 3: Theme Customization (Using Builders or Child Themes)

      • 3.3.1 Using Page Builders (Elementor, Divi, Beaver Builder)
      • 3.3.2 Modifying Theme Template Files (Child Theme Approach)
      • 3.3.3 Using Theme Options Panels (e.g., GeneratePress, Kadence)

  4. Troubleshooting Common Issues

    • 4.1 Subcategories Not Showing Up
    • 4.2 Styling Problems (Misalignment, Missing CSS)
    • 4.3 Compatibility Issues with Themes/Plugins
    • 4.4 Subcategories Displaying on the Wrong Pages

  5. Best Practices for Subcategory Display

    • 5.1 Keep Your Category Hierarchy Flat
    • 5.2 Use Descriptive, Keyword-Rich Names
    • 5.3 Style Subcategories for Readability
    • 5.4 Test Responsiveness Across Devices
    • 5.5 Pair Subcategories with Breadcrumbs

  6. Conclusion

  7. References

1. Understanding Categories and Subcategories in WordPress#

Before diving into implementation, let’s clarify what categories and subcategories are, and how WordPress structures them.

1.1 What Are Categories?#

Categories are WordPress’s primary way to group content by broad topics. For example, a food blog might use categories like "Recipes," "Restaurants," and "Cooking Tips." They help both users and search engines understand the main themes of your site.

By default, WordPress assigns every post to at least one category (the "Uncategorized" default if none is selected). You can create, edit, or delete categories via Posts → Categories in the WordPress dashboard.

1.2 What Are Subcategories?#

Subcategories (or "child categories") are nested under parent categories to refine content organization. Using the food blog example, "Recipes" (parent) might have subcategories like "Vegetarian," "Gluten-Free," and "Desserts."

Subcategories help break down broad topics into manageable, specific sections, making it easier for users to find exactly what they’re looking for.

1.3 The Hierarchy: Parent and Child Categories#

WordPress treats categories as a hierarchical taxonomy, meaning they can have parent-child relationships. Here’s how it works:

  • A parent category has no parent itself (e.g., "Recipes").
  • A child category has a parent category (e.g., "Vegetarian" is a child of "Recipes").
  • A category can also be a parent and a child (e.g., "Desserts" → "Cookies" → "Chocolate Chip Cookies"—though deep hierarchies are not recommended).

You can set parent categories when creating/editing categories in Posts → Categories (use the "Parent Category" dropdown).

2. Why Display Subcategories on Category Pages?#

Displaying subcategories on category pages isn’t just about aesthetics—it directly impacts UX and site performance. Here’s why it matters:

2.1 Enhanced User Navigation#

Visitors often land on category pages via search engines or internal links. Without subcategories, they must scroll through all posts in the parent category to find relevant content. Subcategories act as "signposts," letting users jump to specific subtopics (e.g., from "Travel" to "Europe" or "Budget Travel") in one click.

2.2 Improved SEO and Internal Linking#

Search engines like Google prioritize sites with clear structure. Subcategories create internal links (e.g., from "Travel" to "Europe"), helping search crawlers discover and index deeper content. This also distributes "link equity" (authority) across your site, boosting rankings for subcategory pages.

2.3 Reduced Bounce Rates#

A bounce rate is the percentage of visitors who leave your site after viewing only one page. If users can’t find what they want on a category page, they’ll bounce. Subcategories reduce this by giving visitors more paths to explore, keeping them on your site longer.

2.4 Better Content Discoverability#

Many users don’t know exactly what they’re looking for. Subcategories expose them to related topics they might not have considered (e.g., a user searching for "vegan recipes" might discover "vegan baking" via subcategories).

3. Methods to Display Subcategories on Category Pages#

Now, let’s explore three methods to display subcategories, ranging from manual coding (for developers) to plugins (for beginners) and theme customization (for those using page builders or custom themes).

3.1 Method 1: Manual Coding (For Developers)#

If you’re comfortable with PHP and WordPress template files, manual coding gives you full control over how subcategories look and function. We’ll use WordPress’s built-in functions to fetch and display subcategories.

3.1.1 Understanding WordPress Template Hierarchy#

WordPress uses a template hierarchy to determine which file displays content. For category pages, it prioritizes:

  1. category-{slug}.php (e.g., category-travel.php for the "Travel" category).
  2. category-{id}.php (e.g., category-5.php for category ID 5).
  3. category.php (fallback for all categories).
  4. archive.php (fallback if category.php doesn’t exist).

To modify category pages, you’ll edit one of these files. Always use a child theme to avoid losing changes when your parent theme updates. If you don’t have a child theme, create one first (see WordPress Child Theme Guide).

3.1.2 Using get_categories(): The Core Function#

The get_categories() function retrieves category data from the WordPress database. It accepts parameters to filter results (e.g., only child categories of a parent). Key parameters include:

  • child_of: ID of the parent category (retrieve only its children).
  • parent: ID of the parent category (same as child_of, but excludes grandchildren).
  • hide_empty: Set to 0 to show empty subcategories, 1 to hide them (default: 1).
  • orderby: Sort by name, count (post count), or ID (default: name).
  • order: ASC (ascending) or DESC (descending) (default: ASC).

View full get_categories() documentation.

3.1.3 Displaying Subcategories as a List (Basic Example)#

Let’s start with a simple example: displaying subcategories of the current category as an unordered list (<ul>).

Step 1: Get the current category’s ID.
On a category page, WordPress sets a global $wp_query object, which contains the current category’s data. Use get_queried_object() to fetch it:

$current_category = get_queried_object();
$current_category_id = $current_category->term_id; // Get the current category's ID

Step 2: Fetch subcategories using get_categories().
Use child_of to target subcategories of the current category:

$subcategories = get_categories(array(
  'child_of' => $current_category_id, // Only subcategories of the current category
  'hide_empty' => 0, // Show empty subcategories (set to 1 to hide)
  'orderby' => 'name', // Sort by name
  'order' => 'ASC'
));

Step 3: Display subcategories in a list.
Loop through $subcategories and output each as a list item with a link:

if (!empty($subcategories)) {
  echo '<div class="subcategories-list">';
  echo '<h3>Explore Subcategories</h3>';
  echo '<ul>';
  foreach ($subcategories as $subcat) {
    $subcat_link = get_category_link($subcat->term_id); // Get subcategory URL
    echo '<li><a href="' . esc_url($subcat_link) . '">' . esc_html($subcat->name) . '</a></li>';
  }
  echo '</ul>';
  echo '</div>';
}

3.1.4 Advanced: Subcategories with Thumbnails, Post Counts, and Links#

To make subcategories more informative, add post counts (number of posts in the subcategory) and thumbnails (if using category images).

Post Counts: Use $subcat->count to display how many posts are in the subcategory:

echo '<li><a href="' . esc_url($subcat_link) . '">' . esc_html($subcat->name) . '</a> (' . $subcat->count . ')</li>';

Thumbnails: WordPress 4.4+ supports category thumbnails (called "term meta"). To use them:

  1. Enable category thumbnails by adding this to your child theme’s functions.php: 
    add_theme_support('category-thumbnails');
  2. Upload thumbnails via Posts → Categories → Edit Category (you’ll see a "Thumbnail" section).
  3. Display thumbnails in your subcategory loop: 
    foreach ($subcategories as $subcat) {
  $subcat_link = get_category_link($subcat->term_id);
  $subcat_thumbnail = get_term_meta($subcat->term_id, 'thumbnail_id', true); // Get thumbnail ID
  $subcat_image = wp_get_attachment_image_src($subcat_thumbnail, 'medium'); // Get image URL (size: medium)
  
  echo '<li>';
  if ($subcat_image) {
    echo '<a href="' . esc_url($subcat_link) . '"><img src="' . esc_url($subcat_image[0]) . '" alt="' . esc_attr($subcat->name) . '"></a>';
  }
  echo '<a href="' . esc_url($subcat_link) . '">' . esc_html($subcat->name) . '</a> (' . $subcat->count . ')';
  echo '</li>';
}

3.1.5 Adding Subcategories to category.php or archive.php#

Now, let’s add this code to your category template file.

Step 1: Copy the parent theme’s category.php (or archive.php) to your child theme.
Navigate to Appearance → Theme File Editor (or use FTP to access /wp-content/themes/parent-theme/). Copy category.php to /wp-content/themes/child-theme/.

Step 2: Edit the child theme’s category.php.
Find the section where the main content starts (often after if ( have_posts() ) : or before the loop). Paste the subcategory code there. For example:

<?php get_header(); ?>
 
<div id="primary" class="content-area">
  <main id="main" class="site-main" role="main">
 
    <?php
    // Get current category
    $current_category = get_queried_object();
    $current_category_id = $current_category->term_id;
 
    // Fetch subcategories
    $subcategories = get_categories(array(
      'child_of' => $current_category_id,
      'hide_empty' => 0,
      'orderby' => 'name',
      'order' => 'ASC'
    ));
 
    // Display subcategories if they exist
    if (!empty($subcategories)) { ?>
      <section class="subcategories">
        <h2>Subcategories</h2>
        <ul class="subcategories-grid">
          <?php foreach ($subcategories as $subcat) {
            $subcat_link = get_category_link($subcat->term_id);
            $subcat_thumbnail = get_term_meta($subcat->term_id, 'thumbnail_id', true);
            $subcat_image = wp_get_attachment_image_src($subcat_thumbnail, 'medium');
          ?>
            <li class="subcategory-item">
              <?php if ($subcat_image) { ?>
                <a href="<?php echo esc_url($subcat_link); ?>">
                  <img src="<?php echo esc_url($subcat_image[0]); ?>" alt="<?php echo esc_attr($subcat->name); ?>" class="subcategory-thumbnail">
                </a>
              <?php } ?>
              <h3 class="subcategory-name">
                <a href="<?php echo esc_url($subcat_link); ?>"><?php echo esc_html($subcat->name); ?></a>
              </h3>
              <span class="subcategory-count">(<?php echo $subcat->count; ?> posts)</span>
            </li>
          <?php } ?>
        </ul>
      </section>
    <?php } ?>
 
    <!-- Start the Loop -->
    <?php if ( have_posts() ) : ?>
      <header class="page-header">
        <?php single_cat_title('<h1 class="page-title">', '</h1>'); ?>
      </header><!-- .page-header -->
 
      <?php while ( have_posts() ) : the_post(); ?>
        <?php get_template_part('content', get_post_format()); ?>
      <?php endwhile; ?>
 
      <?php the_posts_navigation(); ?>
 
    <?php else : ?>
      <?php get_template_part('content', 'none'); ?>
    <?php endif; ?>
 
  </main><!-- #main -->
</div><!-- #primary -->
 
<?php get_sidebar(); ?>
<?php get_footer(); ?>

3.1.6 Using Hooks to Inject Subcategories (e.g., Genesis, Astra Themes)#

Some themes (like Genesis or Astra) use hooks instead of requiring direct template edits. You can add subcategories via functions.php using add_action().

Example for Genesis Themes:
Genesis uses hooks like genesis_before_loop (before posts) or genesis_after_header (after the header). Add this to your child theme’s functions.php:

// Add subcategories before the loop in Genesis
add_action('genesis_before_loop', 'display_genesis_subcategories');
function display_genesis_subcategories() {
  if (is_category()) { // Only run on category pages
    $current_category = get_queried_object();
    $current_category_id = $current_category->term_id;
    $subcategories = get_categories(array(
      'child_of' => $current_category_id,
      'hide_empty' => 0
    ));
 
    if (!empty($subcategories)) {
      echo '<div class="genesis-subcategories">';
      echo '<h3>Subcategories</h3>';
      echo '<ul>';
      foreach ($subcategories as $subcat) {
        $link = get_category_link($subcat->term_id);
        echo '<li><a href="' . esc_url($link) . '">' . esc_html($subcat->name) . '</a></li>';
      }
      echo '</ul></div>';
    }
  }
}

3.2 Method 2: Using Plugins (For Non-Technical Users)#

If coding isn’t your forte, plugins simplify subcategory display with point-and-click settings. Here are three reliable options:

3.2.1 Plugin 1: Category Page Layout (Beginner-Friendly)#

Category Page Layout lets you customize category pages, including displaying subcategories, without coding.

Step 1: Install and activate the plugin.
Go to Plugins → Add New, search for "Category Page Layout," and click "Install Now" → "Activate."

Step 2: Configure subcategory display.
Navigate to Settings → Category Page Layout. Under "Subcategories Display," check "Show Subcategories" and customize:

  • Position: Choose where subcategories appear (e.g., "Before Posts," "After Posts").
  • Layout: Select "List" or "Grid" view.
  • Style: Adjust colors, fonts, and spacing (pro version adds more styling options).

Step 3: Save changes.
Visit a category page—subcategories will now display based on your settings.

3.2.2 Plugin 2: List Category Posts (Flexible Shortcodes)#

List Category Posts uses shortcodes to display categories, subcategories, and posts. It’s ideal if you want to embed subcategories in a specific part of the page (e.g., a widget or custom section).

Step 1: Install and activate the plugin.
Search for "List Category Posts" in Plugins → Add New and activate it.

Step 2: Use the [catlist] shortcode to display subcategories.
To show subcategories of the current category, add this shortcode to your category page (via a widget, page builder, or theme template):

[catlist child_of="current" orderby="name" order="asc" hide_empty="0" template="subcategories"]
  • child_of="current": Targets subcategories of the current category.
  • hide_empty="0": Shows empty subcategories.
  • template="subcategories": Uses a custom template (create one in Settings → List Category Posts → Templates for styling).

Step 3: Add the shortcode to your category page.
If your theme supports widgets on category pages, use the "Text" widget and paste the shortcode. Alternatively, use a page builder (e.g., Elementor) to add a "Shortcode" widget.

3.2.3 Plugin 3: Custom Category Templates (For Theme Developers)#

Custom Category Templates lets you create unique templates for specific categories, including subcategory display. It’s useful if you want different layouts for different parent categories (e.g., "Travel" vs. "Food").

Step 1: Install and activate the plugin.
Search for "Custom Category Templates" and activate it.

Step 2: Create a custom category template.
Go to Posts → Categories, edit a parent category (e.g., "Travel"), and scroll to "Custom Template." Select "Create New Template" and use the built-in editor to add subcategories (you can even paste the manual coding snippet from Section 3.1.3 here).

Step 3: Assign the template to the category.
Save the template, and it will automatically apply to the category.

3.3 Method 3: Theme Customization (Using Builders or Child Themes)#

Many modern themes (e.g., Elementor, Divi, GeneratePress) let you customize category pages via built-in tools or page builders.

3.3.1 Using Page Builders (Elementor, Divi, Beaver Builder)#

Page builders like Elementor Pro let you design custom category pages with drag-and-drop tools.

Example with Elementor Pro:

  1. Go to Templates → Theme Builder in Elementor.
  2. Click "Add New" → Select "Archive" → Name your template (e.g., "Category Page with Subcategories").
  3. Click "Create Template" and design your layout.
  4. Add a "Posts" widget to display posts, then add a "Categories" widget to display subcategories.
    • In the "Categories" widget settings, set "Parent Category" to "Current Archive" to target subcategories of the current category.
  5. Set the template to apply to "All Categories" (or specific categories) under "Conditions."

3.3.2 Modifying Theme Template Files (Child Theme Approach)#

If your theme doesn’t use hooks but has a category.php file, follow the manual coding steps in Section 3.1.5 to edit the template directly in your child theme.

3.3.3 Using Theme Options Panels (e.g., GeneratePress, Kadence)#

Themes like GeneratePress and Kadence include built-in options to display subcategories.

Example with GeneratePress:

  1. Go to Appearance → Customize → Layout → Blog.
  2. Under "Category Archives," check "Display Subcategories" and set the position (e.g., "Before Posts").
  3. Save changes.

4. Troubleshooting Common Issues#

Even with careful setup, you might encounter issues. Here’s how to fix them:

4.1 Subcategories Not Showing Up#

  • Check Category Hierarchy: Ensure subcategories have the correct parent category (Posts → Categories → Edit Subcategory → Parent Category).
  • Hide Empty Subcategories: If hide_empty is set to 1 (default), subcategories with no posts won’t show. Set hide_empty to 0 (in code) or enable "Show Empty Subcategories" (in plugins).
  • Clear Cache: Plugins like WP Rocket or Cloudflare may cache old versions of the page. Clear the cache and test again.

4.2 Styling Problems (Misalignment, Missing CSS)#

  • Add Custom CSS: Use your theme’s customizer (Appearance → Customize → Additional CSS) to style subcategories. For example: 
    .subcategories-list ul { list-style: none; padding: 0; }
.subcategories-list li { display: inline-block; margin: 0 10px 10px 0; }
.subcategories-list a { text-decoration: none; color: #333; padding: 5px 10px; border: 1px solid #ddd; }
  • Plugin Conflicts: Deactivate other styling plugins (e.g., CSS optimizers) to see if they’re overriding your styles.

4.3 Compatibility Issues with Themes/Plugins#

  • Test with a Default Theme: Temporarily switch to a default theme (e.g., Twenty Twenty-Three) to see if the issue is theme-specific.
  • Deactivate Plugins: Use the "Health Check & Troubleshooting" plugin to disable plugins one by one and identify conflicts.

4.4 Subcategories Displaying on the Wrong Pages#

  • Check Conditional Tags: In manual coding, ensure you’re using is_category() to restrict subcategories to category pages (not archives or custom post types).
  • Plugin Settings: In plugins like Category Page Layout, verify that "Apply to" is set to "Category Pages Only."

5. Best Practices for Subcategory Display#

To maximize UX and SEO, follow these best practices:

5.1 Keep Your Category Hierarchy Flat#

Avoid deep hierarchies (e.g., Parent → Child → Grandchild → Great-Grandchild). Most users won’t click through more than 2-3 levels. Aim for 1-2 levels of subcategories.

5.2 Use Descriptive, Keyword-Rich Names#

Subcategory names should be clear and include relevant keywords (e.g., "Gluten-Free Recipes" instead of "GF Food"). This helps users and search engines understand the content.

5.3 Style Subcategories for Readability#

Use contrasting colors, ample spacing, and clear typography. For grids, ensure items don’t overlap on mobile. Example CSS:

.subcategories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px 0;
}
.subcategory-item {
  border: 1px solid #eee;
  padding: 15px;
  text-align: center;
}

5.4 Test Responsiveness Across Devices#

Ensure subcategories display correctly on mobile, tablet, and desktop. Use browser tools (e.g., Chrome DevTools) to simulate different screen sizes.

5.5 Pair Subcategories with Breadcrumbs#

Breadcrumbs (e.g., Home → Travel → Europe) show users their location on your site. Plugins like Yoast SEO or Rank Math add breadcrumbs, which complement subcategories for navigation.

6. Conclusion#

Displaying subcategories on WordPress category pages is a simple yet powerful way to enhance navigation, boost SEO, and keep visitors engaged. Whether you code manually, use plugins, or customize your theme, the key is to align subcategory display with your site’s structure and user needs.

Start with the method that best fits your technical skill level: non-technical users should try plugins like Category Page Layout, developers can use manual coding for full control, and theme users can leverage built-in options or page builders.

By implementing subcategories, you’ll transform your category pages from static post lists into dynamic hubs that guide users deeper into your content—ultimately growing your traffic and reducing bounce rates.

7. References#

2025-11