Simply put, I'd like to change the wp_list_categories output from this:

 <li class="cat-item cat-item-1"><a href="http://mysite.com/category/articles">Articles</a></li>
 <li class="cat-item cat-item-7"><a href="http://mysite.com/category/design">Design</a></li>

to this instead:

 <li class="cat-item category-articles"><a href="http://mysite.com/category/articles">Articles</a></li>
 <li class="cat-item category-design"><a href="http://mysite.com/category/design">Design</a></li>

So I tried Google and I've found a solution mentioned on this question add filter to wp_list_categories and query if used to list tax-terms? .

I need to put this on my functions.php:

 add_filter('wp_list_categories', 'add_slug_css_list_categories');

 function add_slug_css_list_categories($list) {

     $cats = get_categories();

     foreach($cats as $cat) {
         $find = 'cat-item-' . $cat->term_id . '"';
         $replace = 'category-' . $cat->slug . '"';
         $list = str_replace( $find, $replace, $list );
         $find = 'cat-item-' . $cat->term_id . ' ';
         $replace = 'category-' . $cat->slug . ' ';
         $list = str_replace( $find, $replace, $list );*/

     return $list;

EDIT: Now I realize the problem!

The filter above works for parent categories. However it doesn't work for the children!

So, using that code, if I use wp_list_categories, it will output as this:

 <li class="cat-item category-articles"><a href="http://mysite.com/category/articles">Articles</a>
    <ul class="children>
     <li class="cat-item cat-item-10"><a href="http://mysite.com/category/articles/tips/">Tips</a></li>
     <li class="cat-item cat-item-11"><a href="http://mysite.com/category/articles/tutorials/">Tutorials</a></li>
 <li class="cat-item category-design"><a href="http://mysite.com/category/design">Design</a></li>

Notice that even if the parents' class are category-articles, the children class stays as cat-item-10.

Is there any fix to this?

1 Answer 1


I am not sure if querying the categories again is the good idea. The following code extends the Walker_Category and makes use of it to do the replacement. Put the following in your functions.php:

class WPSE67791_Walker_Category extends Walker_Category {

    public function start_el(&$output, $category, $depth, $args) {
        parent::start_el( $output, $category, $depth, $args );
                $find = 'cat-item-' . $category->term_id . '"';
                $replace = 'category-' . $category->slug . '"';
                $output = str_replace( $find, $replace, $output );


Then call wp_list_categories as following:

      'child_of' => 4,
      'walker' => new WPSE67791_Walker_Category
  • Thanks a lot! I modify it a bit from $find = 'cat-item-' . $category->term_id . '"'; $replace = 'category-' . $category->slug . '"'; to $find = 'cat-item-' . $category->term_id; $replace = 'category-' . $category->slug; So in case the current category is selected, it is still replaced. :)
    – deathlock
    Oct 15, 2012 at 17:20

Your Answer

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

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