WordPress menu system has a built-in feature where you can add descriptions with menu items. However, this feature is hidden by default. Even when enabled, displaying them is not supported without adding some code. Most themes are not designed with menu-item descriptions in mind. In this article we will show you how to enable menu descriptions in WordPress and how to add menu descriptions in your WordPress themes.
Note: This tutorial requires you to have fair understanding of HTML, CSS, and WordPress theme development.
When and Why You Would Want to Add Menu Descriptions?
Some users think think that adding menu description will help with the SEO. However, we think that the main reason why you would want to use them is to offer a better user experience on your site.
Descriptions can be used to tell visitors what they will find if they clicked on a menu item. An intriguing description will attract more users to click on menus.
Step 1: Turn on Menu Descriptions
Go to Appearance » Menus. Click on Screen Options button at top right corner of the page. Check the Descriptions box.
This will enable descriptions field in your menu items. Like this:
Now you can add menu descriptions to items in your WordPress menu. However, these descriptions will not yet appear in your themes. To display menu descriptions we will have to add some code.
Step 2: Add the walker class:
Walker class extends the existing class in WordPress. It basically just adds a line of code to display menu item descriptions. Add this code in your theme’s functions.php file.
class Menu_With_Description extends Walker_Nav_Menu {
function start_el(&$output, $item, $depth, $args) {
global $wp_query;
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$class_names = $value = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
$class_names = ' class="' . esc_attr( $class_names ) . '"';
$output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';
$attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
$attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
$attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';
$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= '<br /><span class="sub">' . $item->description . '</span>';
$item_output .= '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
Step 3. Enable Walker in wp_nav_menu
Les thèmes WordPress utilisent la fonction wp_nav_menu() pour afficher les menus. Nous avons également publié un tutoriel pour les débutants sur la façon d'ajouter des menus de navigation personnalisés dans les thèmes WordPress. La plupart des thèmes WordPress ajoutent les menus dans le modèle header.php. Cependant, il est possible que votre thème ait utilisé un autre fichier de modèle pour afficher les menus.
Ce que nous devons faire maintenant, c'est trouver la fonction wp_nav_menu() dans votre thème (très probablement dans header.php) et la modifier comme ceci.
<?php $walker = new Menu_With_Description; ?> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'walker' => $walker ) ); ?>
Dans la première ligne, nous définissons $walker pour utiliser la classe walker que nous avons définie précédemment dans functions.php. Dans la deuxième ligne de code, le seul argument supplémentaire que nous devons ajouter à nos arguments wp_nav_menu existants est 'walker' => $walker.
Étape 4. Styliser les descriptions
La classe walker que nous avons ajoutée précédemment affiche les descriptions des éléments à cette ligne de code :
$item_output .= '<br /><span class="sub">' . $item->description . '</span>';
Le code ci-dessus ajoute un saut de ligne à l'élément de menu en ajoutant une balise
<li id="menu-item-99" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.example.com/about/">About<br /><span class="sub">Who are we?</span></a></li>
Pour modifier l'apparence de vos descriptions sur votre site, vous pouvez ajouter du CSS dans la feuille de style de votre thème. Nous avons testé cela sur Twenty Twelve et avons utilisé ce CSS.
.menu-item {
border-left: 1px solid #ccc;
}
span.sub {
font-style:italic;
font-size:small;
}
Nous espérons que cet article vous sera utile et vous aidera à créer des menus attrayants avec des descriptions de menu dans votre thème. Des questions ? Laissez-les dans les commentaires ci-dessous.
Ressources supplémentaires
Comment styliser les menus de navigation WordPress
Comment ajouter des éléments personnalisés à des menus WordPress spécifiques
Menus avec classe de description de Bill Erickson
Matthew Blaxton
Dans PHP 8.0 et supérieur, cela provoquera une erreur critique.
Vous devez trouver cette ligne :
function start_el( $output, $item, $depth, $args ) {
Modifier cette ligne comme suit devrait faire disparaître l'erreur :
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
Support WPBeginner
Merci d'avoir partagé cela pour ceux qui utilisent PHP 8.
Admin
Norman
Bonjour,
Comment rendre la description cliquable aussi ?
Support WPBeginner
We cover that in step 4
Admin
kayvan A.Gilani
Pour ajouter des descriptions de menu dans mes thèmes WordPress, j'ai suivi les étapes 1 et 2 de ce blog, mais je n'ai pas pu suivre l'étape 3 pour avancer et effectuer le changement total.
Support WPBeginner
Si vous ne trouvez pas la fonction dans votre thème, nous vous recommandons de contacter le support de votre thème spécifique et ils devraient être en mesure de vous aider.
Admin
yiannis
Bonjour,
Comment désactiver la description de la catégorie de produits dans le menu max mega ?
Je suis déjà allé dans Mega Menu > Paramètres généraux et j'ai défini les descriptions des éléments de menu sur désactivé, mais le problème persiste.
Support WPBeginner
Vous devriez contacter le support du plugin et ils seraient en mesure de vous aider avec le paramètre qui ne fonctionne pas correctement.
Admin
Sergio
Merci beaucoup !
Support WPBeginner
You’re welcome
Admin
Lanka
Merci beaucoup, vous m'avez sauvé
JKLYN
Merci. M'a fait gagner du temps.
dan
Cela peut-il fonctionner avec le WP_Bootstrap_Navwalker ?
car j'ai essayé et cela casse mon site....
kalpana
Merci beaucoup... c'était très utile pour moi... vous m'avez sauvé la journée
Steven
comment désactiver la description en mise en page mobile ?
Anzani Zahrani
Bonjour.. S'il vous plaît, aidez-moi..
Comment ajouter le titre de la catégorie, sans utiliser la description du titre de la catégorie ?
Ido Schacham
Très utile, merci !
Rahman
Super astuce mais dans la description du menu, il ne prend pas en charge les balises html. Quelqu'un sait-il quelque chose à ce sujet ?
Merci
Iryna
Salut les gars,
Des idées sur la façon d'autoriser les balises html dans la description ?
remove_filter(‘nav_menu_description’, ‘strip_tags’);
celui-ci ne fonctionne pas pour moi.
Damien Carbery
@Iryna : Pouvez-vous poster votre code quelque part, par exemple sur pastebin.com.
L'endroit où vous appelez remove_filter() déterminera s'il fonctionne – il doit être appelé après l'appel de add_filter().
L'appeler juste avant l'appel de wp_nav_menu() pourrait fonctionner.
Max
Y a-t-il un moyen pour que la description ne soit pas hyperliée ?
Ashok
merci… ça a fonctionné. mais dans la description du menu, il ne prend pas en charge les balises html.
igorasas
Est-ce que cela pourrait déjà être là, prêt à être branché ? Comment ce hack fonctionnera-t-il avec le thème "Twenty TwelveVersion : 1.5"
? Et tout comme avec le plugin wpml ?
Guy
Merci pour l'astuce
Phong
Merci, c'était vraiment utile de simplement copier-coller ceci et d'avoir une image rapide.
Chad
Salut mec, j'ai ajouté la classe walker à functions.php, mais je ne trouve pas wp_nav_menu dans le thème genesis. Qu'est-ce qui me manque ? Je n'ai aucune idée de ce qu'il faut faire ensuite ?!?
Ksenia
Vous expliquez très bien – en détail et clairement. 1 minute et les descriptions des éléments de menu sont ok. Merci !
Mary Anne
Merci beaucoup pour ce tutoriel. Il m'a été recommandé et il a parfaitement fonctionné pour apporter les modifications que je voulais. Cependant, en apportant ces modifications, j'ai perdu mes menus déroulants de sous-éléments. Avez-vous une idée de ce qui a affecté cela dans le changement de code ?
Merci pour votre temps et votre tutoriel
Support WPBeginner
Cela semble être un problème de CSS, nous sommes désolés de ne pas avoir pu être plus précis. Essayez d'utiliser les outils de développement de Google Chrome pour le déboguer.
Admin
Paul Renault
J'ai implémenté les descriptions de menu et cela a très bien fonctionné. Maintenant, mon client demande un saut de ligne dans l'une des descriptions. J'ai essayé de mettre un retour chariot et d'insérer une balise
dans le champ de description via l'administration. Cela n'apparaît pas sur le front-end. WP supprime ces modifications. Y a-t-il un moyen d'y remédier ?
Support WPBeginner
Si votre client souhaite simplement de l'espacement, vous pouvez utiliser CSS pour cela.
Admin
Paul Renault
Le client souhaite un saut de ligne. Existe-t-il un moyen d'insérer une balise dans la description ? Si j'en mets une maintenant, elle est supprimée.
Barry
Super tutoriel les gars, je veux juste savoir comment implémenter cela sur un menu personnalisé affiché à l'aide du widget Menu personnalisé ?
Oryan Consulting
Merci ! Je travaille sur WordPress depuis des années et je n'en avais jamais entendu parler. Je cherchais à supprimer les descriptions car elles étaient très redondantes sur le site sur lequel je travaille. J'ai cherché partout d'où elles venaient.
Oh joie !
sambassador
ça marche !
mais pour php 5.4 vous devrez faire correspondre les arguments wp walker pour la fonction start_el :
function start_el( &$output, $object, $depth = 0, $args = array(), $current_object_id = 0 )
et remplacer $item par $object.
Steve Covello
Tu déchires !! Ça a parfaitement fonctionné.
Kevin Gilbert
Parfait. C'était exactement ce dont j'avais besoin pour finir un site. J'ai eu quelques problèmes avec le CSS, mais j'ai finalement trouvé et ça a fonctionné. Merci pour ces excellents articles.
Jon
Excellente astuce. A parfaitement fonctionné !
Jedediah White
Cela a parfaitement fonctionné pour moi. La fonction de classe est parfaite aussi. Merci beaucoup !
Pankaj
J'avais besoin de créer la même chose et j'étais complètement perdu.
J'avais prévu de faire des choses stupides pour y arriver.
Dieu merci, j'ai trouvé ce post et j'ai économisé du temps et du stress !
J'adore ce site, j'ai appris tellement de choses.
Merci beaucoup de montrer les choses les plus simples ici.
Pankaj
La balise span apparaît aussi dans les sous-menus.
ça ne s'affiche pas là, mais ça prend tellement de place que ça rend mal.
y a-t-il une solution de contournement pour ça ??
DiTesco
C'est vraiment un excellent tutoriel et je me demandais si cela fonctionnerait sur Thesis 1.8.5 ? Sinon, ce serait formidable si vous pouviez en fournir un. Je vous aiderai certainement à le diffuser. Pouce levé !
svet
J'ai suivi votre tutoriel et ajouté une description à mon menu. Merci ! Cependant, lorsque je suis en mode mobile, le menu se convertit en menu déroulant et le titre du menu ainsi que la description sont connectés. Par exemple, si mon élément de menu est « à propos » et la description « en savoir plus sur moi », la version mobile affiche « à propos en savoir plus sur moi ». Y a-t-il un moyen de corriger cela ?
David
J'ai eu le même problème. Voici ce que j'ai fait.
J'ai changé ceci :
$description = ! empty( $item->description ) ? ‘<span>’.esc_attr( $item->description ).'</span>’ : ”;
En ceci :
$description = ! empty( $item->description ) ? ‘<br /><span>’.esc_attr( $item->description ).'</span>’ : ”;
Je ne suis pas sûr que ce soit la meilleure solution, mais ça a fonctionné pour moi.
Garrett Hyder
Merci les gars, j'ai rencontré ce que SVET et DAVID ont fait avec le menu mobile.
Le code semble avoir changé, mon changement consistait simplement à ajouter un span avec le séparateur de tiret et dans ma requête de bureau, je l'ai simplement supprimé car il n'était pas nécessaire là-bas.
$item_output .= ‘ – ‘;
Dans ma requête "Desktop Only" (Bureau uniquement), définissez le span sur display none ;
@media only screen and (min-width: 740px) {
header #submenu li span.dash { display:none; }
J'espère que cela aide, cela a bien résolu mon problème.
Nicola
Excellent article – très clair, exactement ce dont j'avais besoin et a parfaitement fonctionné. Merci !
Samedi Amba
Merci pour le super tutoriel. J'ai bien fait les étapes principales, comme vous pouvez le voir sur
http://ueab.ac.ke/demo/index
J'étais bloqué avec le style - comment puis-je réduire l'espace entre le libellé du menu principal et la description ? Votre aide est grandement appréciée.
Personnel éditorial
Cela a à voir avec la hauteur de ligne de votre classe .menu a de votre thème. Si vous la réduisez, l'espacement se réduira de lui-même.
Admin
Chris Rouse
Excellent article. J'ai essayé de me pencher sur cela auparavant, mais les instructions précédentes que j'avais trouvées n'étaient pas aussi faciles à suivre. J'ai pu insérer le code functions.php, comprendre comment changer la classe walker dans mon fichier d'en-tête (différent pour le thème que j'utilise, mais simple), et tout mettre en place en environ 15 minutes du début à la fin.
Un élément que vous pourriez vouloir ajouter est la façon d'inclure la bordure droite sur le dernier élément du menu en utilisant la propriété :last-child.
.menu-item:last-child { border-right: 1px solid #ccc; }
Damien Carbery
Au lieu d'étendre Walker_Nav_Menu, il serait agréable (et plus facile) si un filtre était fourni, par exemple : Si le code principal avait : $item_output .= apply_filters( ‘walker_nav_menu_description’, $item->description);
Alors la fonction de filtre personnalisée n'aurait que : return "" . $description . "";
Cathy Earle
Excellente information… je vais commencer à l'ajouter à mes sites. Merci !