Hoe ontwikkelen wij een thema?
Een WordPress thema ontwikkel je door gebruik te maken van de zogenoemde template hiërarchie, deze bestaat uit bestanden met specifieke namen die elk hun eigen functie hebben binnen het thema. De standaard manier van themaontwikkeling is om HTML en PHP door elkaar te gebruiken, hierin worden de benodigde gegevens verzameld en weergegeven.
Wij moeten ook gebruik maken van deze bestanden, anders werkt het thema niet. Als uitbreiding op de standaard bestanden maken wij gebruik van Twig via de WordPress plugin Timber. Twig is een PHP-template engine en maakt het voor ons mogelijk om de logica en presentatie in een thema van elkaar te scheiden. In de PHP-bestanden vragen wij de benodigde gegevens op en prepareren deze waar nodig, om ze geschikt te maken voor weergave in de website. Vervolgens geven we de gegevens door aan de Timber render functie, deze maakt alle data beschikbaar in het Twig template.
Gutenberg
Met de komst van Gutenberg is de indeling van een website tussen de header en de footer eigenlijk volledig in te delen. In het verleden bepaalden wij welke weergaven er mogelijk waren op bepaalde pagina’s, die beperking is met Gutenberg weg. Dit zorgde er wel voor dat wij een andere manier van ontwikkelen moesten gaan hanteren om de data altijd op de juiste plaats beschikbaar te hebben als een Gutenberg blok wordt toegepast.
Met het gebruik van de Timber plugin en de mogelijkheid om templates te ontwikkelen met Twig kregen we niet alleen de mogelijkheid om de logica te scheiden van de presentatie, maar ook om vanuit de PHP-bestanden data mee te geven aan de Twig render functie. Iets dat ons met de standaard WordPress template parts niet lukte.
Front-end componenten
De volgende stap was de front-end componenten van collega Bas. We willen deze op één plaats houden in onze code, dat zorgt ervoor dat we op één plaats wijzigingen door kunnen voeren voor de hele website. Timber geeft ons de mogelijkheid om een extra namespace toe te voegen waarvandaan de front-end componenten kunnen worden ingelezen.
Aan mij is het dan nog de taak om:
- De juiste bestanden aan te maken in het thema
- De Gutenberg blokken aan te maken en de juiste front-end componenten in te laden
- De data te prepareren en deze in het gedocumenteerde format door te geven aan het front-end component
We zorgen ervoor dat we met deze manier geen afhankelijkheid hebben van elkaars werk. Dit heeft als resultaat dat we beide kunnen ontwikkelen aan dezelfde website, zonder bij één van de disciplines het ontwikkelproces te vertragen. Dat bevordert aan beide kanten het werkplezier!
