A Template Language for WordPress, and more

A Template Language for WordPress, and more

By Jared Novack June 24, 2013

We’re excited to release Timber, a tool for building sustainable WordPress themes with a template language.

A template language separates the complex WordPress PHP calls from the HTML. Designers and front-end developers can work quickly with the clarity of HTML and use variables from WordPress where they need. This dramatically simplifies and speeds-up the theme development process.

Having separate PHP files from HTML also results in cleaner, more re-usable code. We’ve used Timber at Upstatement for the last six months. It dramatically reduces debugging and repetition — so we focus our time making beautiful and high-powered sites for our clients.

Unlike lots of frameworks, Timber is a plugin that lets you use the pieces you need in your theme.

View on GitHub
View Project Page

WordPress is awesome, but the_loop isn’t

Timber helps you create fully-customized WordPress themes faster with more sustainable code. With Timber, you write your HTML using the Twig Template Engine separate from your PHP files.

This cleans up your theme code so your php file is responsible just for the data, while your twig/html file can focus 100% on HTML and display.

Once Timber is installed and activated in your plugin directory, any WordPress theme can take advantage of the power of Twig and other Timber features.

The Problem

Over the last several years, we’ve written dozens of WordPress themes for our clients. Each time, we set out to do it “right” this time. Oh it will be glorious! We’ll have neatly organized functions. Our designers can make clean includes that we can use all over the place! Oh, and the code shall be crystal-clear; any developer who comes along later can surely build on-top of it. The joyous future awaits.

But by the end, when design ambitions meet PHP meet real deadlines, we end up with files full of spaghetti code. The closing weeks turn into heartache when a missing ‘?>’ crashes the entire site, or the client decides the sidebar should be populated by a curated list instead of the most popular posts.

Well, that’s how it used to be.

Over the last six months we’ve created a new way of building WordPress themes. We’ve made more sites with more features and less bugs. Timber solves the theme building heartache in a few key ways:

  • Less Mess: Timber cleans up your PHP/HTML with Twig, an awesome PHP template language. This lets you write HTML with WordPress variables and methods.
  • Less Stress: Reduce the weight of your code by using Timber’s object-oriented interface to WordPress’s various functions.
  • Works at your pace: A lot of very promising WP frameworks ask you to work entirely in their system (“step 1: throw everything out”). With Timber, you can integrate the pieces you need with existing themes; no need to start from scratch.

Twig Template Language

Twig makes writing HTML with your WordPress variables a breeze. You don’t have to constantly open and close PHP tags which reduces errors and debugging. Front-end designers love the simple syntax that lets them focus on tags and classes instead of PHP.

Here’s a simple example in WordPress:

	

Here’s the same thing, but with Timber:

	

{{post.post_title}}

That’s just the beginning. Twig lets you take advantage of powerful features like loops and template inheritance to clean-up and organize your HTML! (and reduce the amount of PHP you have to write in the first place).

Organized Object-Oriented Methods

Need to get a thumbnail for the current post? No problem, with WordPress you can do something like this:

	$url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
	Thumbnail for <?php echo $post->post_title; ?>

But using Timber’s simple methods you can use:

	Thumbnail for {{post.post_title}}

Which do you prefer?

We’ve created objects for all the WordPress components you commonly use: Posts, Terms, Users, Images, Menus and Comments. For example, let’s say you wanted to list all the terms on a post?

$taxonomies = get_taxonomies('','names'); 
$terms = array();
foreach ($taxonomies as $taxonomy ) {
	$tax_terms = wp_get_post_terms( $post_id, $taxonomy, $args );
	$terms = array_merge($terms, $tax_terms);
}
echo '';

Ay-ay-ay! Okay, let’s try the Timber way:


Use a little, or use a lot

The tools I’ve come to rely on are the tools that evolve into your workflow. I didn’t know I wanted to use jQuery or SASS until I started using them. Bit-by-bit they replaced the ‘old’ ways of doing things until I couldn’t imagine life without them.

Timber lets you start with just a bit. Say you want to just include an HTML snippet with a variable from your database:

/* home.php */
$data['welcome_message'] = get_option('welcome_message');
Timber::render('welcome.twig', $data);
{# welcome.twig #}

{{welcome_message}}

Just that easy. On GitHub, you can watch a step-by-step screencast tutorial showing you how to integrate Timber into your existing theme.

Next Steps

At Upstatement, we’re using Timber in production for major clients. It’s become as much of our technical process as jQuery, Git or SASS. But it’s still a tool very much in-development. We’ll continue to release updates, improvements and new components as we discover them.

We’re looking for other developers and designers to help us try, test, and troubleshoot as we make WordPress theming easier.

View on GitHub
Watch the Video Tutorials

Comments