Ajouter une classe active à ses items de menu

Comment mettre en évidence un lien de menu ?

En css

Si vous codez votre propre thème wordpress, vous aurez certainement besoin de mettre en évidence l’élément de menu de la page en cours. Cela permet à l’utilisateur de mieux se repérer sur le site.

Par défaut, wordpress génère pour chaque page en cours une classe .current-menu-item sur l’élément de menu actif.

Il vous suffit donc de styliser cet élément, comme par exemple :

.main-navigation li:hover,
.main-navigation li:focus,
.main-navigation li.current-menu-item{
	border-bottom:5px solid #039BE5;
}

Via un filtre wordpress

Si pour une raison quelconque cela ne fonctionne pas, il y a toujours la solution d’utiliser le filtre nav_menu_css_class, pour ajouter une classe « .active » à notre élément en cours. Cette fonction est à placer dans votre fichier functions.php.

function cc_undeline ($classes, $item) {
  if (in_array('current-menu-item', $classes) ){
    $classes[] = 'active ';
  }
  return $classes;
}
add_filter('nav_menu_css_class' , 'cc_underline' , 10 , 2);