WordPress.org

Ready to get started?Download WordPress

Forums

Add Categories ID and/or Class to wp_list_categories (7 posts)

  1. john_harrison
    Member
    Posted 2 years ago #

    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

  2. alchymyth
    Forum Moderator
    Posted 2 years ago #

    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 */
  3. john_harrison
    Member
    Posted 2 years ago #

    Thanks for the quick reply|

    John

  4. john_harrison
    Member
    Posted 2 years ago #

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

    cat-item-7 is a bit .... ya know :)

  5. john_harrison
    Member
    Posted 2 years ago #

    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

  6. alchymyth
    Forum Moderator
    Posted 2 years ago #

    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 = ', ';
    }
    ?>
  7. john_harrison
    Member
    Posted 2 years ago #

    Thanks, this is great!

Topic Closed

This topic has been closed to new replies.

About this Topic