Support » Themes and Templates » Dynamic menu highlighting using “wp_list_categories()”

  • Resolved tylerhauser


    I am having a ridiculously difficult time making this work. I have a menu at the top of my site comprised almost entirely of categories (using wp_list_categories). When a user selects one of the categories, I’d like that category to be highlighted in the menu. At the same time, I have a Home link as well and I’d like it to be highlighted as well, when selected.

    So far, nothing I’ve tried has made this work. Neither the category nor the home page links get highlighted when selected.
    Using Arcsin‘s theme called Natural Essence. It wasn’t initially set up to list categories.

    Can anyone help out?

Viewing 6 replies - 1 through 6 (of 6 total)
  • I am having the exact same problem as well. If I find a solution I will let you know.

    Excellent. Thanks lindseyh.

    Is anyone able to help me out?

    Jeremy Clark



    This might get you own your way.

    i have this functioning on my site using the fold page list plugin. but in effect im sure it works the same.
    at the start of my list, after the <ul> i have placed `<?php
    if (is_home()) {$pg_li .=” current_page_item”;}
    this asigns the current page item the class current_page_item(!)
    do this first then view your source, you should see that whichever page you are on now has this class, and all others have page_item.

    now you need to assign the current_page_item class some css, i have had to include some !important tags to overrule some others, so that it functions how i wanted, in my case so that a parent page is highlighted when on that page, but any child pages remain unhighlighted. then when you click on a child page, this and only this page is highlighted, and the parent page returns to its normal colour.

    the css i used is as follows

    .current_page_item a {color: #ffffff !important; background: #B40000; }
    .current_page_item ul li.page_item a {background: none; color: #50709A !important; }                                     .current_page_item ul li.page_item a:hover {background: #B40000; color: #ffffff !important; }

    this also includes some hover effects. you will need to change the colours to fit your theme.

    hope this works for you both

    Thanks everyone!

    Although I managed to solve my problem it wasn’t necessarily due to advice you gave me. I never even thought to check my site’s source until EPICALEX mentioned it. I immediately checked my source and discovered that my current page item class was actually “current-cat” versus the WordPress default of “current_page_item”. I modified my CSS and PRESTO! it worked. I have no idea why the assigned class is “current-cat” but really, that’s ok by me.

    To get the homepage link to get highlighted when selected, I used a modified version of Gudstoff‘s dynamic menu highlighting “tutorial”.

    All in all, I’m happy.

    Thanks again, everyone.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Dynamic menu highlighting using “wp_list_categories()”’ is closed to new replies.