Current Category Highlight (7 posts)

  1. xmatter
    Posted 2 years ago #

    I am using the sidebar widget Categories and for the life of me, cannot get the current category to highlight. here's my css:

    #sidebar-left .widget {margin:0; padding:0;}
    #sidebar-left .widget h4 {color:#444; padding:0 0 0 5px; margin:0; background:#999; font-size:13px; font-weight:normal; color:#fff; line-height:22px;border-bottom:1px solid #eee;}
    #sidebar-left .widget ul {margin: 0; padding: 0; list-style: none;}
    #sidebar-left .widget ul li {}
    #sidebar-left .widget ul li a {margin:0; padding:3px 5px; color:#eee; background:#aaa; line-height:16px; border-bottom:1px solid #eee; display:block; text-decoration:none; text-align:left}
    #sidebar-left .widget ul li:first-child a {border-top:none;}
    #sidebar-left .widget ul li:last-child a {border-bottom:none;}
    #sidebar-left .widget ul li a:hover {background:#999; color:#eee;}
    #sidebar-left .widget ul li.current_page_item a,
    #sidebar-left .widget ul li.current-cat {background:#eee; color:#444}

    Thanks in advance!

  2. xmatter
    Posted 2 years ago #

    I forgot to mention that the CSS posted above does work well for everything except current-cat.

  3. Michael
    Part-Time Forum Moderator
    Posted 2 years ago #

    the 'categories' widget will only have the .current-cat for category archive pages.

    can you post a link to your site, to one of the category archives?

  4. xmatter
    Posted 2 years ago #

    I do not have a live site, just a local install. Is there a way to either turn on something to NOT archive categories and apply the highlight?

    I guess the issue is not dependent on the widget itself, but on the post itself.

  5. Michael
    Part-Time Forum Moderator
    Posted 2 years ago #

    for anything using the wp_list_categories() function as the widget does, try using a filter function added into functions.php of your theme;


    //add .current-cat css class to categories of single post in 'categories' widget//
    function highlight_single_posts_categories($output) {
    global $post;
    if(is_single()) :
    $categories = wp_get_post_categories($post->ID);
    if($categories) { foreach($categories as $value) {
    	if(preg_match('#item-' . $value . '">#', $output)) {
    	$output = str_replace('item-' . $value . '">', 'item-' . $value . ' current-cat">', $output);
    return $output;
  6. xmatter
    Posted 2 years ago #

    Thanks for all the help. I got it to work by simple adding !important to the .current-cat CSS.

  7. wakingmedia
    Posted 2 years ago #

    Alchymyth - your code worked for me! Thank you!!

Topic Closed

This topic has been closed to new replies.

About this Topic


No tags yet.