Support » Plugins » wp_list_categories: highlight current category when viewing single post

  • Hi all,

    since I need to use wp_list_categories in a site’s navigation, I have realized what I consider a bug in this function: it does not allow for highlighting the current category when I’m looking at a post.

    I’m not fond of fiddling with core files, so is there any way I can write a plugin or a functions.php function to add this “current-cat” style to the category list?

Viewing 11 replies - 16 through 26 (of 26 total)
  • Maybe someone could help me here.
    Please reference: http://www.imontvbitch.com
    In the header navigation menu the first two (attention & breakdown are pages) and the rest are categories. The site highlights the current page but won’t highlight the current category.
    Can anyone help me do that?

    The current stylesheet uses this code:

    #menu-header li.current_page_item a { color: #FF3300; background-image: url(‘images/dotted-menu-hover.png’); background-repeat: repeat-x; }

    Thank you so much warmbeer !!
    I’ve been looking for a solution like this for weeks ! I’m a novice … so thank you very much, people like me need people like you 🙂

    tvbitch,

    You should use the “current-cat” style ! When you look at your Code with Firefox for example, you can see how it is displayed; for example, when I’m in the “Inspiration” Category, I see this:

    (...)
    
    	<li class="cat-item cat-item-10 current-cat"></strong><a href="http://www.imontvbitch.com/?cat=10" title="View all posts filed under Inspiration">Inspiration</a>
    </li>
    	<li class="cat-item cat-item-11"><a href="http://www.imontvbitch.com/?cat=11" title="View all posts filed under Instrument">Instrument</a>
    </li>
    
    (...)

    As you can see, the “current-cat” attribute has been added in the template for the “Inspiration” category: then you just have to add and customize it in your stylesheet 🙂

    Chatougri thanks for responding. I’m more of a novice than you, so maybe you can help me more. So the “current-cat” is in the template. Where and how do I add and customize it in my stylesheet? For the menu header I tried:

    #header #menu-header li.current_cat a { color: #FF3300; background-image: url(‘images/dotted-menu-hover.png’); background-repeat: repeat-x; }

    I basically copied and edited what I saw in the stylesheet & assumed was responsible for highlighting the pages. The template uses two stylesheets. Here’s what the first has:

    /* HEADER */

    #header { width: 1030px; height: 85px; border-bottom: 1px dotted #333333; clear: both; }

    #header a, #header a:visited { text-decoration: none; color: #333333; }

    #header a:hover { text-decoration:none; color: #000000; }

    #header h1 { float: left; font-size: 80px; letter-spacing: -0.1em; font-weight: bold; margin: 0; padding-right: 10px; }

    h2.description { color: #999999; font-size: 25px; margin: 0 0 46px 0; text-align: left; }

    #menu-header { position: relative; top: 7px; list-style-type: none; float: left; font-size: 18px; font-weight: bold; margin: 0; padding: 0; }

    #menu-header li { float: left; display: block; height: 32px; padding: 0; margin-right: 20px; }

    #menu-header li a, #menu-header li a:visited { display: block; height: 32px; padding-bottom: 11px; color: #666666; }

    #menu-header li a:hover, #menu-header li a:active { display: block; color: #FF3300; background-image: url(‘images/dotted-menu-hover.png’); background-repeat: repeat-x; }

    #menu-header li.current_page_item a { color: #FF3300; background-image: url(‘images/dotted-menu-hover.png’); background-repeat: repeat-x; }

    and the second has:

    #menu-header { position: relative; top: 62px; list-style-type: none; float: right; font-size: 18px; font-weight: bold; margin: 0; padding: 0; }

    #menu-header li { float: left; display: block; height: 32px; padding: 0; margin-left: 20px; }

    #menu-header li a, #menu-header li a:visited { float: left; display: block; height: 32px; padding-bottom: 17px; color: #666666; }

    #menu-header li a:hover, #menu-header li a:active { float: left; display: block; color: #FF3300; background-image: url(‘images/dotted-menu-hover.png’); background-repeat: repeat-x; }

    #header #menu-header li.current_page_item a { color: #FF3300; background-image: url(‘images/dotted-menu-hover.png’); background-repeat: repeat-x; }

    #footer #menu-footer li.current_page_item a { text-decoration: none; color: #FF3300; background-image: url(‘images/dotted-menu-hover.png’); background-repeat: repeat-x; }

    Any idea what I need to do?

    Hello, sorry I took time to respond !

    It seems that you put “current_cat”, but in fact it’s “current-cat”, be careful 😉

    Then you could make your code in a simpler way ! For example, to highlight the current category, you just need to set a color, without any link attribute, etc.

    So you can add this in your stylesheet:

    #menu-header .current-cat { color: #FF3300; }

    That’s simple, and that’s all 🙂

    And if you want to have a dotted border, and get rid of the background image, you can replace (in your stylesheet):

    background-image: url('images/dotted-menu-hover.png'); background-repeat: repeat-x;

    with:

    border: #FF3300 1px dotted

    Always try to make your code the simplest you can 😉

    Oh snap!
    Thanks so much Chatougri!!
    These forums are great!

    Awesome warmbeer, thanks a lot.

    Has anyone figured out how to tackle the grandchildren issue? i.e. 3 levels into the navigation, wp_list_categories stops adding category parent classes both on the category archive pages and on the individual post pages.

    pajtai ,

    <?php
    $catsy = get_the_category();
    $myCat = $catsy->cat_ID
    ?>

    this wont work if the post is archived in more than one cat.
    so i just add some if & elsif statments and it worked , like :

    if  (!is_page() && !is_home() && !is_single()){
    	$catsy = get_the_category();
    	$myCat = $catsy->cat_ID;
    	$currentcategory = '&current_category='.$myCat;
    }
    
    elseif (is_single()){
    	$catsy = get_the_category();
    	$myCat = $catsy[0]->cat_ID;
    	$currentcategory = '&current_category='.$myCat;
    }

    Really great stuff!

    Though could someone help me out with this..?

    I want to include it in an already complicated piece of coding:

    <?php if ( get_option('biz_blog_navigation' ) == 'true' ) { ?><?php wp_list_categories('child_of=' . get_option( 'biz_blog_cat_id' ) . '&hide_empty=true&title_li=<a href="' . get_option('home') . get_option('biz_blog_permalink') .'" title="Nieuws"><span>Nieuws</span></a>'); ?><?php } ?>

    Currently placing Warmbeers code only displays the parent category, if I could make it display the child categories too then it would be perfect.

    First, I assume most of you are using this code outside the loop in the global nav.

    I just wanted to point something out… the title of this thread… “When viewing single post”.. if you alter your global nav with this code, you BREAK the built-in working functionality of the category archives where current-cat and current-parent-cat class flagging works just fine for highlighting.

    Romeo_sat: your first conditional is not really needed, you don’t need to pass the current category param to wp_list_categories when you are on a category page.. if you do, you are passing it the param of THE FIRST POST.. that is what get_the_category does, it returns the categories for a single post.

    This code should only be used with a is_single() conditional..

Viewing 11 replies - 16 through 26 (of 26 total)
  • The topic ‘wp_list_categories: highlight current category when viewing single post’ is closed to new replies.