Voeg een beschrijving toe aan elk WordPress menu item

Ik heb onlangs ontdekt dat er in WordPress een optie is om omschrijvingen aan menu-items toe te voegen. Dit is een toffe optie, maar helaas worden deze beschrijvingen standaard niet weergegeven op de front-end van je website. Ik leg hieronder hoe je deze optie kan toevoegen aan jouw WordPress website.

Menu item omschrijving WordPress

Als eerste stap ga je in de WordPress-back-end naar Weergave > Menu’s. Klik vervolgens in de rechterbovenhoek op de knop ‘Scherminstellingen’. Selecteer omschrijving zoals hieronder weergegeven.

Navigatie Scherminstellingen WordPress

Bij het openen van een menu-item is nu een invoerveld voor de omschrijving zichtbaar. Je hoeft nu alleen een beschrijving toe te voegen en het menu op te slaan.

Voeg ten slotte het volgende codefragment toe aan uw functions.php

<?php
//* Do NOT include the opening php tag shown above. Copy the code shown below.

//* Add description to menu items
add_filter( 'walker_nav_menu_start_el', 'wpstudio_add_description', 10, 2 );
function wpstudio_add_description( $item_output, $item ) {

    $description = $item->post_content;
    if (' ' !== $description ) {
        return preg_replace( '/(<a.*)</', '$1' . '<span class="menu-description">' . $description . '</span><', $item_output) ;
    }
    else {
        return $item_output;
    };

}

That’s it. Het enig wat je nu nog moet doen is het menu verder vormgeven met CSS

Frank Schrijvers

Over Frank Schrijvers

Hey! Ik ben Frank, een creatieve duizendpoot en fulltime WordPress-expert achter WPX. Met passie voor maatwerk ontwikkel ik unieke websites en webshops, bied ik WordPress-onderhoud en zorg ik voor razendsnelle hosting.

Meer weten? Check mijn verhaal!

Hulp nodig met je WordPress of WooCommerce website?

Met mijn ruime ervaring sta ik klaar om je verder te helpen