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

• Timber Documentation
• Timber Intro
• Tutsplus’s Wordpress + Twig Learning Guide
• Timber and Twig Reignited My Love for WordPress from CSS-Tricks.com

Next Step

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

Therefore, I want to demonstrate how to leverage modern technologies like Gulp and Twig so that WordPress Theme development is cleaner and smoother.

Note that I am definitely not an expert here. I am only trying to explain my experiences in becoming a better WordPress developer. Reading documentation is crucial, but almost equally as important accounts from people who tried similar things as what I’m trying to do, even if the post is a few years outdated and/or not the best solution. For me, its all about perspective!

My Intent

Ultimately, I want to do less PHP and focus more on front end development, usability, and Even though WordPress is PHP based, I am going to use NodeJS and Gulp to compile and manage my CSS and JS assets. I will use Zurb’s Foundation for my front end framework to assist in my layout and presentation, and Timber, which will let me create Twig templates.

I am assuming anyone reading this post is familiar with SASS, Twig, and the importance of modular web design.

HTML

First, lets make HTML development easier with Timber and Twig. Twig is whats called a Template Engine, and its a way to marry the structure of a webpage to it’s data, or content. Timber is a plugin that allows Twig to be used with WordPress.

See WordPress Development with Twig and Timber

CSS

Then I’ll show how I organize and isolate my styles, and use Gulp and a CSS preprocessor (like SASS) to compile those styles into a single CSS file. Also, I’ll demonstrate how to use SASS to customize a CSS Framework like Bootstrap or Foundation.

See Leveraging SASS in WordPress Development and Customizing Foundation for a WordPress Theme

Javascript

Finally, I’ll use Gulp again to manage, compile, and minify my Javascrript assets. I like having separate Javascript files for each widget / component found on the site, then compiling those files into a single scripts file.

(Blog post coming soon)

My motivation here is to demonstrate how I use the work of others to improve my own WordPress development and create some sense of modularity. I haven’t discovered anything unique here, I am simply showing how to use existing tools like Gulp and Twig to improve my WordPress development.

Let me explain….

In my WordPress development experiences, ambiguity is a recipe for disaster. Yes, ambiguity is a factor in any project, but it seems to be much less manageable on WordPress projects. Unless the design of a website has been fully flushed out – all the layouts, all the content containers, all the look and feel of buttons and form inputs – unless all of that has been flushed out and agreed upon by the client before any code is written, the project will face ambiguity. Sure, part of my job as a developer is to be able to handle that ambiguity gracefully. I have to be flexible, and build the project carefully, and anticipate changes that might come in the 11th hour of the project. However, I’ve always found it difficult to be flexible in WordPress projects.

I often wonder is it possible to build a WordPress site using a modular design approach?

Modular Programming

As a kid, I liked building with Lincoln Logs and Legos¹. I like building one piece at a time, then merging the independent pieces at the end. I like to build websites in a similar way. By breaking a website project down to a group of independent modules (such as navigation, form elements, article layouts, etc.), I create the flexibility needed to anticipate changes in the design, or unforeseen UI/UX hiccups that no one considered when the project started.

I avoided WordPress for the longest time because it was just too time consuming to make a site flexible enough to evolve over time. Most of my WordPress development was fixing broken elements, cleaning up code bloat, or scrapping hours of work and starting from scratch after the client suddenly decided to do something different. Sometimes I would spend months developing a site only to have it break a few weeks after launching because of some automatic update, or the client tried to do something I didn’t anticipate. These are common obstacles when developing any website, but when dealing with WordPress, these obstacles were a nightmare. WordPress development did not feel like building with Legos, it felt like trying to stay afloat in a sinking ship.

My point is, WP is a great tool when working with small websites, but its difficult to do unique and creative work, which isn’t fun. I’d like to continue using WordPress, given its popularity, but I also want to enjoy performing the work I do, and thats difficult to do when using WordPress. Specifically, as a developer using WordPress, I find it difficult to:

– Manage CSS, both global styles and page/widget specific styles.
– Manage script and style includes. I mean, why should I have to load assets for Contact Form 7 on every page if theres only one page containing a form?
– Create and extend page templates. I’m an HTML enthusiast. I don’t want to drown in a bunch of PHP templates and functions and hooks just to get the HTML I want.
– And don’t get me started on custom fields and custom post types. I am so grateful for plugins like ACF and CPT because I still have nightmares about trying to create custom WP sites without those tools.

I could go on and on here. I don’t mean to complain, all content management systems are quirky and no CMS will please everyone.

WP is constantly improving, and most importantly, is free. For that I am thankful. However, given the popularity of WordPress, I cannnot avoid it, and that makes me frustrated. I am a Front End Developer. I want to write clean HTML, Javascript, and CSS, and build useful web interfaces that create value for my clients. I like PHP, but I don’t want to live in it. Can I do that using a CMS that is also easy to use for the end user? I am sure I am not the only front end developer who wonders about a better developer-friendly way of working with WordPress

Further Reading and References

About Using Modular Approach in Front End Development

• Learning from Lego: A Step Forward in Modular Web Design
• Modular Web Design: The Age Of “Templates” is Over
• Modular Web Design: Building a Website that Grows with Your Business
• Modular Web Design: Faster, Cheaper & Better Than Ever

Find a Better Way

I certainly don’t mean any disrespect to WordPress. In fact, I hear WordPress 5.0 is about to be a thing, so I look forward to learning a new generation of WordPress.

For now, I wish to present my current WordPress setup. I have learned how to leverage Gulp and Twig to aide in my WordPress development, and I wish to share that. Stay tune…