The output of <?php the_category(', '); ?> is

<a href="http://url.com/category/my-category-name/" title="Show all posts under my-category-name" rel="category tag">my-category-name</a>

I would like add a specific class for each category so I could style it in different colours like in this page. What I'm after is:

<a href="http://url.com/category/alpha/" title="Show all posts under alpha" rel="category tag" class="post-category post-category-alpha">alpha</a>
<a href="http://url.com/category/beta/" title="Show all posts under beta" rel="category tag" class="post-category post-category-beta">beta</a>
<a href="http://url.com/category/gamma/" title="Show all posts under gamma" rel="category tag" class="post-category post-category-gamma">gamma</a>

and the style would be:

.post-category {
    margin: 0 0.1em;
    padding: 0.3em 1em;
    color: #fff;
    background: #999;
    .post-category-alpha {
        background: #5aba59;
    .post-category-beta {
        background: #4d85d1;
    .post-category-gamma {
        background: #8156a7;

The closest I could find was this answer but it's just for one class and even google didn't help much.

Maybe changing the code here a bit? Unfortunately I'm not a coder.

Could anyone point me in the right direction, or better suggest a solution here? Thanks.

EDIT Almost there. I changed that function and pasted it in the theme like this

$categories = get_the_category();
$separator = ' ';
$output = '';
    foreach($categories as $category) {
        $output .= '<a href="'.get_category_link( $category->term_id ).'" title="' . esc_attr( sprintf( __( "View all posts in %s" ), $category->name ) ) . '" class="post-category post-category-'what do I put here?'">'.$category->cat_name.'</a>'.$separator;
echo trim($output, $separator);

What variable do I put after class="post-category post-category-????"

1 Answer 1


In order to add an specific class to each category using the_category, you need to hack your code a little bit.

It will output the same result, but with a class added to each item. The class name will be the category slug.

In your functions.php:

add_filter('wp_list_categories', 'add_slug_class_wp_list_categories');
function add_slug_class_wp_list_categories($list) {

    $cats = get_categories('hide_empty=0');
    foreach($cats as $cat) {
        $find = 'cat-item-' . $cat->term_id . '"';
        $replace = 'cat-item-' . $cat->slug . ' cat-item-' . $cat->term_id . '"';
        $list = str_replace( $find, $replace, $list );
        $find = 'cat-item-' . $cat->term_id . ' ';
        $replace = 'cat-item-' . $cat->slug . ' cat-item-' . $cat->term_id . ' ';
        $list = str_replace( $find, $replace, $list );

    return $list;

And then, in your single.php, you need to replate the_category() with:

    $sep = '';
    foreach ((get_the_category()) as $cat) {
        echo $sep . '<a href="' . get_category_link($cat->term_id) . '"  class="' . $cat->slug . '" title="View all posts in '. esc_attr($cat->name) . '">' . $cat->cat_name . '</a>';
        $sep = ', ';

Your HTML will be like:

<a class="category-slug" href="#">category 1</a> <a class="category-slug-2" href="#">category 2</a>

And then, in your CSS file, all you need to do is add some style to these classes. For example:

.category-slug{color: #000;}
.category-slug-2{color: #FFF;}

I hope it helps! Have fun coding. :)

  • Thanks! Just one question: I managed to make the code I added after 'edit' work. So what solution would be more advisable? Paste my code in the theme pages or add your custom function in functions.php and then call it from the theme?
    – Barbara
    Dec 13, 2013 at 14:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.