Making WordPress great again met Timber

WordPress is al een tijdje het populairste CMS. Ook aan onze klanten raden we meestal WordPress aan omdat het zo gemakkelijk is in gebruik. Maar out-of-the-box biedt WordPress een gedateerde technische setup. Daarom maken we de laatste jaren gebruik van Timber voor onze WordPress sites. Een plugin met héél wat voordelen. In dit blogartikel lijsten we de belangrijkste voor je op. 

Bij Digiti zijn we nog steeds grote fan van WordPress, maar toch zijn er een aantal belangrijke werkpuntjes. WordPress dwingt je bijvoorbeeld om logica en opmaak te combineren. In de meeste thema’s vind je een query voor posts op te halen in het midden van je HTML code. Wie houdt daar nu nog van in het tijdperk van template frameworks en “separation of concerns”?

timber voor wordpress 1

Al gehoord van Timber?

Daarom maken we sinds enkele jaren gebruik van Timber voor onze WordPress sites. Wat is Timber? In essentie is Timber een WordPress plugin die de populaire Twig templating engine naar WordPress brengt. Timber helpt je om sneller, duurzamere code te schrijven.

Je kunt Timber verkrijgen als plugin of als composer package. Er zijn ook wat starter thema’s beschikbaar die je snel op weg helpen. Zet jezelf alvast in de startblokken via deze documentatie: https://timber.github.io/docs/getting-started/setup/  

Breng een MVC-achtige structuur in je thema

Timber brengt een MVC-achtige structuur in je thema. Niet helemaal MVC omdat je “controller” geen echte controller is maar een file met slechts één methode.

Model: Timber voorziet een standaard TimberPost klasse, wat een verbeterde versie is van de WP_Post klasse die je zelf kunt extenden.

timber voor wordpress 2

View: Je twig bestand met al je HTML.

timber voor wordpress 3

Controller: De standaard .php template bestanden (index.php, home.php, single-post.php, …) zullen zich gedragen als je controller, je kan je posts hier opvragen en de correcte twig template oproepen.

timber voor wordpress 4

Base templates en partials

Twig maakt het heel gemakkelijk om in je WordPress thema op te splitsen in een basis template die je dan kan uitbreiden per pagina.

In je base template kan je alle herhalende componenten (b.v.: hoofdingen, zijbalken, …) bundelen en regio’s definiëren. Nadien kan je deze template uitbreiden in je pagina template en zo al de regio’s verder invullen.

timber voor wordpress 5

 

Lees ook: 5 dingen die je met je website kunt doen, zonder dat je het zelf wist

 

Routing

Aangepaste “routing” nodig? Geen probleem, Timber maakt het eenvoudig om je eigen “routes” te definiëren.

timber voor wordpress 6

 

Eenvoudige thumbnails

De manier waarop WordPress omgaat met thumbnails kan het bloed onder je nagels halen. Bijvoorbeeld wanneer je nieuwe groottes toevoegt en er al een heel aantal afbeeldingen werden geüpload. Ook hier kan je Timber gebruiken om de nodige thumbnail eenvoudig te creëren. Met de “resize” filter zal on-the-fly een thumbnail gecreëerd worden, moest deze nog niet bestaan.

timber voor wordpress 7

 

Lees ook: Hoe wij de mobile user experience van Mobly boosten, met een bottom navigation.

 

Vaarwel nav walkers!

Gedaan met hoofdpijn wanneer je de output van je menu’s probeert te controleren. Timber staat toe je navigatiemenu’s op een verstandige manier weer te geven.

timber voor wordpress 8

 

Lees ook: Is jouw webshop wel veilig?

 

Alle voordelen van Twig

Omdat Timber gebaseerd is op Twig brengt het natuurlijk alle voordelen ervan mee, zoals filters en loop variables.

timber voor wordpress 9

Conclusie

Deze eigenschappen zijn slechts een fractie van wat je met Timber allemaal kunt. Er zijn nog vele andere handige mogelijkheden zoals eenvoudig data cachen en een nauwe samenwerking met Advance Custom Fields (ACF).

Als je werkt aan een WordPress thema en vast zit met de oude WordPress paradigma’s, denk dan nog eens aan deze blogpost en aan Timber. Je krijgt er geen spijt van, beloofd!