Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

<?php
$categories = get_the_category();
$separator = ' ';
$output = '';
if($categories){
    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-????"

share|improve this question

1 Answer 1

up vote 0 down vote accepted

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:

<?php 
    $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. :)

share|improve this answer
    
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 '13 at 14:24

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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