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

me

Over Frank Schrijvers

Hey! Ik ben Frank Schrijvers, WordPress developer, webdesigner, vader en indoor climber. Ik ben het hart en de ziel van WPX en help je graag verder met je WordPress of WooCommerce website.

Heb je een leuk project en wil je met mij samenwerken?

Dat kan! Neem gerust contact op via mail of telefoon.