Créer un emplacement de menu personnalisé pour WordPress

Depuis WordPress 3.0, il n’a jamais été aussi facile de créer et modifier des menus de navigation. Cette fonctionnalité n’en reste pas moins compliquée à utiliser si votre thème ne prend pas en charge les emplacements de menus.

Dans ce tutoriel, nous verrons comment définir un emplacement de menu de navigation personnalisé.

Autrement dit, il vous sera possible d’indiquer directement depuis le module Apparence puis Menus, où ce dernier devra s’afficher en sélectionnant l’un des emplacements que nous aurons spécifié.

Étape n°1 – Modification du fichier functions.php

N.B : prenez garde à ne pas dupliquer cette fonctionnalité si votre thème supporte en natif cette fonctionnalité. Faites donc une recherche préalable via la commande Rechercher de votre navigateur.

Comme souvent, il nous faut éditer le fichier functions.php présent dans le dossier /wp-content/themes/NOM_DU_THEME/functions.php accessible via un client FTP.

Vous pouvez également passer par le module Apparence puis Editeur.

En fin de fichier, ajoutez les lignes de code suivantes – code modifié le 27/08/2012 :

register_nav_menus( array(
        'Top' => 'Navigation principale',
    ) );

Ce bout de code aura pour effet de créer 2 emplacements de menu pour votre thème et d’initialiser la fonction de créations de menus.

Étape n°2 – Modification de votre thème WordPress

Évidemment, cette technique présuppose d’avoir insérer dans votre thème, la fonction qui va afficher le menu en question.

<?php wp_nav_menu( array( 'theme_location' => 'Top' ) ); ?>

Cette commande va donc afficher le menu Top que vous pouvez créer / modifier depuis l’administration de WordPress. A insérer généralement dans le fichier header.php.

Étape n°3 – Choix de l’emplacement des menus

Retournez ensuite dans Apparence puis Menus. Remarquez l’apparition d’une nouvelle boite de paramètres reprenant le titre des emplacements. Une liste déroulante vous permet alors de sélectionner le menu à afficher.

Dans notre exemple, WordPress traduit les mots « top » et « footer » par leur équivalent français de façon automatique.

Capture d'écran - Choix de l'emplacement des menus personnalisés WordPress
Choisissez l’emplacement de votre menu de navigation

Mise à jour du 24/09/2013 : sous WordPress 3.6, la gestion des menus a évolué. Un nouveau onglet intitulé Gérer les emplacements a fait son apparition. En fonction des emplacements créés dans votre thème, vous assignerez les menus correspondants. 

 

Capture d'écran - Emplacements des menus sous WordPress 3.6
La nouvelle gestion des menus sous WordPress 3.6. Pas forcément plus simple à mon avis.

Vous êtes désormais capable de définir des emplacements de menus de navigation dans votre thème WordPress. Pratique, non ?

Crédits photo : Jim Linwood

67 commentaires

  1. DORNON

    Bonjour,

    Impossible de faire apparaitre le menu personnalisé en pied de page… Je sèche complètement malgré votre excellent travail…
    Merci de m’apporter votre aide

    Bonne soirée

    Tricepa

  2. boris_b

    Idem ! J’ai toujours le primary Navigation. L’admin me propose maintenant 3 menus : Primary navigation, Haut et Pied de page. Ça ne me gène pas. J’ai l’impression qu’il n’y a plus de conflits entre les menus. Par contre, j’ai perdu le sous-menu (Pages, Catégories et Articles) et s’est ajouté l’onglet « Accueil » …

  3. Jean

    Chez moi ce code ne marchait pas comme il faut.
    Du coup, en repiquant le code d’un thème defaut de WP, ça marche, car on a vraiment le choix du menu dans le formulaire (le menu n’a pas forcément le nom imposé par le code)

    Rajouter les ouvertures et fermetures de code php (je ne savais pas si ca passait en commentaire)…

    1) pour créer des emplacements de menus perso dans “Menus”, éditer functions.php :

    register_nav_menus( array( ‘menu_1’ => __( ‘Menu 1’, ‘pagelines’ ) ) );

    2) A insérer dans la zone (éditer par exemple “page.php”) où faire apparaitre le menu1:
    wp_nav_menu( array(‘theme_location’=>’menu_1′,’depth’ => 1, ‘fallback_cb’=>’nav_fallback_simple’) );

    Et voila, et pour en créer d’autres, déclinez l’id ‘menu_1’ et le descriptif ‘Menu 1’

    1. Jean

      Et si vous voulez le formater en colonne /sidebar dans une page, par ex:

      ‘menu_1′,’depth’ => 1, ‘fallback_cb’=>’nav_fallback_simple’) ); ?>

      En sachant que ça zappe sidebar.php pour ne pas répéter, mais qu’il faut que l’option sidebar soit activée

    2. Jean

      Et pour que ça passe dans un sidebar
      (rajouter les ouvertures et fermetures à coté des div et des ?)

      div class= »span-8 last »
      div id= »sidebar »
      ?php include (THEMELIB . ‘/apps/ad-sidebar.php’); ?
      ?php wp_nav_menu( array(‘theme_location’=>’menu_1′,’depth’ => 1, ‘fallback_cb’=>’nav_fallback_simple’) ); ?

      ?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘Sidebar’) ) : ?
      ?php endif; ?
      /div
      /div

  4. rabolo

    Bonjour,
    Tout d’abord sympa l’explication et toujours aussi efficace, un grand merci au chef
    Mais voilà J’ai un petit soucis que je ne comprend pas, J’ai suivi l’instruction et je vois afficher le menu sauf que le contenu de ce menu (haut en question) affiche les pages.
    malgré que je pointe un menu spécifique ça marche pas.
    merci d’avance de votre avis

    1. rabolo

      Finalement j’ai réussi à afficher seulement j’ai accueil par défaut comment je fait pour l’enlever?
      Aussi, les catégorie s’affiche l’un sur l’autre comment faire pour qu’il soit l’un à côté de l’autre ?

      merci

  5. rog

    bonjour,

    jai voulu mettre en pratique votre tuto,

    jai vérifié que le code n’exister pas déjà dans mon fichier
    je l’ai copié collé
    seulement voila problème , un message d’erreur est apparut :

    Parse error: syntax error, unexpected ‘<' in /homez.68/stephanend/www/wp-content/themes/minimatica/functions.php on line 733

    et je ne peux plus rien modifié, je ne peux plus accéder à mon wordpress.

    même après déconnexion, lorsque j'essaye de me reconnecter, ce message s'affiche.

    pouvez vous m'aider si il vous plaît.
    je suis perdue et désespérée
    merci

    1. Aurélien Denis auteur de l’article

      Le message d’erreur indique que la ligne 733 pose soucis. A priori, la balise ouvrante est en double ou n’aurait pas du être insérée.

      Pour modifier le fichier functions.php, il faut passer par le client FTP (FileZilla pour ne citer que lui) et modifier le fichier présent dans /wp-content/themes/NOM_DU_THEME/functions.php

      Il n’y a aucune raison de paniquer : rien de grave !

      A l’avenir j’indiquerai comment être plus prudent.

  6. Nicolas

    voila je voudrai afficher Le contenu de l’attribut titre du MENU dans les catégories de wordpress. J’ai déja touvé comment afficher la description des catégorie mais il me faut maintenant mettre « l’attribut titre »

    Comment faire ?

    Quelle est la fonction qui permettrai de faire ça ?

  7. noaneo

    Juste une suggestion,si quelqu’un tombe sur ce tutoriel pendant la création de son thème,peut être aura-t-il besoin de la partie CSS pour faire son menu.

      1. noaneo

        c’est ce que j ‘ai fait mais est ce que tout le monde va penser à faire ça?
        Bien sûr que les gens voudront personnaliser leur menu mais donner une base, un css générique serait bien et en plus cela indique que le php ne suffit pas, il ne faut pas oublier de mettre du css.

  8. noaneo

    le code est vraiment correct ?
    array( ‘top-navigation’ => __( ‘Top’ )
    pour functions.php
    ‘Top’ ) ); ?>
    pour header
    selon Guy sur wordpress-fr.net, dnas functions.php cela devrait être
    array( ‘top’ => __( ‘Top’ )
    car sinon on donne 2 noms différents au menu.
    ‘identifiant du menu ‘top-navigation’ + le texte qui sera affiché dans Apparence/menus de l’administration de WordPress (c’est pour cela qu’il est « traduisible ») mais ce dernier n’est pas utilisé pour afficher le menu dans le thème.

  9. Justine

    Bonjour,
    Gros problème ! J’ai insérer le code de l’étape 1 :
    __( ‘Top’ ), ‘footer-menu’ => __( ‘Footer’ ))
    );
    }
    ?>

    dans mon ficher fonctions.php et maintenant plus rien de fonctionne. Ni l’admin, si mon blog. J’ai ce message d’erreur :
    Parse error: syntax error, unexpected ‘<' in /homez.514/desclics/www/wp-content/themes/eliteminimal/functions.php on line 539

    Merci d'avance pour votre aide

  10. Justine

    Je vois que tu utilises le plugin « Post From Site » pour tes commentaires. Saurais-tu m’aider à ce sujet ? Je l’utilise également sur mon site mais lorsque j’appuie sur ‘poster’, comme toi par exemple sur ton bouton « Laisser un commentaire », j’ai un message d’erreur : {« image »: »single », »error »: » », »success »: »Votre recette a bien été ajoutée. Patientez quelques secondes pour revenir sur la page d’accueil. », »post »:280}.

    Pourrais-tu m’aider ?

  11. M-Springer

    Je l’ai testé sur deux sites différents mais qui utilisent le même template. Sur l’un, tout fonctionne, mais sur l’autre, ça ne fonctionne pas! Est-ce que ça peut dépendre de mon hébergeur?

  12. M-Springer

    J’utilise le template Stripey. Peux-être que ça peut vous donner un indice ou peut-être que c’est facile pour vous de vérifier avec ce template. Merci pour votre support!

  13. M-Springer

    J’ai trouvé la solution à mon problème. J’ai installé le plugin Excludes Pages et j’ai coché les pages que je ne voulais pas voir apparaître dans mon menu.

  14. s2prod

    Tuto simple et explicite. Pour ma part j’ai rencontré aucune difficulté. Et l’accent du formateur pour le parisien que je suis, m’envoie une dose de soleil qui me met de bonne humeur !!

  15. soulfree

    hello, depuis WordPress 3.6 les captures ne correspondent plus, le menu personnalisé est différent, aura-t-on à de nouvelles captures d’écran ou un nouvel article?
    merci

  16. Florent

    Bonjour,
    J’ai effectué votre démarche mais sans succès.
    En effet, j’ai toujours mon Titre Les équipes avec les sous menus qui n’apparaissent pas, une idée?
    Site : beauzelle-handball.fr
    Merci de votre aide.

  17. seba

    bonjour,

    je suis en train de réaliser un site de blog que l’on m’a commandé.
    Je me suis naturellement penché sur wordpress. On me demande la creation d’un menu sous formes d’icones metro ui windows 8. la gestion des menus sous wordpress n’est pas comme celle d’un site naturel. j’ai pas l’habitude de wordpress. j’ai essayé de creer celà avec des div mais il ne se comporte pas comme je le souhaite et wordpress ne se comporte pas comme je veux car pour lui ce n’est pas naturel.
    J’ai essayer d’inclure avec les classes css dans wordpress et inclure les icones dans ce mode la et en travaillant sur mon style css. ca ne fait pas non plus le boulot.

    Avez vous déjà créer un menu ou connaissez vous un tutoriel sur la facon de creer un menu comme windows 8?

    merci de votre aide.

  18. Thierry

    Bonjour Aurélien et merci,

    Pour le fichier functions.php j’ai ajusté la ligne de commande
    register_nav_menus( array( ‘Top’ => ‘Navigation principale’, ) );
    ainsi
    register_nav_menu( array( ‘Top’ => ‘Navigation principale’, ) );

    Autrement dit il y avait un s en trop.
    Ceci avec une version WordPress 3.7.1 et pour le thème ZeeCorporate 1.5

    Thierry

  19. Prescilia

    Bonjour,

    J’utilise le thème Enfold, j’aurais voulu savoir s’il était possible d’ajouter un emplacement de menu supplémentaire aux emplacements (déjà crées dans le thème de base) main menu, secondary menu et footer menu.
    En gros j’aimerais pouvoir séparer clairement le menu du bas et le socket, qui sont trop proches à mon goût!

  20. Langlois

    Félicitations avec la version Version 3.8.1 de WordPress installation 100% réussie en 3 minutes chrono en main !
    Question :
    – j’ai modifié le functions.php du thème parent alors que j’ai un thème enfant. En ce cas comment doit-on faire pour ne pas perdre la modification à la prochaine MAJ de WordPress ?

    Merci d’avance de votre réponse

  21. whoaloic

    Bonjour, Comment faire pour supprimer des emplacements de menu déjà présents dans le thème parent ?
    J’ai essayé :
    Mais le menu « primary » est toujours présent dans l’admin.
    Toute aide serait vivement appréciée.

  22. stig

    Bonjour!
    J’aimerai insérer un menu dans une page directement. j’ai testé les fonctions du tuto mais ca s’integre que dans des fichiers php?

  23. Sami

    Bonsoir !
    Merci pour le tuto, il m’a beaucoup aidé pour créer un menu spécifique pour la page des posts en utilisant  » is_archive « .
    J’ai aussi ajouté une classe  » active  » pour ce menu.
    C’est compatible jusqu’à WordPress 3.9.2
    Voici les scripts :

    – « is archive » :

    ‘secondary’, /* identifiant du menu pour WP */
    ‘container’ => ‘ul’, ‘container_class’ => ‘css-menu’, ‘menu_class’=>’css-menu’, ‘menu_id’ => ‘css-menu’,
    )
    );
    ?>

    – Classe CSS  » active » :

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

  24. MARIE

    Bonjour,
    Je suis fan de vos articles merci beaucoup ça m’a beaucoup aidé.
    Voilà je suis novice et je travail sur le démo de thème aszok.
    J’ai supprimer et remplacé les menus puis rajouter des sous menus.
    Mon problème c’est que je souhaite intégrer les produits dans les » SOUS MENUS ».
    Exemple : menu principal » ÉLÉGANCE » sous menus pages » ROBES, TOPS, JUPES… ». (
    JE n’arrive pas à intégrer les produits dans les sous menus. Il s’affiche ailleurs mais pas dans les sous menus.

    Pourriez-vous m’aider svp comment intégrer un produit robe dans le « sous menu » ROBES ou faire un liendes produits sous l’onglet  » sous menu  » ROBRS ». Je ne sais plus quoi faire
    Marie
    MERCI DE VOTRE AIDE

Laisser un commentaire