Als je bestaande thema’s wilt customizen of helemaal van grond af wil opbouwen, is het belangrijk om te begrijpen hoe de hiërarchie van WordPress templates werkt.
Het allerbelangrijkste doel van deze hiërarchie is dat alles georganiseerd blijft. Als je eenmaal weet wat alle templatebestanden van je thema zijn, wat ze doen en welke prioriteit ze onderling krijgen, kan je bijna elk aspect van het uiterlijk van je WordPress site wijzigen.
In dit artikel leggen we uit wat de hiërarchie van WordPress templates is en hoe deze werkt. Daarna geven we een volledig overzicht van de templatebestanden die bij elk type WordPress pagina zijn betrokken (inclusief een spiekbriefje om later snel even terug te kijken), zodat je ze in je voordeel kan gebruiken.
Aan de slag!
Een inleiding tot de hiërarchie van WordPress templates
Meestal maken niet-dynamische websites gebruik van statische HTML en CSS bestanden om hun inhoud weer te kunnen geven. WordPress is echter een dynamisch platform gebaseerd op de programmeertaal PHP. Elke WordPress site laadt meerdere .php bestanden, die stuk voor stuk bepalen hoe een specifieke sectie of component eruitziet.
Wanneer je een bepaald type pagina laadt, zoekt het Content Management System (CMS) naar de templatebestanden die bij dit type pagina horen.
Als je bijvoorbeeld de zoekfunctie van WordPress gebruikt en een pagina met zoekresultaten laadt, gaat het CMS op zoek naar twee templatebestanden:
- search.php, die bepaalt hoe de pagina’s met zoekresultaten eruitzien
- index.php, het standaard templatebestand dat WordPress gebruikt wanneer het de bovenste optie binnen een hiërarchie niet kan vinden
Welke templatebestanden worden gebruikt, hangt af van het thema dat je gebruikt. Alle WordPress thema’s zijn een verzamelingen templates, stylesheets en ander elementen, zoals afbeeldingen. Dus in het bovenstaande voorbeeld, als je het thema dat je gebruikt een search.php template bevat, zal WordPress deze vinden en laden.
In sommige gevallen is het mogelijk dat je een thema gebruikt die geen templatebestanden bevat voor de paginatypes die jij wil laden. En dat is precies waar de WordPress template-hiërarchie om de hoek komt kijken. Het is een ingebouwd systeem dat WordPress vertelt welke templatebestanden moeten worden geladen en in welke volgorde.
Als WordPress voor een zoekpagina het bestand search.php niet kan vinden, gaat het omlaag naar het volgende bestand in de hiërarchie, namelijk index.php. Dit bestand is de laatste optie binnen elke afzonderlijke tak binnen de template-hiërarchie.
In theorie kan je een volledig functioneel thema hebben dat slechts één templatebestand bevat, en dat is index.php.
In de praktijk is er met een enkel templatebestand weinig mogelijk wat stijlaanpassingen betreft en ziet elke pagina er dus ongeveer hetzelfde uit. Tenzij dat iets is wat je zoekt, is het begrijpen van de WordPress template-hiërarchie een van de belangrijkste stappen die je als thema-ontwikkelaar kan nemen.
Zo werkt de hiërarchie van WordPress templates
Zoals je misschien wel weet, heeft WordPress verschillende soorten pagina’s, ook wel page types genoemd, afhankelijk van wat je wil publiceren. Er zijn zeven hoofdcategorieën waar je uit kan kiezen:
- Homepagina (Front page)
- Single berichten (Single posts)
- Single pagina’s (Single pages)
- Custom berichttypes (Custom post types)
- Zoekresultaatpagina’s (Search result pages)
- Categorie- en tagpagina’s (Category en tag pages)
- 404 foutmelding pagina’s (404 error pages)
Elk van deze pagina’s heeft zijn eigen custom hiërarchie, wat betekent dat het een specifieke set aan templatebestanden gebruikt.
Als je een korte blik werpt in de mappen van je thema, vind je meestal een hele verzameling aan templatebestanden. Hieronder vind je een voorbeeld van een lijst met templatebestanden die je vindt in de themamap voor een blogpost:
Dit paginatype is voor een “single post”, wat betekent dat het het single.php bestand gebruikt als template voor de hoofdcontent van de pagina (het blogbericht zelf).
Daarnaast gebruikt het voor elk pagina-element een apart templatebestand, waarvan je de meeste wel meteen zul herkennen, waaronder:
Het is belangrijk om te begrijpen dat, hoewel elk paginatype zijn eigen hiërarchie heeft, ze wel vaak bepaalde templatebestanden delen, zoals header.php en footer.php.
Als je je eigen thema aan het bouwen bent, betekent dat je voor elk soort pagina een eigen stijl kan maken, maar ook templatebestanden kan recyclen.
Ook kan je custom templatebestanden maken voor elementen als zijbalken en footers die uitsluitend worden gebruikt op bepaalde paginatypes. Die flexibiliteit is te danken aan de modulaire benadering van WordPress wat betreft templates.
Wanneer je van thema wisselt, kunnen de verschillen in lay-outs die je ziet, worden toegeschreven aan de nieuwe templatebestanden die WordPress laadt. Child-thema’s spelen ook een rol in de hiërarchie van WordPress thema’s, wat we verderop zullen bespreken.
Waar je de WordPress templatebestanden kan vinden en wijzigen
Een .php bestand kan zowel PHP code als HTMP markup bevatten (die je allemaal kan bewerken). Daarom kan je wel stellen dat de WordPress templatebestanden zo complex zijn als nodig is voor jouw site. In de meeste gevallen zijn de templatebestanden die WordPress gebruikt een verzameling functies voor de elementen die ze beheren.
Om je een voorbeeld te geven, dit is een korte blik op het templatebestand header.php van het officiële WordPress thema Twenty Twenty-One:
Zoals we al zeiden, bevat elk WordPress thema zijn eigen verzameling templatebestanden. Je kan zien welke templatebestanden jouw WordPress thema gebruikt door de map van het thema te openen. Deze bevindt zich in de hoofdmap van je website en kan je met een File Transfer Protocol (FTP) client bereiken.
Zo ziet dit eruit voor het vorige officiële WordPress thema Twenty Twenty:
Standaard laadt WordPress templatebestanden die zich in de hoofdmap van je thema (wp_content > themes) of in de map template-parts bevinden.
Als je van plan bent om meerdere templatebestanden te maken, raden we aan om je primaire paginatemplates in de hoofdmap te houden. Voor specifiekere templatebestanden, zoals een full-width pagina of layouts voor de zijbalken, kan je submappen gebruiken.
De beste manier om te visualiseren hoe de volledige hiërarchie van WordPress templates eruitziet, kan je het beste een spiekbriefje gebruiken. In dit geval is dat een visueel overzicht van de template-hiërarchie, met dank aan de WordPress Codex:
De WordPress Codex bevat veel informatie over de template-hiërarchie, dus we raden zeker aan om deze bron te bookmarken. Laten we nu eens kijken naar elk paginatype en de templatebestanden het gebruikt.
Een overzicht van de hiërarchie van WordPress templates per paginatype
WordPress gebruikt zeven hoofdtypes pagina’s. In deze sectie bespreken we ze allemaal en geven we je een uitsplitsing van de templatebestanden die ze gebruiken. Laten we met de front page.
Templatebestanden frontpagina
Je WordPress homepagina is vaak de eerste stop die gebruikers maken wanneer ze je website bezoeken. In de praktijk kunnen de lay-outs van de homepagina sterk variëren tussen sites.
Voor een eenvoudige homepagina zal WordPress echter in de volgende volgorde zoeken naar deze drie templatebestanden:
- front-page.php
- home.php
- index.php
Als je thema geen front-page.php templatebestand bevat, gebruikt WordPress standaard de tweede optie, enzovoort. Zoals altijd is het index.php bestand de laatste stop die WordPress maakt in deze beslissingsboom van templates.
Single Posts
Individuele WordPress artikelen gebruiken de template-hiërarchie van single post. Voor de hoofdcontent van elk blogbericht zoekt WordPress naar de volgende bestanden:
- single.php
- singular.php
- index.php
Als je echter naar het spiekbriefje kijkt over de templates, zal je echter zien dat in sommige gevallen er een complexere hiërarchie is.
Dat komt omdat je met WordPress aparte templatebestanden kan toewijzen voor de verschillende individuele berichten en single categorieën, en het pas op single.php overstapt als het geen van deze opties vindt.
Naast de primaire templatebestanden, heb je ook nog elementen als de header, footer, zijbalk en reactiesecties. Zoals we al zeiden, kan elk van deze elementen zijn eigen templatebestand hebben.
Single Pages
Na berichten (posts) zijn voor de meeste WordPress sites ook single pagina’s enorm belangrijk. In de meeste gevallen gebruiken ze een andere template dan je homepagina, tenzij beide soorten pagina’s standaard staan ingesteld op index.php.
Zo ziet de hiërarchie van de template van een single page eruit:
- page.php
- singular.php
- index.php
Hoewel de templatehiërarchie voor single berichten en pagina’s vergelijkbaar is, zijn er enkele belangrijke verschillen.
Ten eerste, als het om pagina’s gaat, gebruikt WordPress het get_page_templates() pad voor custom bestanden, die je kan gebruiken zodat van de standaard paginatemplate kan worden afgeweken.
Bovendien kan je templates maken voor specifieke slugs en ID’s. Als je een page-{slug}.php of een page-{id}.php bestand hebt, zal WordPress proberen elk bestand in de juiste volgorde te laden, voordat het naar de standaard page.php gaat.
Custom Post Types
Je kan custom berichttypes maken als je verschillende soorten content hebt die je niet wil bundelen met standaard pagina’s of berichten. Custom berichttypes zorgen voor betere organisatie van je content en hebben ook hun eigen template-hiërarchie:
- archive-{post_type}.php
- archive.php
- index.php
De template-hiërarchie voor custom berichttypes is minder complex dan volledige pagina’s of berichten. Met WordPress kun je echter templatebestanden maken voor elk custom berichttype, zodat ze niet exact dezelfde lay-outs hoeven te delen.
Zoekresultaatpagina’s
We hebben eerder al kennisgemaakt met de template-hiërarchie die WordPress gebruikt voor pagina’s met zoekresultaten, dus laten we kort samenvatten hoe het eruit ziet:
- search.php
- index.php
Naarmate we afstand nemen van ‘complexe’ paginatypen zoals normale berichten of je homepagina, wordt de hiërarchie van WordPress templates veel eenvoudiger.
Binnen een zoekpagina hoef je waarschijnlijk niet veel elementen op te nemen behalve de resultaten zelf. Hoe eenvoudiger de structuur, hoe korter de hiërarchie meestal is.
Categorie- en tagpagina’s
Hoewel veel websites er niet rechtstreeks naar linken, genereert WordPress collectieve pagina’s voor je tags en categorieën. Er zijn ook specifieke subpagina’s voor elk item binnen die taxonomie.
Gezien hoe complex taxonomie kan worden voor websites met veel content, omvat deze hiërarchie meer ‘stappen’ dan normaal:
- category–{slug}.php
- category-{id}.php
- category.php
- archive.php
- index.php
Merk op dat dezelfde hiërarchie wordt gebruikt voor tags, behalve dat “tag” in alle gevallen “category” vervangt.
In theorie kan je voor elke categorie of tag op je WordPress website individuele templatebestanden maken en deze identificeren via slugs of ID’s. Er zijn echter maar weinig websites die al die moeite doen.
Als je niet van plan bent om bezoekers door je categoriepagina’s te laten bladeren, kan je de standaard template archive.php gebruiken.
404 error pagina’s
Soms proberen bezoekers toegang te krijgen tot een pagina die niet bestaat. Wanneer dat gebeurt retourneert WordPress een 404 error pagina.
Standaard biedt WordPress geen mogelijkheden om het uiterlijk van deze pagina aan te passen. Je kan het uiterlijk ervan echter zelf wel aanpassen via het templatebestand. De template-hiërarchie is vrij kort:
- 404.php
- index.php
Naarmate je website groeit, zullen ook steeds meer gebruikers 404 errors tegenkomen. Met je eigen custom foutpagina kan je helpen je bezoekers te informeren waarom de pagina niet wordt geladen, hen in een andere richting wijzen en de frustratie enigszins te verminderen.
Bij het laden van een 404 templatebestand zal WordPress eerst op zoek gaan naar je eigen custom bestand voordat het standaardbestand wordt gebruikt.
De plek van child-thema’s binnen de hiërarchie van WordPress templates
Als je het leuk vindt om WordPress thema’s aan te passen, kan je het beste een child-thema gebruiken. Child-thema’s hebben ook een plekje binnen de hiërarchie van WordPress templates, maar dat is niet te zien als je naar het spiekbriefje kijkt die we eerder gaven.
Kort samengevat: het gebruik van een child-thema voegt een tweede laag toe aan de template-hiërarchie voor elk paginatype dat je gebruikt.
Stel dat je een child-thema gebruikt dat custom templatebestanden bevat voor single pagina’s. Dit is de volgorde waarin WordPress bestanden probeert te laden:
- page.php binnen het child-thema
- page.php binnen het parent-thema
- singular.php binnen het child-thema
- singular.php binnen het parent-thema
- index.php binnen het child-thema
- index.php binnen het parent-thema
Als WordPress een versie van een template-bestand binnen je child-thema kan vinden, dan wordt dat bestand geladen, zelfs als er een tegenhanger bestaat binnen het parent-thema. In sommige gevallen wil je misschien iets aanpassen binnen een thema dat je gebruikt. Het gebruik van een child-thema is perfect in die scenario’s.
Net als bij andere soorten aanpassingen, gaan wijzigingen in de templatebestanden van een thema verloren wanneer je deze bijwerkt. Het toevoegen van die wijzigingen via een child-thema zorgt dat dit niet gebeurt.
Template tags gebruiken voor het ontwikkelen van thema’s
In WordPress development kom je vaak templatetags tegen. Dit zijn PHP functies die je kan gebruiken om gegevens dynamisch te genereren en op te halen. Templatetags zijn vaak onderdeel van templatebestanden, maar zijn niet uitwisselbaar.
De code van WordPress bevat tientallen templatetags, die je kan gebruiken voor het ontwikkeling van thema’s. Enkele voorbeelden:
- get_header()
- get_footer()
- get_sidebar()
- get_search_form()
- get_template_part()
Met deze tags kan je templatebestanden verzamelen van het thema dat je gebruikt. In de praktijk betekent dit dat je specifieke elementen kan toevoegen aan de primaire templatebestanden, zoals front-page.php of index.php.
Als je een volledige lijst wil met alle templatetags die je kan gebruiken bij WordPress development, bekijk dan de WordPress Codex.
Hier vind je instructies voor het gebruik van elke templatetag, hun individuele parameters en praktijkvoorbeelden van de code.
Samenvatting
Hoewel de hiërarchie van WordPress templates op het eerste gezicht ingewikkeld lijkt, is het feitelijk niets meer dan een reeks eenvoudige beslissingsbomen. Telkens wanneer je een WordPress website bezoekt, ziet de CMS welk type pagina je probeert te openen en gebruikt vervolgens de hiërarchie om te bepalen welk templatebestand moet worden geladen.
Naast de hoofdtemplate voor elk paginatype, kunt je ook templatebestanden hebben voor afzonderlijke elementen, zoals headers, footers en zijbalken.
Deze modulaire aanpak geeft je volledige controle over hoe elke pagina op je site eruitziet en helpt je tijd te besparen tijdens het WordPress ontwikkelingsproces.
Heb je vragen over hoe de hiërarchie van WordPress templates werkt? Deel ze in de reacties hieronder!
Hoofdredacteur bij Kinsta en content marketing consultant voor WordPress plugin-ontwikkelaars. Verbind met <a href="">Matteo op Twitter.
Laat een reactie achter