1

Using the wp_nav_menu() function to display my menu I noticed the highlighting in the menu was working well for the pages I created (like archives.php) but not anymore when a date (date.php), category (category.php) or tag (tag.php) was selected.

How can I keep my "Browse" menu entry highlighted when a category is selected?

Here is how I include the menu in header.php:

<div id="main-menu">
    <?php wp_nav_menu(array('menu' => 'primary', 'menu_class' => '', 'container' => false, 'theme_location' => 'header')); ?>
</div>

The Firebug excerpt when the archives page (called "Browse" in the menu) is selected, here it is the id "menu-item-299":

<div id="main-menu">
    <ul id="menu-primary" class="">
        <li id="menu-item-304" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-304">
        <li id="menu-item-299" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-280 current_page_item menu-item-299">
        <li id="menu-item-307" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-307">
        <li id="menu-item-300" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-300">
        <li id="menu-item-301" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-301">
    </ul>
</div>

And finally, when I selected a date, or a category:

<div id="main-menu">
    <ul id="menu-primary" class="">
        <li id="menu-item-304" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-304">
        <li id="menu-item-299" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-299">
        <li id="menu-item-307" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-307">
        <li id="menu-item-300" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-300">
        <li id="menu-item-301" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-301">
    </ul>
</div>

The live version is accessible here: http://www.slyvain.fr/v2/?page_id=280

This being my first template, I am pretty sure I forgot or missed something but can't figure it out, thank you very much for your help!

1 Answer 1

1

one solution to your problem using jQuery( put this code in functions.php )

<?php
add_action('wp_footer','ravs_browse_menu');
function ravs_browse_menu(){
 if(isset($_GET['cat']) && $_GET['cat'] !=''){
 ?>
 <script>
  jQuery(document).ready(function(){
   jQuery('#menu-item-299').addClass('current-menu-item');
  });
 </script>
 <?php
 }
}
?>
4
  • Thank you Ravs for your answer. I did place that code in my functions.php file however there is no change in the result...
    – Slyvain
    Commented Jun 10, 2013 at 9:23
  • did you remove code or it still in functions.php. Commented Jun 10, 2013 at 9:30
  • I updated my code please try again i hope it will work. Commented Jun 10, 2013 at 9:36
  • Ah yes! GET instead of POST obviously, I didn't see it. Thanks! It works perfectly now!
    – Slyvain
    Commented Jun 10, 2013 at 16:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.