Je eigen WordPress thema maken: header.php en custom menu’s
Geschreven door Jasper Denkers van developtheweb.nl
Het bestand header.php bevat de code welke aan het begin van elke pagina van je website is terug te vinden. In dit vierde deel uit de serie waarin je een WordPress thema leert maken bekijken we wat er allemaal in het headerbestand moet staan. Daarnaast gaan we kijken naar het gebruik van aanpasbare menu’s in een thema.
Wat moet er allemaal in header.php?
Het header bestand moet aan een aantal eisen voldoen. Ten eerste om je website aan de standaarden te laten voldoen, ten tweede om de functionaliteiten van WordPress tot hun recht te laten komen. Sommige plugins zullen bijvoorbeeld niet werken wanneer het gebruikte headerbestand niet volledig is.
We beginnen met het declareren van een juiste ‘DOCTYPE’. Het voorbeeld wat we tot nu toe gebruikten had nog geen DOCTYPE. We kiezen voor XHTML 1.0 Transitional. Je voegt deze toe door de volgende regel bovenaan header.php te plaatsen.
Daarnaast vervang je de <html> tag door het volgende:
wp_head()
Het belangrijkste in de header is de WordPress functie wp_head(). Deze functie zorgt ervoor dat de header compleet wordt gemaakt. Dit bestaat uit enkele regels code van WordPress zelf maar ook kunnen hier stukjes code van plugins worden geplaatst. Zonder deze functie zullen sommige plugins dus niet werken! Voeg deze functie toe voor de afsluitende </head> tag.
bloginfo()
De functie bloginfo() hebben we al eerder gebruikt. We gaan hem nu gebruiken om de naam van de website weer te geven in de <title> tag. We gebruiken daarnaast ook de functie wp_title(), welke de titel van de pagina weergeeft.
wp_title() past zich aan aan de soort pagina die wordt geladen. Wanneer een pagina wordt weergegeven, laat de wp_title() de titel van de pagina zien, wanneer bijvoorbeeld een categorie wordt geopend, wordt de naam van de categorie weergegeven.
Je zou de <title> tag als volgt kunnen invullen:
<?php wp_title(); ?> | <?php bloginfo( 'name' ); ?>
Op deze manier wordt in de titel van het document zowel de titel van de pagina, als de naam van de website weergegeven. Naast de naam van de website kun je meerdere dingen opvragen met de functie bloginfo(). De karakterset geef je bijvoorbeeld weer door de volgende regel toe te voegen:
Met de functie bloginfo() kunnen we ook de website titel en beschrijving dynamisch maken. Bijvoorbeeld zo:
Hierbij worden de waardes gebruik welke je in de instellingen van WordPress opgeeft.
Een voorbeeld
Als je deze onderdelen toevoegt aan de header, kun je op het volgende uitkomen:
<?php wp_title(); ?> | <?php bloginfo( 'name' ); ?>
Natuurlijk kun je de header verder met tags naar eigen wens invullen. We gaan nu kijken naar het toevoegen van een zogenaamd ‘Custom Menu’ in het thema.
Flexibele navigatie
Door middel van de functie wp_nav_menu() kunnen we een menu in het thema maken welke de WordPress gebruiker zelf kan invullen in het menu Appearance > Menus. Het menu in het voorbeeld bestond uit de vorige code:
Deze code halen we weg en wordt straks vervangen door de wp_nav_menu() functie. Voordat we het menu kunnen weergeven, moeten we deze registeren. Dat doen we met de functie register_nav_menu().
Omdat het niet gebruikelijk is deze functie in bijvoorbeeld header.php te plaatsen, zetten we deze in een nieuw bestand; functions.php. Het bestand functions.php wordt elke keer voordat een thema geladen automatisch uitgevoerd zodat bijvoorbeeld een menu kan worden geregistreerd.
Zet de volgende code in het bestand functions.php:
De functie wordt gebruikt om WordPress te vertellen dat er in het thema een menu gebruikt wordt met de omschrijving ‘Primair menu’. Om naar het menu te verwijzen geef je in de eerste parameter van de functie een afkorting (slug genoemd) weer: ‘menu_primair’.
Sla functions.php op en ga in WordPress naar het menu Appearance. Je zult zien dat er nu een onderdeel Menus is bijgekomen.
Open dit item en maak een menu aan. Noem deze bijvoorbeeld ‘menu 1’ en voeg er voor het testen een aantal links toe. Nadat je deze hebt aangemaakt zie je links bovenaan een nieuw onderdeel verschijnen: ‘Theme Locations’.
Voor elk menu dat je registreert met de functie register_nav_menu() kun je hier een invulling opgeven. Selecteer hier het menu dat je net hebt aangemaakt.
We gaan nu het menu in het thema plaatsen. We vervangen de volledige code van het menu (inclusief <div id=”menu”></div>) door het volgende:
'menu_primair', 'container' => 'div', 'container_id' => 'menu' )); ?>
De functie wp_nav_menu() kun je door middel van een array een hoop parameters meegeven. In het voorbeeld worden de volgende drie gebruikt:
theme_location – Je kunt hier opgeven welk geregistreerd menu moet worden weergegeven. Deze waarde is hetzelfde als de waarde in de eerste parameter van de functie register_nav_menu().
container – De ‘container’ parameter wordt gebruikt om aan te geven in welk html element het menu geplaatst moet worden. Aangezien we in het voorbeeld gebruik maakten van een <div> tag, vullen we hier ‘div’ in.
container_id – Met container_id kunnen we aangeven welk id het element, wat is opgegeven in de ‘container’ parameter, moet krijgen. In het voorbeeld gebruikte we het id ‘menu’, dat vullen we daarom ook hier in.
Voor de andere parameters die gebruikt kunnen worden, zie http://codex.wordpress.org/Function_Reference/wp_nav_menu. Hieronder staan de meest gebruikte op een rijtje:
container_class – Naast het id met ‘container_id’ kun je met de parameter ‘container_class’ ook een CSS klasse aan het container element meegeven.
menu_id/menu_class – Het menu wordt opgebouwd door middel van een <ul> element. Met de parameters menu_id en menu_class kun je deze een id en CSS klasse meegeven.
echo – De parameter echo kan de waarde ’true’ of ‘false’ hebben. Hiermee kun je aangeven of het menu meteen moet worden weergegeven of dat deze als variabele gebruikt moet kunnen worden. Wanneer je voor ‘false’ kiest zou het menu op deze manier in een PHP variabele opgeslagen en verder verwerkt kunnen worden.
before/after – Met de parameters before en after geef je aan wat er voor en na het <a> element van een menu-item geplaatst moet worden.
link_before/link_after – De parameters link_before en link_after bevatten de code die voor en na de linktest geplaatst moet worden.
Tot zover het vierde deel uit de serie waarin je een WordPress thema leert maken. Mocht je sommige delen nog niet snappen, dan kun je hier het thema wat we tot nu toe gemaakt hebben downloaden en bekijken: voorbeeldthema-3.zip.
In het volgende onderdeel gaan we kijken naar de verschillende themabestanden voor verschillende soorten pagina’s.
Zeer duidelijke handleiding tot nu toe. Klasse!
Ik wacht met smart af naar de volgende stap!
Edit: ik zie nu pas dat de handleiding verder gaat… Mooi werk heren!