How to correctly display category's slug as a class?

Question

I want to display category's slug as a class.

I try to code and put this into functions.php

add_filter('the_category', 'my_custom_get_the_category_list');

function my_custom__get_the_category_list($thelist, $post_id = false ) {
    global $wp_rewrite;
    $categories = get_the_category( $post_id );

    foreach ( $categories as $category ) {
        $thelist = str_replace('rel="', 'class="category-'.$category->category_nicename.'" rel="', $thelist);
    }
    return $thelist;
}

But there is something wrong. I use get_the_category_list() in category.php

Then every category displays the same class.

<ul class="post-categories">
    <li><a href="http://localhost/test_blog/topics/editorial" title="View all posts in Editorial" class="category-editorial" rel="category tag">Editorial</a></li>
    <li><a href="http://localhost/test_blog/topics/economy/business" title="View all posts in Business" class="category-editorial" rel="category tag">Business</a></li>
    <li><a href="http://localhost/test_blog/topics/economy/national" title="View all posts in National" class="category-editorial" rel="category tag">National</a></li>
</ul>

Where did I do wrong?

Answer 1

The filter is used wrong. For the filter the_category the correct parameters are "list", "seperator" & "parents", not "post id"

Next add_filter has 4th parameter which tells wordpress the number of arguments the function will accept, defaulting to 1. So in your case $post_id will always be false. Then get_the_category returns the categories of the current post in the loop (which must be editorial acc. to your HTML)

After that, your logic is also wrong. You are replacing rel=" with the classes of each category one by one. Each link contains this string so each link finally gets each categories class. Assuming there are 3 mentioned categories going in the foreach, the final HTML becomes

<ul class="post-categories">
    <li><a href="http://localhost/test_blog/topics/editorial" title="View all posts in Editorial" class="category-editorial" class="category-business" class="category-national" rel="category tag">Editorial</a></li>
    <li><a href="http://localhost/test_blog/topics/economy/business" title="View all posts in Business" class="category-editorial" class="category-business" class="category-national" rel="category tag">Business</a></li>
    <li><a href="http://localhost/test_blog/topics/economy/national" title="View all posts in National" class="category-editorial" class="category-business" class="category-national" rel="category tag">National</a></li>
</ul>

As you can see each element now has 3 class attributes. Which of them is the browser supposed to consider?

I don't understand why you're complexing the things up so much when you can just use get_the_category inside category.php directly & then construct the html yourself