I got to admit, I was very very excited when I finally discovered Timber, a tool that creates the ability to use Twig templates with WordPress. As a front-end developer, using Twig templates allows me to focus more on the HTML I need to create. It frees me from polluting my templates with random PHP functions, and I can create reusable template snippets that I can use in other projects. To put in another way, Twig allows me to abstract PHP and server-side code out of my HTML templates so that I can focus better on the markup I need to develop. I’m not scared of PHP – I just don’t want to think about it when I’m working on client-side markup.

Without Twig, here is the code you need to write to display an image:

$thumb_id = get_post_thumbnail_id($post->ID);
$url = wp_get_attachment_url($thumb_id);
<img src="<?php echo $url; ?>" alt="Thumbnail for <?php echo $post->post_title; ?>" />

And thats just for a thumbnail image. Imagine using this code to show a gallery of images, or if you had to use a srcset attribute to ensure the appropriate image gets loaded, given the user’s screen size.

With Timber, that code now looks like:

<img src="{{post.thumbnail.src}}" alt="Thumbnail for {{ post.title }}" />

Much cleaner and concise, yes? Ref: https://www.upstatement.com/timber/#object-oriented-posts-etc

Getting Started

Getting started with Timber was way easy. I followed the steps in “Setup” tutorial with no problem – I love tools that come with clear and unambiguous instructions.

The first time I installed Timber, I installed the plugin found on WordPress.org, Then I downloaded the Timber starter theme so I could begin to play with the templates. No other configuration was necessary.

Useful Links

Next Step

Next Step is to invite NPM and Gulp into our theme and start compiling our styles with SASS!