WordPress intègre de nombreuses fonctionnalités pour la création de menus qui devraient convenir à la plupart des créations de sites. Cependant, dans certains cas, il est nécessaire d’aller plus loin, comme par exemple créer un menu uniquement visible pour les connectés ou selon le rôle ou groupe de l’utilisateur, voir même selon la page affichée. Vous pourrez, à l’issue de ce tutoriel, rapidement être capable de créer vos propres menus et personnaliser encore plus vos sites.

Avant toute chose, sachez qu’il est important, pour une pratique plus saine de la modification de votre WordPress, de travailler avec un thème enfant. Toutes les modifications doivent s’y dérouler.

Déclarer un nouvel emplacement de menu dans WordPress

WordPress vous permet de créer des menus personnalisés, mais encore faut-il lui dire où ces menus doivent être affichés. Un thème peut contenir plusieurs emplacements : en-tête, pied de page, barre latérale, zone mobile… et vous pouvez tous les gérer via la fonction register_nav_menu().

Pour cela, il faut modifier le fichier functions.php de votre thème enfant (jamais celui du thème parent pour éviter les pertes lors des mises à jour). Voici un exemple basique de déclaration d’un nouvel emplacement de menu :

function register_my_menu() {
    register_nav_menu('nouveau-menu', __('Nouveau Menu'));
}
add_action('init', 'register_my_menu');

Ce petit bout de code fait beaucoup :

• register_nav_menu() est une fonction native WordPress pour enregistrer un seul emplacement de menu.
• Le premier argument 'nouveau-menu' est l’identifiant (slug) du menu — vous l’utiliserez dans le code pour l’afficher.
• Le second argument __('Nouveau Menu') est le nom lisible par l’utilisateur, tel qu’il s’affichera dans le back-office WordPress, dans la section Apparence > Menus.

Ce code est encapsulé dans une fonction register_my_menu(), que l’on exécute lors du hook init grâce à add_action(). Ce hook est déclenché lors du chargement de WordPress, après que tous les fichiers principaux ont été initialisés, ce qui en fait un excellent moment pour déclarer les menus. Pour approfondir cette mécanique d’exécution différée, consultez notre guide sur les hooks WordPress.

Déclarer plusieurs emplacements de menu sans dupliquer le code

Vous avez besoin de plusieurs menus ? Par exemple :

• Un menu principal pour le header,
• Un menu mobile (souvent appelé « burger menu »),
• Un menu secondaire pour les liens utiles (CGV, mentions, etc.),
• Un menu footer avec des liens vers les réseaux sociaux ou les pages institutionnelles.

Ne dupliquez pas la fonction précédente, car déclarer plusieurs fois la même fonction dans PHP provoque une erreur fatale. Utilisez plutôt register_nav_menus(), qui accepte un tableau d’identifiants et de libellés lisibles :

function wpb_custom_new_menu() {
    register_nav_menus(
        array(
            'menu-principal' => __('Menu Principal'),
            'menu-secondaire' => __('Menu Secondaire'),
            'menu-footer' => __('Menu Pied de page'),
            'menu-mobile' => __('Menu Mobile')
        )
    );
}
add_action('init', 'wpb_custom_new_menu');

Chacun de ces emplacements apparaîtra dans l’onglet « Gérer les emplacements » du menu « Apparence > Menus » du tableau de bord WordPress. Vous pourrez alors affecter un menu existant à chacun d’eux via l’interface d’administration, sans toucher au code.

Exemples concrets d’usage

• Menu principal : destiné à la navigation principale, souvent dans l’en-tête du site.
• Menu mobile : menu replié pour affichage sur smartphone, lié à une condition CSS ou JS.
• Menu footer : liens informatifs (politique de confidentialité, plan du site, CGU…)
• Menu contextuel : un menu qui change selon la page, utilisé par exemple pour une arborescence de rubrique ou une navigation intra-catégories.

Une fois ces emplacements créés et enregistrés, il vous restera à les afficher dans les bons fichiers de votre thème à l’aide de la fonction wp_nav_menu(), que nous verrons dans la prochaine section.

Note importante : n’oubliez pas que WordPress attend que ces emplacements soient appelés quelque part dans les templates. Les enregistrer dans le functions.php ne les rendra pas visibles tant qu’ils ne sont pas « invoqués » dans un header.php, footer.php ou autre.

Afficher un menu personnalisé dans votre thème WP

Pour que votre menu soit visible sur le site, il faut maintenant l’intégrer manuellement dans l’un de vos fichiers de thème. Le plus souvent, on insère les menus dans le fichier header.php, mais vous pouvez aussi les afficher dans le footer.php ou dans une sidebar.php.

Voici le code PHP à insérer :

<?php
    wp_nav_menu(array(
        'theme_location' => 'nouveau-menu',
        'container_class' => 'class-nouveau-menu'
    ));
?>

Ce code affiche le menu enregistré sous l’identifiant nouveau-menu. Le paramètre container_class vous permet d’attribuer une classe CSS spécifique à ce menu, afin de le cibler pour la mise en forme.

Styliser le menu en CSS de WordPress

Une fois le menu affiché grâce à wp_nav_menu(), ne vous attendez pas à un chef-d’œuvre graphique immédiat. WordPress génère un HTML bien structuré (avec des balises <ul> et <li>, ainsi que des classes automatiques comme .menu-item ou .current-menu-item), mais sans feuille de style, tout cela reste… rudimentaire.

Voici un exemple de stylisation simple pour transformer votre menu en une barre de navigation horizontale, sans puces, avec des espacements harmonieux :

.class-nouveau-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1em;
}

.class-nouveau-menu ul li {
    display: inline-block;
}

.class-nouveau-menu ul li a {
    padding: 0.5em 1em;
    text-decoration: none;
    color: #333;
    background-color: #f7f7f7;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.class-nouveau-menu ul li a:hover,
.class-nouveau-menu ul li.current-menu-item a {
    background-color: #0073aa;
    color: #fff;
}

Quelques explications sur le CSS :

• display: flex; permet une disposition moderne et adaptable, parfaite pour les menus horizontaux et responsives.
• .current-menu-item est une classe automatiquement ajoutée par WordPress à l’élément correspondant à la page courante — parfaite pour indiquer visuellement où l’on se trouve dans le site.
• Les effets de :hover améliorent la navigation et rendent l’interface plus engageante.

Adaptez bien sûr ces styles à votre charte graphique : couleurs, typographies, transitions, espacements. Si vous avez plusieurs menus, utilisez des classes spécifiques ou des IDs pour les cibler finement. Et n’oubliez pas l’accessibilité : pensez au contraste, à la taille des liens cliquables, et à la navigation au clavier.

Aller plus loin : menus conditionnels et dynamiques

Maintenant que vous avez des menus visuellement attractifs, pourquoi ne pas les rendre contextuels et intelligents ? Grâce à la puissance de WordPress et quelques conditions PHP bien placées, vous pouvez afficher des menus différents selon :

• le statut de l’utilisateur (connecté ou non),
• le rôle de l’utilisateur (administrateur, éditeur, abonné…),
• la page ou l’article affiché,
• le type de contenu (CPT, taxonomie, etc.),
• ou même l’heure de la journée si vous voulez vraiment être original .

Afficher un menu uniquement pour les utilisateurs connectés

Pratique pour les sites communautaires, intranets ou plateformes membres :

if ( is_user_logged_in() ) {
    wp_nav_menu(array('theme_location' => 'menu-connecte'));
}

Afficher un menu spécifique à un rôle utilisateur

Par exemple, un menu d’administration simplifié pour les éditeurs :

if ( current_user_can('editor') ) {
    wp_nav_menu(array('theme_location' => 'menu-editeur'));
}

Vous pouvez aussi utiliser get_userdata() ou wp_get_current_user() pour des conditions plus poussées.

Afficher un menu en fonction de la page consultée

Parfait pour proposer une navigation ciblée par contexte :

if ( is_page('contact') ) {
    wp_nav_menu(array('theme_location' => 'menu-contact'));
}

Vous pouvez aussi tester plusieurs pages d’un coup :

if ( is_page(array('contact', 'a-propos', 'mentions-legales')) ) {
    wp_nav_menu(array('theme_location' => 'menu-statique'));
}

Exemples supplémentaires pour aller encore plus loin

• Menu pour un type de contenu personnalisé (CPT) :

  if ( is_singular('portfolio') ) {
      wp_nav_menu(array('theme_location' => 'menu-portfolio'));
  }
  

• Menu selon une taxonomie spécifique :

  if ( has_term('recettes', 'categorie') ) {
      wp_nav_menu(array('theme_location' => 'menu-recettes'));
  }
  

• Menu du week-end (oui, pourquoi pas ?) :

  if ( date('N') >= 6 ) {
      wp_nav_menu(array('theme_location' => 'menu-weekend'));
  }
  

Pourquoi utiliser des menus dynamiques ?

Parce qu’ils permettent :

• Une navigation contextualisée et plus intuitive,
• Un meilleur contrôle de l’expérience utilisateur,
• Une segmentation par public (connectés vs visiteurs),
• Une ergonomie renforcée dans les sections riches du site.

Et avec un peu de JavaScript ou de plugins comme Advanced Custom Fields (ACF) ou WP User Role Editor, vous pouvez même créer des règles de menu encore plus complexes.

Pour conclure : un menu WordPress bien structuré, c’est un site bien piloté

Créer et personnaliser des emplacements de menus dans WordPress est une étape fondamentale pour qui souhaite sortir du cadre rigide des thèmes par défaut. Avec un thème enfant, un soupçon de code PHP et quelques lignes de CSS, vous pouvez concevoir une navigation ultra précise, adaptée à vos besoins et à ceux de vos utilisateurs. Et comme toujours, pensez UX, accessibilité et performances ! Le menu est l’un des premiers éléments que vos visiteurs utilisent pour se repérer. Offrez-leur un GPS, pas un labyrinthe. Besoin d’aller encore plus loin ? N’hésitez pas à explorer notre section dédiée aux tutoriels WordPress.