Categories

Display taxonomy terms as a list

Overview

The Categories element displays a list of terms from any WordPress taxonomy. While named "Categories," it works with categories, tags, and any custom taxonomy registered in WordPress.

This element is ideal for sidebars, archive pages, and navigation areas where users need to browse content by topic. Each term links to its archive page, making it easy for visitors to filter content.

The element renders as a <ul> list with default classes space-y-2 for vertical spacing. Each term is a <li> containing an <a> link to the term archive page.

Settings

Configure the Categories element using these Inspector options:

Setting Description Default
Taxonomy The taxonomy to display terms from. Options include category, post_tag, or any registered custom taxonomy. category
Order By How to sort the terms. Options: name (alphabetical), count (post count), slug, term_id. name
Hide Empty Hide terms that have no posts assigned. Enable this to keep the list relevant and avoid showing empty categories. true
Show Count Display the number of posts in each term next to the term name (e.g., "Technology (15)"). false

Examples

Basic Category List

A simple list of categories for a blog sidebar.

<!-- Settings: Taxonomy: category, Order By: name, Hide Empty: true -->

<ul class="space-y-2">
  <li>
    <a href="/category/design/" class="text-gray-700 hover:text-primary">Design</a>
  </li>
  <li>
    <a href="/category/development/" class="text-gray-700 hover:text-primary">Development</a>
  </li>
  <li>
    <a href="/category/marketing/" class="text-gray-700 hover:text-primary">Marketing</a>
  </li>
  <li>
    <a href="/category/tutorials/" class="text-gray-700 hover:text-primary">Tutorials</a>
  </li>
</ul>

Categories with Post Counts

Show how many posts are in each category. Enable Show Count in the settings.

<!-- Settings: Taxonomy: category, Show Count: true, Order By: count -->

<ul class="space-y-2">
  <li class="flex justify-between items-center">
    <a href="/category/tutorials/" class="text-gray-700 hover:text-primary">Tutorials</a>
    <span class="text-sm text-gray-500 bg-gray-100 px-2 py-1 rounded">24</span>
  </li>
  <li class="flex justify-between items-center">
    <a href="/category/design/" class="text-gray-700 hover:text-primary">Design</a>
    <span class="text-sm text-gray-500 bg-gray-100 px-2 py-1 rounded">18</span>
  </li>
  <li class="flex justify-between items-center">
    <a href="/category/development/" class="text-gray-700 hover:text-primary">Development</a>
    <span class="text-sm text-gray-500 bg-gray-100 px-2 py-1 rounded">15</span>
  </li>
</ul>

Tag Cloud Alternative

Display tags as horizontal inline items instead of a vertical list. Apply custom Container Class for flex layout.

<!-- Settings: Taxonomy: post_tag, Order By: count -->
<!-- Custom container class in Inspector: flex flex-wrap gap-2 -->

<ul class="flex flex-wrap gap-2">
  <li>
    <a href="/tag/javascript/" class="px-3 py-1 bg-gray-100 hover:bg-primary hover:text-white rounded-full text-sm transition-colors">JavaScript</a>
  </li>
  <li>
    <a href="/tag/react/" class="px-3 py-1 bg-gray-100 hover:bg-primary hover:text-white rounded-full text-sm transition-colors">React</a>
  </li>
  <li>
    <a href="/tag/css/" class="px-3 py-1 bg-gray-100 hover:bg-primary hover:text-white rounded-full text-sm transition-colors">CSS</a>
  </li>
  <li>
    <a href="/tag/wordpress/" class="px-3 py-1 bg-gray-100 hover:bg-primary hover:text-white rounded-full text-sm transition-colors">WordPress</a>
  </li>
  <li>
    <a href="/tag/tailwind/" class="px-3 py-1 bg-gray-100 hover:bg-primary hover:text-white rounded-full text-sm transition-colors">Tailwind</a>
  </li>
</ul>

Custom Taxonomy Display

Display terms from a custom taxonomy like product categories or portfolio types.

<!-- Settings: Taxonomy: product_category, Order By: name -->

<div class="bg-gray-50 p-4 rounded-lg">
  <h3 class="font-semibold mb-3">Product Categories</h3>
  <ul class="space-y-2">
    <li>
      <a href="/products/category/electronics/" class="flex items-center gap-2 text-gray-700 hover:text-primary">
        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
          <path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"/>
        </svg>
        Electronics
      </a>
    </li>
    <li>
      <a href="/products/category/furniture/" class="flex items-center gap-2 text-gray-700 hover:text-primary">
        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
          <path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"/>
        </svg>
        Furniture
      </a>
    </li>
    <li>
      <a href="/products/category/accessories/" class="flex items-center gap-2 text-gray-700 hover:text-primary">
        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
          <path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"/>
        </svg>
        Accessories
      </a>
    </li>
  </ul>
</div>
Hierarchical Taxonomies

For hierarchical taxonomies (like categories), parent terms automatically include child terms in their post counts. Consider using the Hierarchical display option to show the parent/child relationship visually.

Next Steps