Support » Fixing WordPress » Add Categories ID and/or Class to wp_list_categories

  • Hi Everyone –

    I am using a list of categories as my site navigation. I’ve managed to get it working but now need to individually style each category.

    Is there any way to either (a) add the category slug as the id, or (b) add a custom class to each list item?

    In addition, for each post (which will have only one Category), I want to add a class / id to the list item. Just in case in the future a post needs to be in more than one category. Is this possible?

    Many thanks,

    John

Viewing 6 replies - 1 through 6 (of 6 total)
  • Michael

    (@alchymyth)

    Forum Moderator

    http://codex.wordpress.org/Template_Tags/wp_list_categories#Markup_and_Styling_of_Category_Lists

    the existing output is a css class with the category id;

    li.cat-item-7 { ... }  /* category ID #7, etc */

    Thanks for the quick reply|

    John

    Is there any way I can make the classes more meaningful?

    cat-item-7 is a bit …. ya know 🙂

    Also, for the category of each post, how would I assign a class to the category?

    <span class="post-category"><a href="http://localhost/wordpress/category/blog/" title="View all posts in Blog" rel="category tag">Blog</a></span>

    I would want to apply the name of the category as a class to the hyperlink tag. So the above should look like this:

    <span class="post-category"><a href="http://localhost/wordpress/category/blog/" class="blog-category" title="View all posts in Blog" rel="category tag">Blog</a></span>

    Thanks,

    John

    Michael

    (@alchymyth)

    Forum Moderator

    make the classes more meaningful?

    you could additionally output a css class incorporating the category slug, for instance in the form of .cat-item-{slug};

    by using a filter function added to functions.php or your theme:

    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;
    }

    for the category of each post, how would I assign a class to the category?

    possibly hand-code a new output for the post’s categories, building on get_the_category() http://codex.wordpress.org/Function_Reference/get_the_category

    example (to replace <?php the_category(', '); ?>):

    <?php $sep = '';
    foreach((get_the_category()) as $cat) {
        echo $sep . '<a href="' . get_category_link($cat->term_id) . '"  class="cat-' . $cat->slug . '" title="View all posts in '. esc_attr($cat->name) . '">' . $cat->cat_name . '</a>';
    $sep = ', ';
    }
    ?>

    Thanks, this is great!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Add Categories ID and/or Class to wp_list_categories’ is closed to new replies.