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

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
    Jun 10 '13 at 9:23
  • did you remove code or it still in functions.php. Jun 10 '13 at 9:30
  • I updated my code please try again i hope it will work. Jun 10 '13 at 9:36
  • Ah yes! GET instead of POST obviously, I didn't see it. Thanks! It works perfectly now!
    – Slyvain
    Jun 10 '13 at 16:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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