CODEWITHSUNDEEP
phpcsswordpress
Patrice Poliquin
Patrice Poliquin

Reputation: 372

Add active class to a menu link with WordPress

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.

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!

Upvotes: 1

Views: 6386

Answers (4)

Shiv Singh
Shiv Singh

Reputation: 7221

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.

Upvotes: 0

Anil Meena
Anil Meena

Reputation: 993

you can use multiple classes on nav menu like this

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

Upvotes: 1

jaydeep namera
jaydeep namera

Reputation: 1064

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;

}

Upvotes: 2

Eliran Efron
Eliran Efron

Reputation: 604

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.

Upvotes: 1

Related Questions