Tutoriels, astuces, how-to.. et autres ! Le Web façon intégration !

Une classe différente pour un parent d’un page avec wp_nav_menu

Je cherchais une solution rapide, simple et efficace afin de palier à un problème récemment :

Comment ajouter une classe au parent d’une page si je me trouve dans un de ses enfants?

Voyons le problème!

Premièrement, j’ai un menu en haut de mon site, sans sous-menu.

Je veux ajouter une classe à chacun de ces <li> lorsque je suis dans un de leur enfant. Je précise qu’il n’y a pas de sous-menu mais que j’ai bel et bien utilisé les paramètres ‘parents’ pour chaque page enfant d’une autre page. Voici donc comment j’appels mon menu :

<?php wp_nav_menu( array( 'menu' => 'primaire' ) ); ?>

Ainsi, je sais que j’appels un menu fonctionnel. De plus, je sais que pour obtenir mon résultat, je dois passer par le fichier function.php vu que le wp_nav_menu ne possède pas le paramètre nécessaire.

Voici donc la solution, trouvé sur le site de blago.net, merci!

/* -- add css_class to main menu for a current page in a sub menu --*/
function add_current_page_class( $classes = array(), $item = false ) {
    //$item is each menu item on the page
    global $post;

    $homepage_url = trailingslashit( get_bloginfo('url') );
    if( is_single() || is_404() || $item->url == $homepage_url ) return $classes;

    //get main menu *parent* id from $item (for custom menu)
    $item_parentId = $item->post_parent;
    //check if current $post has same ancestor
    $ancArr = get_post_ancestors( $post->ID );
    if(is_page() && $post->ID == $item_parentId){
        $classes[] = 'current-post-ancestor';
    }else{
        foreach($ancArr as $ancestor){
            if( is_page() && $ancestor == $item_parentId ){
                $classes[] = 'current-post-ancestor';
            }
        }
    }
    return $classes;
}
add_filter( 'nav_menu_css_class', 'add_current_page_class', 10, 2 );

Ceci vous donnera un résultat comme ça :

<li id="menu-item-101" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-101 current-post-ancestor">

au lieu de ça :

<li id="menu-item-101" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-101">

Laisser un commentaire