How can I make wp_list_categories output li with category-slug as class, for its children?

Question

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>
    </ul>
 </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?

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:

wp_list_categories(
   array(
      'child_of' => 4,
      'walker' => new WPSE67791_Walker_Category
   )
);