Automatisch toevoegen submenu indicatie WordPress menu

Geplaatst op: 19 februari 2014 | Auteur: Niels Pilon | Categorie: WordPress

Laatst was ik bezig om een ontwerp om te zetten naar een WordPress theme. Het ontwerp bevatte een menu wat een submenu bevatte. Om het voor je gebruikers direct duidelijk te maken dat het menu een submenu bevat had ik dit visueel opgelost door het toevoegen van een icon. Zo hoef je niet eerst met je muis over het menu item heen te gaan om te zien dat er een submenu aanwezig is.

Menu met submenu
Het betreffende menu met indicator voor het submenu

Dit is eenvoudig op te lossen door het toevoegen van een class en een pseudo selector. Maar hoe doe je dat in WordPress waar het menu dynamisch gegenereerd wordt? Op een of andere manier zal je WordPress duidelijk moeten maken dat er een specifieke class moet worden toegevoegd als je menu children (of submenus) bevat.

Je lost dit op door de volgende code te plaatsen in het functions.php bestand van je theme:

//* Add a custom class for menu items having children
//* Source: https://gist.github.com/devinsays/5210667
 
function add_menu_parent_class( $items ) {
 
    $parents = array();
    foreach ( $items as $item ) {
        if ( $item->menu_item_parent && $item->menu_item_parent > 0 ) {
            $parents[] = $item->menu_item_parent;
        }
    }
 
    foreach ( $items as $item ) {
        if ( in_array( $item->ID, $parents ) ) {
            $item->classes[] = 'has-children';
        }
    }
 
    return $items;
}
add_filter( 'wp_nav_menu_objects', 'add_menu_parent_class' );

Toevoegen van het icon met CSS

Nu we met bovenstaande code de class has-children hebben toegevoegd kunnen we het icon (of wat voor content dan ook) eenvoudig met CSS toevoegen. In dit geval doe ik dat met behulp van de icons van FontAwesome.

Plaats deze code in je CSS-file:

.menu-item.has-children > a:after{
	content: "f078";
	font-family: FontAwesome;
	margin-left: 5px;
	color: #943d8a;
}

Een overzicht van alle juiste FontAwesome unicodes vind je in de cheatsheet.

Met dank aan Devin Price voor het beschikbaar stellen van de code snippet.

Over Niels Pilon

Waanzinnige WordPress websites ontwikkelen. Dat doet Niels het liefst de hele dag. Jarenlange ervaring, een uitmuntend gevoel voor design en een enorme interesse in typografie zorgen voor een prachtig eindresultaat. Op het gebied van webdesign wordt hij graag uitgedaagd om verwachtingen te overtreffen.

Niels Pilon

Reageer

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *