Highlight Menu Item When Viewing Single Post wordpress

Question

i am making a wordpress news site. I use the new wp menu 3.0 where every menu item links to a template page. On those pages i display posts from custom loops. for instance lets say i have the page breaking news that displays the posts from the breaking news category. When i click on that link it takes me to the breaking news page and from there when i view single post from that category i want the page breaking news to be highlighted.

I have searched and found that wordpress assings ancestor classes to the links but thats not the case for me since i think that only works with categories as the navigation and im using pages.

Can anyone help me?

Thanks :)

Answer 1

are you using firebug or the inspectors built into chrome and safari. with those you can directly see what classes are available for you to style. maybe you already know that. If there are no classes to style there are hooks you can use to add a class. can you provide a url to your site?

Answer 2

Try the following in header.php...

<?php     
/**
 * Do this to #access in header.php
 */
?>
<nav id="access" role="navigation" class="<?php
    if(in_category('cat-1')) echo 'post-in-cat-1 ';
    if(in_category('cat-2')) echo 'post-in-cat-2 ';
    if(in_category('cat-3')) echo 'post-in-cat-3 ';
 ?>">

Then in your stylesheet add this:

/**
 * look for the menu-item-# generated by the menu in your theme and use that.
 */
.post-in-cat-1 .menu-item-1234,
.post-in-cat-2 .menu-item-1235,
.post-in-cat-3 .menu-item-1236
{
    color:#FFF; // or whatever color you want :)
}

That's just my first thought, totally untested, so let me know if it works at all. I'm guessing that it will work based on this.

It's not as dynamic as real category pages since you have to set up the categories yourself and add the menu-item numbers to your CSS as needed. So there might be a more clever solution. But, without testing it myself, this is what I would try.

Answer 3

 1. In css file of ur website,include this line where
    - nav is the id of <nav> tag,where i have mentioned my menus in header.php

      <nav id="nav">
        <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
      </nav>


      #nav li.current_page_item a {
       -moz-border-radius: 3px 3px 3px 3px;
        background-color: #82BD42;
        color: #FFFFFF !important;
        padding: 10px;
        text-decoration: none;
      }  
2. We can change background-color,color and padding to our choose.