Styling WordPress categories

If you’re trying to display your WordPress site’s categories as links in your posts, you might run this code:

<?php the_category(); ?>

Which prints out to HTML as an unordered list that looks like:

<ul class="post-categories">
  <li>
    <a href="https://example.com/category/example-category">Example Category</a>
  </li>
</ul>

If we have multiple categories and pass the function a separator, like adding a comma and a space:

<?php the_category( ', ' ); ?>

Then it strips out all the list tags and just gives us:

<a href="https://example.com/category/example-category">Example Category</a>, <a href="https://example.com/category/example-category-2">Example Category 2</a>

Neither of these is ideal for flexible styling. But we can do a little better like this:

<ul class="post-categories">
  <li class="category-item">
  <?php the_category( '</li><li class="category-item">' ); ?>
  </li>
</ul>

By adding closing and opening tags in the separator argument, and opening and closing around them, we set it up so that a single category won’t use the separator and will be styled within the wrapping <ul> and <li> tags—but if there are multiple categories, they’ll get our separator with the category-item class for each item.

So that prints out like:

<ul class="post-categories">
  <li class="category-item">
    <a href="https://example.com/category/example-category">Example Category</a>
  </li>
  <li class="category-item">
    <a href="https://example.com/category/example-category-2">Example Category 2</a>
  </li>
</ul>

You can then easily style this list to appear inline with something like:

.post-categories {
  list-style: none;
}

.category-item {
  display: inline;
}

And you can also include commas or whatever dividers you want in the separator parameter.

But how about adding tags and using them together in a list with categories? Sometimes we don’t always need to visually separate these for visitors.

<ul class="taxonomies-list">
  <li class="category-item">
    <?php the_category( '</li>, <li class="category-item">' ); ?>
  </li>
  <?php the_tags( ', <li class="tag-item">', '</li>, <li class="tag-item">', '</li>' ); ?>
</ul>

the_tags() function allows us to put the before and after HTML directly into the function instead of having to wrap around it as we do with the_category(). So here, we can use the “before” section to open with a comma and give each tag list item its own class.

We can now update our CSS:

.post-categories {
  list-style: none;
}

.category-item,
.tag-item {
  display: inline;
}

And actually, we want to make sure our commas only show up if both categories and tags exist. So we can do that by checking if we have categories before printing the comma in the tags function—if there are no tags, then nothing prints and we don’t get the comma dangling after the categories, either, so we only need to check on one of these.

<ul class="taxonomies-list">
  <li class="category-item">
    <?php the_category( '</li>, <li class="category-item">' ); ?></li>

  <?php if( get_the_category() ) : 
  // add a comma and space before starting the tag list
  the_tags( ', <li class="tag-item">', '</li>, <li class=
tag-item">', '</li>' ); 
  else: 
  // echo tags normally if no category is present
  the_tags( '<li class="tag-item">', '</li>, <li class="tag-item">', '</li>' );
  endif; ?>

</ul>

Which reminds me we should be checking on the category anyway so we don’t leave this external HTML hanging if one doesn’t exist, so actually let’s write this all out like this:

Just categories:

<?php if( get_the_category() ): 
<ul class="post-categories">
  <li class="category-item">
  <?php the_category( '</li><li class="category-item">' ); ?>
  </li>
</ul>
<?php endif; ?>

Categories and tags:

<?php 
if( get_the_category() ) : 
  <ul class="taxonomies-list">
  <li class="category-item">
    <?php the_category( '</li>, <li class="category-item">' ); ?>
  </li>
   
  <?php 
  // note no ul wrapper here
  the_tags( ', <li class="tag-item">', '</li>, <li class=
tag-item">', '</li>' ); ?>

  </ul>

<?php 
  else: 
  // add ul, remove opening comma
  the_tags( '<ul class="taxonomies-list"><li class="tag-item">', '</li>, <li class="tag-item">', '</li></ul>' );
  endif;
?>

Which all prints as something like:

<ul class="taxonomies-list">
  <li class="category-item">
    <a href="#">Category</a>, 
  </li>
  <li class="tag-item">
    <a href="#">Tag</a>
  </li>
</ul>

There, that’s much better.

Get the newsletter