IN DEZE HANDLEIDING:
- 1 WordPress Menu maken in simpele stappen
- 2 Maak indeling van je menu op papier
- 3 Tips voor het maken van je WordPress menu
- 4 Zoekmachine optimalisatie SEO cursus Google training
- 5 Web usability User experience & Conversie training
- 6 WordPress Bootcamp all-in one spoedcursus
- 7 Menu maken in WordPress
- 8 Apart mobiel menu maken in WordPress
- 9 Gevorderde handelingen bij WordPress menu’s
- 10 Tekstkleur, kleur, lettertype, lettergrootte menu veranderen
WordPress Menu maken in simpele stappen
In WordPress kun je zelf menu’s maken. Je kunt je menu vullen met links naar pagina’s, berichten, categorieën en eventueel aangepaste links.
Lees in deze handleiding hoe je WordPress menu kan maken en aanpassen of wijzigen.
10-20 minuten
Maak op papier, een A4-tje, een schetsje van je website met onderverdeling. Je kan ook het onderstaande schema gebruiken dat door ons is ontwikkeld. Het is handig om je menu als uitgangspunt te nemen voor de structuur van je website. Gebruik het horizontale grijze balkje. De andere vakjes hoef je niet in te vullen. ‘Home’ en ‘Contact’ zijn al ingevuld. Je hoeft dit natuurlijk niet te gebruiken, maar het is een goed vertrekpunt.
Dropdown menu maken in WordPress
Als je een uitgebreide website hebt, kan je menu meerdere niveaus hebben. Dan kun je dus ook gebruikmaken van een zogenaamde ‘drop down’ menu. Je hebt dan een menu-item met daaronder een sub-menu met meerdere menu items.
WordPress menu Trend in 2025
De trend in webdesignland anno het jaar 0 A.D. (After Distancing) is dat de menu’s steeds simpeler worden. Dus gewoon 1 hoofdmenu, zonder dropdown. Dit onder invloed van mobiele telefoons.
Waarom een simpel WordPress menu gebruiken?
Een als het even kan een simpel WordPress menu gebruiken? Om de volgende redenen:
- Het menu van je WordPress website is overzichtelijker met minder menu-items. Het menu neemt ook minder ruimte in.
- Bezoekers hebben steeds minder tijd om veel te zoeken en maken sneller intuïtief keuzes.
- Bij teveel items is uit onderzoek gebleken dat teveel menu-items een vorm van keuzestress opleveren bij de website-bezoeker. Vanuit zogenaamd ‘usability‘-oogpunt kun je beter minder links in je menu hebben.
Lees meer over usabilty en gebruikerservaring
Gebruik maximaal 7 menu-items in WordPress
Tip: gebruik maximaal 7 menu-items. Dus het liefst met 5, 6 of 7 links. Bij meer items wordt het menu te groot. Bij een grotere website moet je bij je webdesign dus goed nadenken hoe je je menu zo efficient mogelijk indeelt.
Waarom maximaal 7 menu-items in je WordPress-menu
In een studie uit 1956 ontdekte de Amerikaanse psycholoog George A. Miller dat mensen een gemiddelde van 7 informatie-eenheden plus of min 2 in het kortetermijngeheugen nauwkeurig kunnen opslaan. Meer dan 7 eenheden wordt lastig, helemaal als we ouder worden.
Ons brein kan de complexiteit dus alleen begrijpen als het wordt opgedeeld in kleine, gemakkelijk te begrijpen eenheden. Je leert hier overigens meer over in een usability en conversie training:
Zoekmachine optimalisatie SEO cursus Google training
In de Cursus SEO / Zoekmachine Optimalisatie leer je hoe je site scoort bij zoekmachines als Google. Kom zo hoog mogelijk in Google met zo min mogelijk middelen.
Web usability User experience & Conversie training
Conversietraining om zoveel mogelijk conversie en rendement uit je WordPress website te halen. Je leert krachtige usability technieken om het rendement te verhogen.
WordPress Bootcamp all-in one spoedcursus
All-in-one Wordpress training. Basis, design en SEO. In 3 dagen (Amsterdam, Den Haag en Antwerpen) of 5 ochtenden online maak je je site met deze spoedcursus.
Te veel inhoud in je menu of wordt je WordPress menu te groot?
Heb je veel content en web-pagina’s dan kun je binnen je website ‘landingpagina’s’ maken van waaruit je verder door je website kunt navigeren. Je kan ook je hoofdmenu opsplitsen in 2 menu’s die je bovenin je website toont. Een voorbeeld vind je op een website die ik een keer gemaakt heb:
Voorbeeld 2 menu’s in de header op www.exsion.nl
Hoe je dit doet leer je tijdens een WordPress cursus:
- Cursus WordPress in Amsterdam
- WordPress Pop-up Bootcamp spoedcursus op maat
- WordPress Bootcamp all-in one spoedcursus
- Online WordPress cursus volgen op afstand vanuit huis
Menu maken in WordPress
10 minuten
Ga in WordPress naar Weergave > Menu’s (of in de Engelse versie naar Appearance > Menus). Hier een nieuw menu aanmaken of een bestaand WordPress menu aanpassen.
Klik op ‘een nieuw menu aanmaken’. Je komt in het volgende scherm. Vul een naam in voor je menu, meestal ‘hoofdmenu’. Klik vervolgens op ‘Menu aanmaken’. Er wordt nu een menu aangemaakt in WordPress dat je zelf kan vullen met de juiste webpagina’s. Dit nieuwe menu is nog niet direct zichtbaar op je website.
WordPress menu activeren
Je moet je menu nog wel activeren. Vink bij ‘Locaties tonen’ je Hoofdmenu aan. Menu opslaan en dan moet het werken.
Pagina’s of berichten toevoegen in WordPress menu
Pagina’s of berichten toevoegen in je WordPress menu doe je door links pagina’s uit te klappen. Selecteer je pagina’s en klik op ‘aan menu toevoegen’. Menu opslaan.
Je menu ziet er dan zo uit in WordPress:
Submenu of drop down menu maken in WordPress
Zet webpagina’s in je menu en sleep ze een klein stukje naar rechts, zoals hieronder bij ‘Projects’ en ‘Services’. Dit wordt je dropdown. Vergeet niet op te slaan om het te bekijken.
Categorieën toevoegen aan WordPress menu
Je kan ook categorieën toevoegen aan WordPress menu. Werkt hetzelfde als pagina’s alleen dan met categorieën. Klik wel links het tabje ‘categorieën’ open. Selecteer en voeg categorieën toe.
WordPress menu activeren of ander menu selecteren
Je kan eventueel een ander menu selecteren als dit nodig is. Dit kan bij het 2e tabje ‘Locaties beheren’. Het is afhankelijk van het thema wat je hier kan invullen en selecteren.
Om een mobiel menu te maken dat anders is dan je menu voor desktop doe je het volgende:
- Ga eerst naar WP Dashboard > Weergave > Menu
- Maak een nieuw menu met de menu-items voor mobiel
- Ga dan naar het tabje “Locaties beheren”. Je ziet dan zoiets als hieronder:
De opties die je nu ziet zijn afhankelijk van je WordPress thema.
Je ziet in de afbeelding dat er een primair menu is. Dit is je menu voor desktop.
In de afbeelding hierboven is het thema Astra gebruikt. Dan heb je de optie “menu buiten het canvas”. Soms staat er ook “mobile menu”. Dit is je mobiele menu voor op telefoons. Selecteer hier het menu dat je voor mobiel hebt gemaakt en opslaan. Controleer op je telefoon of smartphone of het werkt.
Tekst wijzigen of veranderen in WordPress menu
Je kan tekst wijzigen of veranderen in je WordPress menu. Klap een menu-item uit en verander de naam bij ‘navigatielabel’. Verander de naam van je menu onderdeel. Zoals hieronder bij contact:
Menu aanpassen in WordPress thema
Je kunt je menu’s ook aanpassen in de WordPress Customizer. Deze vind je onder Weergave > Customizer. Het is afhankelijk van je thema hoe dit eruit ziet. Het voordeel van de Customizer is dat je direct kunt zien hoe je wijzigingen er uit zien op je website. Pas als je op “Publiceren” klikt werkt het ook echt en staat je menu live.
Je kunt ook CSS-classes aan je menu-items toevoegen. Ga helemaal rechtsbovenin naar ‘Scherminstellingen’ en vink je ‘CSS-classes’ aan (zie screenshot hieronder).
CSS classes toevoegen in menu-item
Je kunt dan CSS classes aan je menu-item toevoegen. Dit is handig als je sommige menu items er anders wilt laten uitzien.
Een class is een soort stijl. In het bovenstaande voorbeeld heb ik de class ‘jouw-menu-stijl’ toegevoegd aan het menu-item ‘Neem contact op’.
Er gebeurt niet direct wat wanneer je een dergelijke class toevoegt. Je moet de volgende stap nog doen in deze handleiding.
CSS classes toevoegen in WordPress thema
De onderstaande code dien je nog in de custom CSS van je thema te plaatsen. Lees indien nodig de volgende handleiding:
Handleiding CSS en Classes maken
Lettertype in menu aanpasssen met class
Wil je je tekst een kleur geven, gebruik dan deze CSS code:
.jouw-menu-stijl {
color: #ffffff;
}
Wil je je lettergrootte veranderen, gebruik dan deze CSS code:
.jouw-menu-stijl {
font-size: 18px;
}
Meer informatie en tips over WordPress menu
Meer informatie en tips over WordPress menu leer je tijdens een WordPress training of cursus:
- WordPress Bootcamp all-in one spoedcursus
- Online WordPress cursus volgen op afstand vanuit huis
- Cursus WordPress in Amsterdam
- WordPress Basiscursus training beginners halfgevorderden
- WordPress Pop-up Bootcamp spoedcursus op maat
Succes met het maken van je menu in WordPress!