Nu we weten hoe we een basis WordPress Thema vanaf nul kunnen maken, laten we eens kijken hoe we een aangepast navigatiemenu aan ons thema kunnen maken. Dit menu moet vanuit het WordPress Dashboard bestuurd kunnen worden. Met andere woorden, u moet in staat zijn om naar het Dashboard te gaan en links toe te voegen of te verwijderen naar alle pagina’s, berichten of categorieën die u wilt. Aan het eind van deze handleiding, is dat precies wat we zullen hebben. Laten we eens kijken hoe we dit doel kunnen bereiken.
Open header.php
Open het header.php bestand van het thema waar we aan gewerkt hebben. Ons doel is om een menu toe te voegen dat boven de hoofdinhoud van de site staat, maar onder de sitenaam en de tagline. Om dit te doen, kunnen we de volgende code hieronder toevoegen:
<!DOCTYPE html><html <?php language_attributes(); ?>><head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <title><?php bloginfo( 'name' ); ?></title><?php wp_head() ?></head><body <?php body_class(); ?>><div class="container"> <header class="site-header"> <h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1> <h4><?php bloginfo( 'description' ); ?></h4> <nav class="navigation-menu"><?php wp_nav_menu() ?> </nav> </header>Merk op dat we gebruik maken van een speciale functie die ons door WordPress wordt aangereikt, namelijk wp_nav_menu(). Deze functie neemt al het benenwerk voor je uit handen bij het bouwen van een aangepast menu. Je hoeft niet zelf handmatig alle html uit te typen, dus dit is best handig. Nu hebben we nog niet veel pagina’s, maar als we onze testsite bezoeken, geeft de functie al een link naar de voorbeeldpagina die op onze installatie staat.
Aanduidingen doorgeven aan de wp_nav_menu() functie
Net als de meeste functies in WordPress, kunt u optionele argumenten doorgeven aan de wp_nav_menu() functie. Hier zullen we een array opzetten en slechts één optie configureren. We gebruiken een array voor het geval we in de toekomst meerdere opties willen doorgeven. Hier is hoe we dat stukje code zouden kunnen toevoegen.
<!DOCTYPE html><html <?php language_attributes(); ?>><head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <title><?php bloginfo( 'name' ); ?></title><?php wp_head() ?></head><body <?php body_class(); ?>><div class="container"> <header class="site-header"> <h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1> <h4><?php bloginfo( 'description' ); ?></h4> <nav class="navigation-menu"><?php $args = ; ?><?php wp_nav_menu( $args ) ?> </nav> </header>Deze optie geeft ons een manier om bepaalde menu’s in ons thema een naam te geven. Misschien willen we meer dan een menu hebben, en dit is de methode waarmee u onderscheid kunt maken tussen meerdere menu’s.
Registreer Menu Locatie in functions.php
Om gebruik te kunnen maken van het menu dat we zojuist hebben gemaakt in ons header.php bestand, vanuit het WordPress admin dashboard, moeten we de menu locatie registreren in het functions.php bestand van het thema. Dus hoe kunnen we ons nieuwe menu registreren bij WordPress? We kunnen dit doen met de register_nav_menus() functie die in WordPress is ingebouwd. Laten we ons menu als volgt registreren.
<?phpfunction custom_theme_assets() {wp_enqueue_style( 'style', get_stylesheet_uri() );}add_action( 'wp_enqueue_scripts', 'custom_theme_assets' );register_nav_menus( );Configureer ons aangepaste menu in WordPress Dashboard
Ons nieuwe menu zou nu geregistreerd moeten zijn bij WordPress core. WordPress is nu op de hoogte van ons menu, en de locatie ervan in het thema. We kunnen nu naar het dashboard gaan, een nieuw menu maken, en de locatie ervan beheren. Meer specifiek willen we het laten verschijnen op de plaats waar we de wp_nav_menu() functie hebben gebruikt. We gaan naar Uiterlijk->Menu’s en klikken vervolgens op ‘maak een nieuw menu’.
We kunnen dit menu elke naam geven die we maar willen. Om het makkelijk te houden kiezen we voor Hoofdmenu en klikken op ‘Maak menu’.
In de volgende stap gaan we linken naar al onze categorieën. Dus we kunnen kiezen voor Categorieën, Alles selecteren, de Weergave locatie aanpassen naar ‘Hoofdmenu’, en dan klikken op ‘Menu opslaan’. Laten we het uitproberen.
Een bezoek aan onze site laat ons zien dat we nu een link krijgen naar elke categorie in het nieuwe menu dat we hebben gemaakt. Het is op dit moment nog maar een ongeordende lijst, en het is nog niet de mooiste – maar het werkt wel! 
Wat is het voordeel van het registreren van uw aangepaste menu?
Ik weet het, ik weet het. U denkt dat het geen zin heeft om al deze moeite te doen om een paar hyperlinks naar een paar categorieën op uw site weer te geven. In sommige opzichten, heb je gelijk. Waarom niet gewoon handmatig bouwen sommige van deze dingen zelf. Natuurlijk kan dat, maar als we ons menu opbouwen zoals we hier hebben gedaan, hebben we nu de kracht van het WordPress Dashboard om de code te controleren die we in ons thema hebben opgenomen. We kunnen nu gemakkelijk de volgorde van links en andere dingen verslepen, rechtstreeks vanuit het Dashboard. Laten we de volgorde veranderen van WordPress, PHP, JavaScript naar JavaScript, WordPress, en dan PHP. Heel gemakkelijk! 
Nu wordt bij een bezoek aan de site de volgorde van de links in het menu bijgewerkt. Bij deze aanpak hoeft niet te worden geknoeid met de onderliggende code.
Stijl dat aangepaste menu
Die ongeordende lijst is gewoon niet genoeg! We moeten de dingen een beetje meer gelikt maken. Laten we wat tijd besteden aan het toepassen van wat aangepaste CSS om dat menu een beetje op te ruimen. Om te beginnen willen we de verticaal georiënteerde ongeordende lijst veranderen in een horizontaal georiënteerd menu. We willen ook de opsommingstekens van elk lijst element verwijderen, wat padding en marge toevoegen, en de onderlijning voor links verwijderen. Hier is een poging om dat effect te bereiken in ons style.css bestand.
/* Nav Menu */.navigation-menu ul { margin: 0; padding: 0;}.navigation-menu ul:before, .navigation-menu ul:after { content: ""; display: table;}.navigation-menu ul:after { clear: both;}.navigation-menu ul { *zoom: 1}.navigation-menu ul li { list-style: none; float: left; margin-right: 3px;}.navigation-menu ul li a:link,.navigation-menu ul li a:visited { display: block; padding: 12px 17px; border: 2px solid #ecf0f1; border-bottom: none; text-decoration: none;}Er gebeurt nogal wat in de CSS die hierboven staat. Laten we er eens doorheen gaan. In de eerste .navigation-menu ul selector, verwijderen we alle padding en marge van de ongeordende lijst. Vervolgens zorgen we ervoor dat de ongeordende lijst de floats van de kinderen in de lijst opruimt. In de .navigation-menu ul li selector verwijderen we de opsommingstekens uit de lijst, laten we de lijstitems naar links zweven en voegen we rechts een beetje marge toe. Aan het eind richten we ons op de links. Eerst veranderen we ze in blok-niveau elementen met een padding van 12px verticaal en 17px horizontaal. We voegen een mooi rand effect toe en verwijderen de onderlijning op de links. Laten we het nu eens bekijken in de browser.
Mooi! Dat menu ziet er een stuk beter uit dan in het begin.
Hoe voeg je een aangepaste kleur toe op de overgang naar het menu
De basisstyling zit erop. Het kan leuk zijn om een beetje een hover effect te hebben als men de muis over elke link beweegt. Dit is heel eenvoudig te configureren met de volgende snippet:
.navigation-menu ul li a:hover { background-color: #ebf5fb;}
Dat ziet er goed uit!
Hoe de actieve status van een menu item aan te passen
Een ander ding dat we misschien willen toevoegen is de mogelijkheid om de kleur van een actieve link aan te passen. Dit is anders dan het eenvoudige hover-effect. In dit geval, wanneer we een bepaalde link uit het menu bezoeken, willen we dat WordPress zich ervan bewust is dat dit nu de actieve pagina is die wordt bekeken en dat de visuele weergave wordt bijgewerkt om de actieve link weer te geven. Om dit te doen kunnen we gebruik maken van een speciale klasse die in WordPress is ingebouwd om juist dit aan te pakken. Dit is de current-menu-item klasse. Hier is hoe we het kunnen integreren in ons aangepaste menu.
.navigation-menu ul li.current-menu-item a:link,.navigation-menu ul li.current-menu-item a:visited { background-color: #4285f4; color: #ffffff;}Als we nu onze site bezoeken en het bezoeken van de verschillende links in het aangepaste menu uitproberen, kunnen we zien dat het er heel mooi uitziet. We hebben nu een bepaald uiterlijk voor de hover status, en een ander uiterlijk voor de actieve status van de links in ons menu. Dit is een geweldige manier om ervoor te zorgen dat bezoekers van uw site weten waar ze zich op dat moment bevinden door het actieve menu als het ware verlicht te houden.
Hoe maak je een aangepast menu in WordPress? Samenvatting
In deze zelfstudie hebben we goed bekeken hoe we een aangepast menu aan ons aangepaste thema in WordPress kunnen toevoegen. We hebben gebruik gemaakt van een aantal WordPress functies om ons hierbij te helpen. De eerste waar we gebruik van hebben gemaakt is wp_nav_menu(). Deze functie kan automatisch een ongeordende lijst en kinderen elementen bouwen om de structuur te creëren voor een mooi menu waar je styling op kunt toepassen. Er zijn veel argumenten die je aan deze functie kunt doorgeven, maar we hebben ons hier alleen op de basis gericht. De volgende functie waar we gebruik van hebben gemaakt is de register_nav_menus() functie. Deze functie stelt ons in staat om WordPress te vertellen over ons nieuwe menu en om er in het WordPress Dashboard op in te haken. Zodra ons nieuwe menu was geregistreerd bij WordPress, ontdekten we dat het eenvoudig was om alles wat we wilden aan dat menu toe te voegen of te verwijderen, rechtstreeks vanuit het WordPress dashboard en zonder enige noodzaak om enige code in onze thema bestanden aan te passen. Tot slot hebben we de tijd genomen om het uiterlijk van ons menu te verbeteren door wat aangepaste CSS styling te gebruiken.