WPLounge
Code snippet
Home » Developers » WordPress menu toevoegen met PHP code snippets

WordPress menu toevoegen met PHP code snippets

Stel dat je een geweldig thema gebruikt maar waarbij het aantal opties wat betreft de navigatiemenu’s beperkt zijn en je eigenlijk een extra menu wilt toevoegen aan je website. We bespreken in dit artikel hoe je met PHP code snippets een menu kan toevoegen aan je thema.

Affiliate disclaimer:
In onze artikelen en op onze pagina's staan affiliate links. Wanneer je via één van deze links een aankoop doet, ontvangen wij een (meestal kleine) commissie van de verkoper. Wij geven altijd onze eerlijke mening over producten. Klik hier voor meer informatie.

Voordat we beginnen is het verstandig om een backup te maken van je website, omdat we verschillende thema bestanden gaan bewerken. Je hebt verschillende mogelijkheden om een backup te maken, lees hierover bijvoorbeeld in het artikel over de beste WordPress backup plugins.

Child thema aanmaken

De volgende stap is het controleren of we een child thema kunnen gebruiken. Dit is nodig omdat we verschillende wijzigingen aan het thema zullen aanbrengen. Als er geen child thema is geactiveerd, gaan alle wijzigingen verloren zodra er een thema update wordt geïnstalleerd. Is er nog geen child thema geinstalleerd? Volg dan eerst het  artikel om een WordPress child theme te maken!

TIP VAN WPLOUNGE
Divi theme & Divi Builder
Bij Elegant Themes ontvang je meer dan
85 premium WordPress themes (waaronder Divi!) voor maar 89 dollar!

Bekijk de themes »»
Lees meer over Divi.

Een nieuw menu maken

Om een nieuw menu aan te maken die je kan selecteren in je WordPress dashboard via Weergave > Menu’s is het nodig om een nieuw menu te registreren. Dit kan je doen door code snippets toe te voegen aan het PHP bestand functions.php. Dit bestand kan je vinden in de directory /wp-content/themes/jouw-thema. Wij gebruiken het Astra thema en willen daar een extra menu aan toevoegen. Via de filemanager van DirectAdmin gaan we naar de directory:

/public_html/wp-content/themes/astra

Hier klikken we op ‘edit’ naast het functions.php script en gaan naar de laatste regel van het bestand. Onder de laatste regel zetten we de volgende code om één menu toe te voegen aan het thema.

function register_my_menu() {
  register_nav_menu('new-menu',__( 'Nieuw Menu' ));
}
add_action( 'init', 'register_my_menu' );

In dit voorbeeld zal de naam van het menu ‘Nieuw Menu’ zijn. De code ‘new-menu’ is wat WordPress gebruikt om het nieuwe menu te kunnen toevoegen. Wil je nu meerdere menu’s toevoegen, dan je de volgende code snippet onderaan het bestand zetten:

function register_my_menus() {
  register_nav_menus(
    array(
      'new-menu' => __( 'Nieuw Menu' ),
      'another-menu' => __( 'Nog een Nieuw Menu' ),
      'an-extra-menu' => __( 'Een Extra Menu' )
    )
  );
}
add_action( 'init', 'register_my_menus' );

Je kan zoveel menu’s toevoegen als je wilt. Vervolgens slaan we het bestand op zodat we het nieuwe menu kunnen toevoegen aan de website.

Menulocaties aan het thema toevoegen

Waar gaan we het nieuwe menu plaatsen? Als je het menu bovenaan je pagina wilt zetten, dan moeten we header.php gaan bewerken. Voor een menu onderaan de pagina is het nodig om footer.php te bewerken.  In ons voorbeeld gaan we header.php aanpassen zodat het menu bovenaan de pagina komt. We gaan het volgende bestand bewerken:

/public_html/wp-content/themes/astra

De volgende code is minimaal nodig om het menu te kunnen toevoegen:

<?php wp_nav_menu( array( 'theme_location' => 'new-menu' ) ); ?>

Maar om de menu opmaak aan te kunnen passen is het nodig om een CSS class toe te voegen. Dit doen we door de class new_menu_class te definiëren in de code. We passen header.php aan en voegen de volgende code toe:

<?wp_nav_menu( array( 'theme_location' => 'new-menu', 'container_class' => 'new_menu_class' ) ); ?>

Click op ‘save’ om vervolgens naar het WordPress dashboard te gaan.

Dashboard: nieuwe menu’s

We gaan nu controleren of het nieuwe menu is toegevoegd. Ga hiervoor naar Weergave -> Menu’s. Als het goed is zie je nu bij Menu instellingen de nieuwe menu optie staan zoals in het voorbeeld hieronder:

Nieuw menu

 

Je kan nu de nieuwe menulocaties in de lijst zien. Om links toe te voegen in het nieuwe menu, klik je op ‘maak een nieuw menu’ boven aan de pagina:

Maak een nieuw menu

Vervolgens kan je de menu structuur aanmaken door menu items naar het nieuwe menu te slepen. Ook kan je hier de menunaam veranderen.

Menustructuur

Sla het nieuwe menu op. Nadat dit nieuwe menu is aangemaakt, kan je ook de locaties beheren waar ze moeten worden weergegeven. Klik hiervoor op het ‘Locaties Beheren’ tabblad. Nadat alle instellingen goed staan gaan we het nieuwe menu op de website bekijken. Het menu is nog erg basic, zonder opmaak van CSS en het past nog niet erg bij het Astra thema.

Menu structuur

Opmaak en responsive menu’s

We hebben nu de basis van het nieuwe menu, en de volgende stap is om aan de opmaak van het menu te werken met behulp van CSS. Hoe dat in z’n werk gaat leg ik in de volgende post van deze serie uit.

Roger.Overdevest

Roger is een SEO specialist met veel passie voor WordPress

Reageer