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 '14 at 14:40
  • @s_ha_dum I didnt use wp_nav_menu, i created it myself on code – Ramon Vasconcelos Feb 6 '14 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 '14 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. – Ramon Vasconcelos Feb 6 '14 at 15:08
  • Use wp_nav_menu and see the answer by @BradDalton. – s_ha_dum Feb 6 '14 at 15:19

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? – Ramon Vasconcelos Feb 6 '14 at 14:58
  • Put the code at the end of your functions.php file. Use the class in your child themes style.css file. – Brad Dalton Feb 6 '14 at 14:59
  • I mean where this function add the class on code? on body? – Ramon Vasconcelos Feb 6 '14 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 – Brad Dalton Feb 6 '14 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, privacy policy and cookie policy

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