WordPress menu maken en beheren

Een WordPress menu is een onderdeel van elke WordPress website.

Ondanks dat dit het geval is ben ik echter tot de ontdekking gekomen dat er op Webtalis nog niet eens een artikel over geschreven is.

Dit kan natuurlijk niet de bedoeling zijn want was nou een website zonder navigatie menu?

Het is een belangrijk onderdeel van een website om bezoekers te laten navigeren naar de juiste plekken op de website. Laten we dus snel beginnen om je volledig op de hoogte te brengen.

Hoe de oude standaard WordPress menu’s werken

Wanneer je net een nieuwe WordPress website geïnstalleerd hebt staat het standaard WordPress thema voor je ingesteld. Het menu in dit thema werkt in het begin altijd op “de oude manier”.

De oude manier is dat alle pagina’s die je aanmaakt automatisch in het menu komen te staan op alfabetische volgorde.

Het nadeel van dit is dat je totaal geen controle hebt over je menu. Zo kun je niet de volgorde bepalen, pagina’s uitsluiten of andere dingen dan pagina’s toevoegen.

Gelukkig hebben we hedendaags de mogelijkheid om zelf een menu aan te maken en dus ook de volledige controle over welke links erin moeten staan en in welke volgorde.

We hebben hier geen WordPress menu plugin voor nodig, het is gewoon een standaard functionaliteit in WordPress en zo goed als alle thema’s ondersteunen deze functie.

WordPress menu maken en mogelijkheden (video)

In onderstaande video kun je bekijken hoe je een menu kunt maken en beheren in WordPress.

Abonneer je op mijn YouTube kanaal

Wil je liever de tekstvariant lezen of meer instructies en informatie? Lees hieronder vooral verder.

Nieuw WordPress menu maken

Wanneer je zelf de volledige controle over je navigatie menu wilt hebben in WordPress moet je een eigen menu maken. Je kunt dit doen door naar in het dashboard naar “Weergave -> Menu’s” te gaan.

Eenmaal op de pagina kun je direct een nieuw WordPress menu aanmaken door een menunaam in te vullen en op “Menu aanmaken” te klikken.

WordPress menu aanmaken

Menu-items toevoegen aan het menu

Wanneer je een nieuw menu aangemaakt kun je aan de linkerkant pagina’s, categorieën, tags en berichten selecteren om aan je menu toe te voegen.

Wil je bijvoorbeeld de pagina “Contact” in je menu hebben staan? Zoek dan bij pagina’s “Contact” op, zet er een vinkje naast en klik op “Aan menu toevoegen”.

Item aan menu toevoegen

Onder het kopje “Links” kun je in tegenstelling tot de andere kopjes niets selecteren. Het is hier mogelijk om zelf een URL in te vullen en met name voor de Home knop wordt dit vaak gebruikt.

Links aan menu toevoegen

Wil je een bericht of tag in je menu en zie je hiervan geen kopje? Bekijk de scherminstellingen en zet een vinkje bij Berichten en Tags.

WordPress menu volgorde aanpassen

Wil je de volgorde van de links van je WordPress menu veranderen? Dit is eenvoudig te doen door simpelweg de menu-items te slepen naar boven of onder naar de juiste positie.

Kun je ook een dropdown menu maken?

Een dropdown menu is een menu dat uitrolt wanneer je er met de muis overheen gaat. De menu-items in het dropdown menu zijn meestal subpagina’s, net zoals bij mij het geval is in het menu bij de WordPress kennisbank.

Webtalis dropdown menu

Het is mogelijk om een dropdown menu te maken in WordPress als je thema hier ondersteuning voor heeft en dit is meestal wel het geval.

Het is wederom weer een kwestie van slepen om een dropdown menu te maken, maar in plaats van naar boven of onder moet je nu ook iets naar rechts slepen. Je ziet dan vanzelf een kader verschijnen die wat meer naar rechts staat en dan kun je loslaten. Ik bedoel dus het volgende:

WordPress dropdown menu maken

Wanneer je het goed hebt ingesteld zie je tevens “subitem” staan bij het menu-item dat in het dropdown menu moet komen.

Bepaal de positie van je gemaakte menu

Wanneer je tevreden bent over je net gemaakte menu moet je alleen nog bepalen waar het menu op je website komt te staan. Je kunt dit onderaan de pagina doen bij de menu instellingen.

Het enige wat je hoeft te doen is bij Thema locaties te kiezen voor de plek waar je jouw menu wilt plaatsen en vervolgens het menu op te slaan. Het ziet er ongeveer als volgt uit:

Menu instellingen in WordPress

Het is van je thema afhankelijk of je meerdere plekken hebt waar je het menu kunt laten weergeven of dat je keuze hebt uit 1 plek. Op Webtalis heb ik bijvoorbeeld de keuze om het menu helemaal bovenaan de website te laten weergeven (boven het logo) of onder het logo. Ik kan ook kiezen dat ik beide wil, maar dan zou ik nog een menu moeten aanmaken.

Heb je geen idee waar je menu precies terecht komt? De enige manier om dit te ontdekken is door het te testen. Selecteer een locatie, klik op “Menu opslaan” en bekijk je website.

Gefeliciteerd je hebt een menu aangemaakt in WordPress waar je zelf de volledige controle over hebt.

Hoe je menu-items of het complete menu kunt verwijderen

Ondanks dat dit een artikel is over hoe je een menu kunt maken, kan het natuurlijk ook zijn dat je een menu-item of het hele menu wilt verwijderen.

Om een menu-item te verwijderen moet je op het pijltje naar beneden klikken bij de desbetreffende menu-item. Er klapt vervolgens een menutje open waar je het een en ander kunt instellen. Linksonder staat verwijderen.

Menu-item verwijderen

Het is ook mogelijk om het complete menu in één keer te verwijderen. Kijk onderaan de pagina bij Menu instellingen en je zal al snel de rode tekst “Menu verwijderen” zien staan. Klik hierop en je menu wordt verwijderd.

Menu verwijderen

Overige menu mogelijkheden uitgelegd

Je weet nu hoe je een menu kunt maken in WordPress, er zijn echter ook nog allerlei extra mogelijkheden waar je wellicht gebruik van wilt maken.

Weet jij bijvoorbeeld hoe je een menu-item niet klikbaar maakt of een link laat openen in een nieuw tabblad? Dit en nog veel meer zal ik hieronder behandelen.

Automatisch pagina’s toevoegen

Bij de menu instellingen kun je ook kiezen dat WordPress automatisch nieuwe top-level pagina’s toevoegt aan je menu.

Wat hiermee bedoelt wordt is dat wanneer je een normale pagina maakt deze automatisch aan het menu wordt toegevoegd. Indien je een pagina maakt en daarbij een hoofdpagina selecteert, dan zal deze pagina niet in het menu komen te staan.

Wil je graag dat je pagina’s automatisch worden toegevoegd, dan kun je een vinkje zetten bij bij de menu instellingen bij Automatisch pagina’s toevoegen.

Automatisch pagina's toevoegen aan je menu

WordPress aangepast menu widget

Naast dat je een thema locatie kunt kiezen voor je menu heb je ook de mogelijkheid om het menu met een widget op te roepen.

De widget die je hiervoor moet gebruiken heet “Aangepast menu” en die kun je dus eenvoudig in de sidebar zetten. Wanneer je de widget hebt toegevoegd aan een widget locatie zie je het volgende:

WordPress aangepast menu widget

Bij “Titel” kun je natuurlijk een titel selecteren die wordt weergegeven boven het menu en bij “Menu selecteren” kun je een keuze maken tussen alle menu’s die je hebt gemaakt. Tot slot hoef je alleen nog maar op “Opslaan” te klikken en je aangepaste menu is zichtbaar op je website.

Niet klikbare menu-item maken

Wanneer je een dropdown menu maakt wil je wellicht dat het menu-item op het hoogste niveau niet klikbaar is. Je kunt dit op een eenvoudige manier doen door bij “Links” het juiste tekentje in te vullen bij URL.

Om te zorgen dat een menu-item niet klikbaar is moet je een hekje (#) bij de URL invullen. Dit hekje zorgt ervoor dat de persoon op dezelfde pagina blijft zonder dat er iets gebeurd. Bij Linktekst kun je vervolgens de naam van het menu-item invullen en tot slot kun je op “Aan menu toevoegen” klikken.

Niet klikbare link

 

Menu link in nieuw tabblad openen (linkdoel)

Het kan zijn dat je een (externe) link in het menu wilt laten openen in een nieuw tabblad. Standaard zal je deze optie niet zien, maar wanneer je bij de scherminstellingen kijkt moet je even een vinkje zetten bij “Linkdoel”.

Linkdoel scherminstellingen

Je hebt nu de optie “Open link in een nieuw venster/tab “ erbij gekregen wanneer je bij het menu-item kijkt. Je hoeft hier alleen maar een vinkje bij te zetten wanneer je een link wilt laten openen in een nieuw tabblad.

Nieuw venster/tab openen

Het is overigens aan te raden om dit alleen bij externe links te doen. Het is niet echt gebruiksvriendelijk om links waarbij je op dezelfde website blijft te openen in een nieuw tabblad. Het heeft tenslotte weinig zin om een website meerdere malen geopend te hebben.

Menu-item anders stijlen met CSS

Wil je een menu-item een aparte CSS class geven om iets te doen met de opmaak? Je moet dan hetzelfde doen als wanneer je een link wilt openen in een nieuw tabblad. Ga naar de scherminstellingen en zet een vinkje bij “CSS classes”.

Je krijgt vervolgens de optie CSS class te zien wanneer je op een menu-item klikt.

CSS class optie bij WordPress menu

Link relatie (XFN)

Link relatie is eigenlijk een optie dat volgens mij bijna nooit gebruikt wordt. Deze optie moet je net als bovenstaande opties aanvinken bij de scherminstellingen.

Met Link relatie (XFN) kun je aangeven wat voor menselijke relaties je hebt met de gelinkte websites. Zo kun je links bijvoorbeeld categoriseren op “acquaintance “, “contact” en “friend”.

Meer informatie over Link relaties (XFN) kun je lezen op de officiële XHTML Friends Network Website.

Je menu-items een beschrijving geven

Menu met beschrijving

Het menu systeem van WordPress heeft tot slot ook nog een ingebouwde functie om beschrijvingen toe te voegen aan je menu-items (zie afbeelding hierboven). Het thema dat je gebruikt moet deze functie natuurlijk wel ondersteunen als je hier gebruik van wilt maken.

De beschrijving functie is uiteraard wederom verstopt bij de scherminstellingen van WordPress. Vergeet dus niet om een vinkje te zetten bij “Beschrijving”. Je krijgt daarna een extra optie om een beschrijving in te vullen wanneer je op een menu-item klikt.

WordPress menu beschrijving

Ik hoop dat je nu alles van menu’s af weet

Na het zien van dit artikel hoop ik al je vragen over WordPress menu’s zijn beantwoord en dat het geen probleem meer voor je is om het menu van je website te beheren.

Laat hieronder in de reacties gerust weten of dit artikel je geholpen heeft en wat je van dit artikel vindt en stel ook gerust een vraag als er iets niet helemaal duidelijk is.

59 reacties Voeg ook een reactie toe

  1. Hallo,
    Ik heb een sub menu gemaakt.
    Alleen ik zie de foto’s niet die ik daar ingeladen heb

  2. Hoi Maikel,

    Ik krijg op mijn mobiele niet de 3 streepjes te zien van het menu maar de gewone menubalk zoals de op de desktop versie zet. Weet jij waar ik het kan aanpassen?

    Groetjes Jolanda

  3. Hi Maikel, ik heb een menu aangemaakt binnen WP (thema Illustratr) en het menu hangt in het midden van de pagina… Hoe krijg ik dit bovenaan waar het hoort te staan?

    • Als het goed is heb je bij “Weergave -> Menu” bij het kopje Menu-instellingen, de optie “Locatie tonen”. Je kunt hier selecteren op welke locatie het menu getoond moet worden. Ik ben niet bekend met het thema dus weet niet precies hoe het heet, maar vaak heet het iets als “Header menu” om het bovenaan te tonen.

  4. Ha Maikel, dank voor je geweldige info. Wat ik nu niet kan vinden is, waar ik de positie van het menu op de mobiel en tablet kan instellen. De ‘streepjes’ staan nu gecentreerd, maar ik wil ze rechts. Kan de instelling echt nergens vinden (maar is er vast wel). Of moet dit met extra css ingesteld worden?

  5. Beste Maikel ik heb een menu aangemaakt en alles staat in de horizontale naast mekaar:
    Voorbeeld Home Programma enz.
    Nu wil ik aan de linkerkant ook een menu maken dat dan onder home verticaal komt te staan:
    Bestuur
    Weer
    Afdelingen

    Hoe kan ik dit in wordpress maken.

    • Je kunt dit in een widget maken en eigenlijk met verschillende widgets hetzelfde resultaat behalen. Eventueel kun je het menu wel gewoon via Menu’s maken, waarna je dit met de widget “Navigatiemenu” in de sidebar kunt krijgen.

  6. Hoi Maikel,

    Korte vraag. Wanneer ik een menu wil aanmaken en ik voer een menu naam in, onthoud hij het menu op 1 of andere manier niet. Als ik op ‘menu aanmaken’ druk, gaat de website laden maar vervolgens opent de pagina zich weer zonder ook maar iets door te voeren. What to do? Ik heb een template gekocht (Uncode).

    • Alle plugins deactiveren om te kijken of dit het probleem oplost. Mocht dit het geval zijn, dan alle plugins 1 voor 1 activeren en het elke keer testen om de boosdoener te ontdekken.

  7. Ik dacht dat ik het wel wist van die menu´s,,,, Maar ik heb toch weer paar leuke dingen geleerd. Wat mij vooral aanspreekt in jou blog is de manier waarop het wordt uitgelegd. Wij oudjes zijn niet zo op de hoogte met die computertaal en dan is het fijn als je iets vind dat je begrijpt!!

  8. Ha Maikel,

    Ik heb een dropdown menu gemaakt. Het hoofditem (informatie ) al “niet klikbaar”gemaakt. Maar als ik dan een sub-item aanklik zie ik op de nieuw geopende pagina het hele menu, behalve informatie. Daar staat dan niks. Hoe kan ik er voor zorgen hoe dat wel zichtbaar blijft? Dit ziet er zo raar uit met zo’n “gat midden in het menu”.

    Groetjes Ingeborg

  9. Hey Maikel,

    Ik hoop dat je mij kan helpen. Ik heb mijn homepage gemaakt dmv Elementor. Ik heb een template gemaakt in full width waarin je naar beneden scrollt en dan verschillende dingen tegen komt mbt de organisatie (wie zijn wij? wat doen wij voor je?). Nu wil ik in mijn menu bovenaan een onderwerp maken (bijv: wie zijn wij) Op het moment dat mensen daarop klikken wil ik niet een nieuwe pagina openen, maar ik wil dat de site uit zichzelf naar beneden scrollt op mijn home pagina om bij dat onderwerp te komen. Snap je wat ik bedoel? Ik hoop dat je me verder kunt helpen.

    • Dan zal je anchors moeten maken op deze pagina. Met een anchor geef je aan waar een link op terecht moet komen op de pagina.

      Bij het stukje “Wie zijn wij” zal je dan een soort van onzichtbare link moeten maken <a id=”wiezijnwij”></a>. Vervolgens kun je het menu #wiezijnwij als link gebruiken, waarna mensen naar beneden scrollen.

  10. Hoi Maikel,
    ik heb een probleem met mijn menu. Van de week een nieuw thema geïnstalleerd en sindsdien gaat het volgende mis: wanneer ik in mijn menu op een onderwerp klik, komen daaronder de hoofonderwerpen te staan. Als ik daar met mijn muis op ga, klapt er een nieuw menuutje uit met sub onderwerpen van dat hoofdonderwerp (bijvoorbeeld Bestemmingen, hoofdonderwerpen Frankrijk, Montenegro.. En onder Frankrijk staat dan weer Jura, Bretagne enz). Maar als ik nu een artikel wil aanklikken dat wat naar onderen staat, schuift hij als het ware mee op het hoofdonderwerp en zit ik ineens in de artikelen van Montenegro. De sub artikelen kan ik dus niet aanklikken, omdat de muis/het systeem het menu van de hoofdonderwerpen volgt. Beetje moeilijk uit te leggen. Hopelijk snap je het. Wat zou ik hier aan kunnen doen?

    Groetjes Kitty

    • Als ik kijk lijkt het alsof je niet verder kunt dan bijv. Ardèche, terwijl het lijkt dat er nog een submenu na moet komen. Dit zal je aan moeten passen in het thema, zodat er meer lagen kunnen komen. Extra css-opmaak is wellicht ook nodig dan.

  11. Hoi Maikel, ik heb een menu vraag. Mijn drop down menu wordt te lang (landen van Europa), daardoor zijn de onderste landen niet meer te zien (die vallen buiten de pagina). Ik kan wel naar beneden scrollen, maar alleen de achtergrond scrollt dan en niet het menu. Is er een mogelijkheid dat ook de onderste landen zichtbaar zijn? Bedankt alvast.

      • Dat dacht ik ook, maar het lijkt erop dat het menu gewoon niet groter kan worden dan het formaat van mijn pagina. Het zal dan wellicht met het thema te maken hebben. Ik hoopte dat het “gewoon” een code was. Bedankt voor je reactie in ieder geval!

  12. Hoi,

    ik ben zelf aan de slag met het thema storefront.
    Wanneer ik mijn menu toevoeg komen deze onder elkaar, ik zou net als jij deze graag naast elkaar willen.
    Hoe kan ik dit bekomen?

  13. Hi! Ik ben mijn nieuwe website aan het bouwen, en nu verschijnt mijn primary menu (helemaal bovenaan onder een eventueel logo), alleen in de desktopweergave. Bij tablet of mobiel verdwijnt hij en zie je alleen links nog 3 streepjes waar je op moet klikken en waarbij dan in een sidebar het menu verschijnt. Ik heb echter maar 3 hoofdpagina’s, en wil dat dit menu ook gewoon op tablet en mobielfunctie blijven staan bovenaan in het midden. Ik krijg het maar niet voor elkaar! Weet jij raad?

    • Ja, dit is standaard en hoort erbij om het design responsive te maken. Wanneer je dit niet wilt hebben, zal je de code van het thema moeten induiken om alles netjes zichtbaar te houden. Hier is verder geen eenvoudige instelling voor.

  14. Hoi Maikel,

    Ik heb een meertalige website gemaakt met WPML. Plotseling kan ik niet meer navigeren naar andere pagina’s en blijf ik, onafhankelijk van welk menu item ik ook aanklikt, op de homepage staan. Weet jij wat ik hier aan kan doen? De website is nog niet online en staat in de cooming soon modus.

  15. Hoi Maikel, Dank je voor je uitgebreidde uitleg. Ik zit echter met het volgende probleem.
    Ik heb een dropdown menu gemaakt, maar als je op de pagina’s klikt neemt hij niet de uitgelichtte foto mee die ik gekozen heb, maar houdt diegene van de hoofdpagina aan. Hoe kan ik dit oplossen?

    Vriendelijke groet, Fine

  16. goedemiddag,

    is het ook mogelijk om in het dropdown menu te scrollen.

    ik heb zoveel onderdelen in het menu dat het onderste gedeelte niet zichtbaar is op het scherm.

    wanneer ik omlaag scroll gaat de gehele pagina omlaag

    vriendelijke groet
    Stephane

  17. Met interesse gelezen. Ik blijf met een vraag zitten:
    is het mogelijk een menu te maken met bijvoorbeeld 5 items in het zwart, echter elk met een andere hoover-kleur?

  18. Hoi,

    Ik heb ook een menu met drie niveau’s dat altijd mooi werkte. Ik heb gisteren een update doorgevoerd van wordpress naar de laatste versie en aantal plugins geupdate. Dat ging dus mis 🙂 (error 500). Inmiddels heb ik de plugins die niet compatible waren weer gereset en nu werkt de site weer. Mijn menu wordt evenwel keurig weergegeven met de dropdowns echter als ik klik op een menupagina dan gebeurd er niets totdat ik de pagina ververs. Enig idee wat ik hieraan kan doen?

  19. Ik ben heel druk met het maken van een website voor een bewonerscommssie.
    Elke bewoner kan deze site bekijken.
    Maar ik wil diverse pagina’s alleen zichtbaar laten zijn voor de commissie leden.
    Dus moeten ze op de een of andere manier daar voor inloggen.
    Hoe kan ik dit aanpakken??

    • Wanneer het om een aantal commissieleden gaat, dan is het het eenvoudigste om deze gebruikers handmatig aan te maken. Vervolgens kun je gewoon de standaard WordPress inlogurl geven. De pagina’s die alleen de commissieleden mogen zien zou je privé kunnen maken en voor de ingelogde mensen kun je een uniek menu maken met behulp van een plugin als Nav Menu Roles .

  20. Hallo Maikel, handig stuk! Dank je. Ik vraag me nog af of het mogelijk is om 1 pagina meerdere malen in een menu te laten plaatsvinden. Denk aan dropdown onder een thema en kernwoorden er onder. Soms passen die op meerdere plaatsen. Alvast bedankt

  21. Hoi Maikel, bedankt voor je uitleg. Ik heb in mijn bestaande menu enkele pagina’s “Products”toegevoegd. Nu geeft hij dit in het Engels wel weer, maar als ik de menustructuur voor Duits of Nederlands wil aanpassen geeft hij een foutmelding.
    Kun jij me mss vertellen waar dit aan kan liggen?

    Gr. Fiona

    • Wat voor foutmelding krijg je? Als je op een productpagina staat en je klikt op het land icoontje, kom je gewoon bij de juiste pagina uit voor Duits of Nederlands. Deze URL’s kun je het in menu gebruiken en dan zal het geen probleem zijn.

      • Hallo Maikel,
        Dank voor je reactie.
        In het verleden heb ik idd mijn bestaande menu ook gewoon op deze wijze aangemaakt. Maar als ik nu “menu opslaan” wil in het dashboard, krijg ik de webpagina te zien en de foutmelding “undefined?lang=nl” of “undefined?lang=de”
        Het menu wordt dan ook niet opgeslagen.
        Weet jij hoe ik dit verhelpen kan?
        Alvast dank voor je reactie!

  22. Hoi Maikel, Bedankt voor je uitleg hierboven. Ik wil echter in het menu een Facebook icon toevoegen. Ik ben al even op zoek hoe het moet, maar kan het nergens vinden. Ook wil ik deze graag ipv blauw in het wit toevoegen. Zou je me een tip kunnen geven, zou heel fijn zijn. Hoor graag van je, Régine

    • Zo te zien maakt je thema al gebruik van Font awesome, waarmee je allerlei icoontjes kunt gebruiken, net zoals je naast het kopje “home” ziet staan. Je zou met iets als de onderstaande code een Facebook icoon tevoorschijn kunnen toveren.

      <span class=”fa fa-facebook”></span>

      • Bedankt Maikel,
        Het icoontje van het huisje hoort bij HOME en is er vanzelf toegevoegd. Waar moet ik de code, die je hebt geschreven, toevoegen? Hoor het graag, vriendelijke groet Régine.

  23. Heb het 1e menu (top menu) verwijderd en en menu aan de zijkant aangemaakt. toch blijft het top menu zichtbaar. kan hier nu ook niks meer in veranderen.
    Enig idee hoe ik dit weg krijg of in de backend weer terug krijg zodat ik het kan veranderen?

    Alvast bedankt

  24. Hallo,

    Ik wil graag dat een menu naar links zijn dropdownmenu weergeeft. Nu kan dit nét niet helaas.
    Enig idee hoe ik dit voor elkaar krijg?

    Groeten,
    Lisette

  25. Hee Maikel,

    Ik was al begonnen a.h.v. je artikel een Menu aan te maken, maar ik bedacht me opeens: Wat gebeurt er als je ‘Menu opslaan’ doet? 1. Heb ik dan die structuur op mijn website i.p.v. zoals het er nu staat? 2. Of blijft het verborgen voor Jan Publiek alleen voor mezelf in het Dashboard zijnd zichtbaar? Dit voor mij als niet-websitebouwer een ramp overkomt in geval van 1., waar ik niets veranderd wil zien!

    Groetjes Ben

    • Het kan allebei. Waar je op moet letten is of er een thema locatie is aangevinkt. Is dit niet het geval, dan komt het nergens op je website te staan. Is dit wel het geval, dan is het wel te zien op je website.

      Wanneer je een bestaand menu aanpast, bijvoorbeeld het menu dat je nu gebruikt op je website, en je klikt op menu opslaan, dan zal je inderdaad het menu aanpassen op je website.

Geef een reactie