Add active class to a menu link with WordPress

3 Views

I am using the WordPress function wp_nav_menu to create my main menu.

In this menu, I have a link named “News” for exemple and I would like to make this link highlight when I am in the single.php file template.

Read More

At the moment, my code is the one below. I am not “used” to work with this WordPress function. 

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>

Is there any way to said for exemple 

if($is_single())
{
echo 'class="active"';
}

I have checked arround on SO and I founded some informations that might be interesting but nothing is really answering my question.

On this page, some one suggest to check in “Show on screen” options : add class to dropdown menu inside dynamic wordpress menu

enter image description here

I also found this page in the codex, but I’m not sure how to use it : http://codex.wordpress.org/Function_Reference/wp_nav_menu#How_to_add_a_parent_class_for_menu_item

Thx in advance for the help!

Post Views: 3

Related posts

Leave a Reply

4 comments

  1. wp_nav_menu automatically add “current_page_item” class to li tag. so you can target “current_page_item” for active menu.

    li.current_page_item a{
color:#fff;

    }

  2. Well, you have two nice options to do that:

    The first one is to add a class name to single.php main div and than add in your CSS file a property like:
    .singleClass .nav-menu ul li a {color: red; //any setting you would like }

    The other way is adding that custom class to the menu by changing menu_class in the call of the menu into the page.

    If this is not working for you i would like to hear more about your theme hierarchy so i could be more specific with my answer.

  3. you can use multiple classes on nav menu like this

    <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu active' ) ); ?>

  4. In wordpress 4.x it have a class in current menu as current_page_item so you have to add css for class .current_page_item for current and active class like this

    .current_page_item
{
border-bottom: 3px solid #50c1e9;
}

    and see result after page refresh.