Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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!

share|improve this question

1 Answer 1

up vote 1 down vote accepted

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
 }
}
?>
share|improve this answer
    
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. –  Ravs Jun 10 '13 at 9:30
    
I updated my code please try again i hope it will work. –  Ravs 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

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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