How to add active class on current menu item page?

Question

I have two links: Products and News.

When i click on Products or News, it returns me an archive page that contains some posts, when i click on a post it returns me a single page of this post.

In the menu I use this code on <li> to add a class called active if the page is home:

<li<?php if(is_home()) {?> class="active"<?php } ?>>

But i dont know how to do it when I have two archive pages and two singles pages.

If i use if( is_archive() || is_single() ) it'll add class on both menu itens.

Some help would be appreciated.

Answer 1

You could add conditional classes for each in your child theme functions file:

Here's one example you can modify to suit your own needs.

add_filter('nav_menu_css_class' , 'wpsites_nav_class' , 10 , 2);

function wpsites_nav_class($classes, $item){

if( is_archive() && $item->title == "Products"){     

         $classes[] = "products-class";
 }
 return $classes;

Source http://codex.wordpress.org/Function_Reference/wp_nav_menu#Adding_Conditional_Classes_to_Menu_Items

You can then style your nav menu using the new class in your child themes style.css file.

.products-class {

Your CSS declarations
}

This CSS code is conditional based on the PHP code above.

Answer 2

I suppose your Products and News posts are custom posts.
For both conditional tags, there is a $post_type-specific equivalent:

if (is_post_type_archive('products')) {
   // ...
} elseif (is_post_type_archive(array('news', 'something'))) {
   // ...
} elseif (is_singular('products')) {
   // ...
} elseif (is_singular(array('news', 'something'))) {
   // ...
}

So, for Products, it would be:

if (is_post_type_archive('products') || is_singular('products'))

News accordingly.

References:

• is_post_type_archive
• is_singular