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.

  • How is your menu created?
    – s_ha_dum
    Feb 6, 2014 at 14:40
  • @s_ha_dum I didnt use wp_nav_menu, i created it myself on code Feb 6, 2014 at 14:59
  • is_archive and is_single should be mutually exclusive. I'd suggest you post more code. Why are you not using wp_nav_menu?
    – s_ha_dum
    Feb 6, 2014 at 15:01
  • @s_ha_dum I tried to use wp_nav_menu, it add class current but doesnt add this class on Products nor News. Feb 6, 2014 at 15:08
  • Use wp_nav_menu and see the answer by @BradDalton.
    – s_ha_dum
    Feb 6, 2014 at 15:19

2 Answers 2


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.

  • where i supposed to put this code? on function.php? and where this "products-class" will appear? Feb 6, 2014 at 14:58
  • Put the code at the end of your functions.php file. Use the class in your child themes style.css file. Feb 6, 2014 at 14:59
  • I mean where this function add the class on code? on body? Feb 6, 2014 at 15:09
  • Adds it to the nav menu item you include in the PHP code. It conditionally adds it to the products menu item only when on an archive page. Simply change the conditional tags to suit your needs.codex.wordpress.org/Conditional_Tags Feb 6, 2014 at 15:13

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.



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.