Add class to items in wp_list_categories()

1 Views

I have this in my category.php to show sub-subcategories: 

<?php if (is_category()) {
  $this_category = get_category($cat);
  if (get_category_children($this_category->cat_ID) != "") {
    echo "<ul>";
    wp_list_categories('orderby=id&show_count=0&title_li=
&use_desc_for_title=1&child_of='.$this_category->cat_ID);
    echo "</ul>";
  }
}?>

<ul>    
<li class="cat-item cat-item-5">
<a>subcategory</a>
    <ul class="children">
    <li class="cat-item cat-item-6"><a>sub-subcategory1</a></li>
    <li class="cat-item cat-item-7"><a>sub-subcategory2</a></li>
    </ul>
</li>
</ul>

Is it possible to add a class with the sub-subcategory name?

    <li class="cat-item cat-item-6 sub-subcategory1"><a>sub-subcategory1</a></li>
Post Views: 1

Related posts

2 comments

  1. Yes, it is possible. wp_list_categories accepts a (custom) walker that may handle this.

    Put the following in your functions.php file:

    class Custom_Walker_Category extends Walker_Category {

        function start_el( &$output, $category, $depth = 0, $args = array(), $id = 0 ) {
                extract($args);
                $cat_name = esc_attr( $category->name );
                $cat_name = apply_filters( 'list_cats', $cat_name, $category );
                $link = '<a href="' . esc_url( get_term_link($category) ) . '" ';
                if ( $use_desc_for_title == 0 || empty($category->description) )
                        $link .= 'title="' . esc_attr( sprintf(__( 'View all posts filed under %s' ), $cat_name) ) . '"';
                else
                        $link .= 'title="' . esc_attr( strip_tags( apply_filters( 'category_description', $category->description, $category ) ) ) . '"';
                $link .= '>';
                $link .= $cat_name . '</a>';
                if ( !empty($feed_image) || !empty($feed) ) {
                        $link .= ' ';
                        if ( empty($feed_image) )
                                $link .= '(';
                        $link .= '<a href="' . esc_url( get_term_feed_link( $category->term_id, $category->taxonomy, $feed_type ) ) . '"';
                        if ( empty($feed) ) {
                                $alt = ' alt="' . sprintf(__( 'Feed for all posts filed under %s' ), $cat_name ) . '"';
                        } else {
                                $title = ' title="' . $feed . '"';
                                $alt = ' alt="' . $feed . '"';
                                $name = $feed;
                                $link .= $title;
                        }
                        $link .= '>';
                        if ( empty($feed_image) )
                                $link .= $name;
                        else
                                $link .= "<img src='$feed_image'$alt$title" . ' />';
                        $link .= '</a>';
                        if ( empty($feed_image) )
                                $link .= ')';
                }
                if ( !empty($show_count) )
                        $link .= ' (' . intval($category->count) . ')';
                if ( 'list' == $args['style'] ) {
                        $output .= "t<li";
                        $class = 'cat-item cat-item-' . $category->term_id;


                        // YOUR CUSTOM CLASS
                        if ($depth)
                            $class .= ' sub-'.sanitize_title_with_dashes($category->name);


                        if ( !empty($current_category) ) {
                                $_current_category = get_term( $current_category, $category->taxonomy );
                                if ( $category->term_id == $current_category )
                                        $class .=  ' current-cat';
                                elseif ( $category->term_id == $_current_category->parent )
                                        $class .=  ' current-cat-parent';
                        }
                        $output .=  ' class="' . $class . '"';
                        $output .= ">$linkn";
                } else {
                        $output .= "t$link<br />n";
                }
        } // function start_el

} // class Custom_Walker_Category

    Then, change your code in category.php like so:

    if (is_category()) {
    $this_category = get_category($cat);
    if ('' != get_category_children($this_category->cat_ID)) {
        echo '<ul>';
        $args = array(
            'orderby' => 'id',
            'show_count' => 0,
            'title_li' => '',
            'use_desc_for_title' => 1,
            'child_of' => $this_category->cat_ID,
            'walker' => new Custom_Walker_Category(),
        );
        wp_list_categories($args);
        echo '</ul>';
    }
}

  2. I know that this question is old, but I found another solution that seems to be simpler than a custom walker, and wanted to post it for anyone else looking for a solution. You can use the category_css_class filter.

    add_filter( 'category_css_class', 'add_category_slug_as_class', 10, 4);

public static function add_category_slug_as_class($css_classes, $category, $depth, $args) {
    $css_classes[] = $category->slug;
    return $css_classes;
}

Comments are closed.