Comment ajouter un nouveau menu à un thème WordPress

Qu’on achète un thème WordPress ou qu’on en utilise un gratuit, les emplacements de menus ne sont pas illimités. Du moins, ils le sont, mais il faudra pour cela définir de nouvelle zone de menus dans le dit thème afin de les accueillir. Cela se fait facilement en modifiant le fichier functions.php

La plupart des thèmes WordPress comportent au moins une zone de navigation (une zone d’accueil pour un menu). Il peut être utile d’en ajouter d’autre, comme par exemple dans le pied de page ou dans l’en-tête.

Comment créer une zone de menu personnalisée pour mon thème WordPress ?

Ce tutoriel s’adresse aux utilisateurs capables de modifier leur fichier functions.php et la structure de leur thème. Pré-requis : connaissance en HTML/CSS.

Que vous soyez occuper à créer votre thème ou à modifier un thème existant, la méthode est la même et reste assez simple. Les menus de navigation sont un atout des thèmes WordPress. Chaque thème peut définir les siens en définissant une zone, et un menu.

La première chose à faire est d’enregistrer votre nouveau menu de navigation en ajoutant ce code au fichier functions.php de votre thème.

function wppln_mes_menus() {
  register_nav_menu('nouveau-menu',__( 'Mon nouveau menu' ));
}
add_action( 'init', 'wppln_mes_menus' );

Il est possible de modifier le hook “nouveau-menu“, le titre “Mon nouveau menu” à votre guise.

Rendez-vous maintenant dans votre panneau d’administration dans “Apparence > Menus”. Vous y découvrirez votre nouvelle zone de menu prête à accueillir vos menus.

Si votre nouveau menu est déjà créé, il ne vous reste plus qu’à le sélectionner dans la liste déroulante “Choisir un menu”. Si celui-ci n’existe pas encore, créez alors un nouveau menu pour l’y ajouter !

Comment créer plusieurs zones de menus dans un thème WordPress ?

Ajouter un ou plusieurs menus, c’est presque la même chose. Vous pouvez soit répéter l’étape précédente en changeant bien le nom des menus, soit vous pouvez utiliser le code suivant (toujours dans functions.php) :

function wppln_mes_menus() {
  register_nav_menus(
    array(
      'nouveau-menu-1' => __( 'Mon nouveau menu 1' ),
      'nouveau-menu-2' => __( 'Mon nouveau menu 2' )
    )
  );
}
add_action( 'init', 'wppln_mes_menus' );

à nouveau, vous pouvez modifier les hooks “nouveau-menu-1”, “nouveau-menu-2” et les titres “Mon nouveau menu 1” & “Mon nouveau menu 2” par les noms de votre choix.

Comment afficher mes menus de navigation dans mon thème WordPress ?

C’est bien, nous avons créé les zones, elles sont bien visibles dans l’admin, mais maintenant ? Comment je fais pour qu’elles soient visibles sur mon site ? Comment est-ce que je les ajoute à mon thème ?

Pour ce qui est de l’endroit ou afficher votre menu, je suppose que vous avez déjà votre idée, et il me serait impossible de le savoir pour vous. Généralement, les menus de navigation sont placés en en-tête d’un site Web juste après le titre ou le logo du site, ou dans le pied de page. Cependant, les possibilités sont infimes. Si vous souhaitez par exemple ajouter un menu à la fin des articles, pas de souci. C’est la même procédure.

Ajoutez simplement le code php suivant à l’endroit ou vous souhaitez afficher votre/vos menus.

<?php
wp_nav_menu( array( 
    'theme_location' =--> 'my-custom-menu', 
    'container_class' =&gt; 'custom-menu-class' ) ); 
?>

Remplacez bien évidemment “my-custom-menu” par le hook défini dans l’un des deux exemples précédents. Répétez l’opération autant de fois que vous le voulez. Modifiez aussi “custom-menu-class” par le nom de la classe CSS de votre choix.

Notez qu’il est également possible d’ajouter un menu dans un widget.

Il ne vous reste plus qu’à ajouter le code CSS pour personnaliser le menu :

div.mon-menu-css ul {
    list-style-type: none;
    list-style: none;
    list-style-image: none;
}
div.mon-menu-css li {
    padding: 10px;
    display: inline;
}