Creating WordPress Themes with Timber and Twig: A Modern Approach

Creating WordPress Themes with Timber and Twig: A Modern Approach

Building themes for WordPress has always been relatively straightforward, but that simplicity often comes at a cost. The traditional way of developing WordPress themes means blending logic and layout in messy PHP files, making code harder to maintain, scale, or hand over to other developers.

If you’ve ever tried to update a theme you built six months ago and found yourself asking “what was I thinking?”, you’re not alone. Thankfully, there’s a cleaner, more structured way to create WordPress themes. Enter Timber and Twig: a dynamic duo that allows you to build modern, maintainable WordPress themes using clean templates and clear separation between logic and layout.

What is Timber?

Timber is a WordPress plugin and framework that lets you build themes using Twig, a templating engine originally created for the Symfony PHP framework. Instead of writing all your theme logic directly in PHP templates like index.php or single.php, Timber allows you to treat these files as controllers and pass the data to separate Twig templates for rendering.

This keeps your theme code much cleaner and improves the overall development workflow, especially when working as part of a team or handing over projects to other developers.

What is Twig?

Twig is a modern, fast, and secure templating language for PHP. It separates your logic from your design, giving you a way to write HTML layouts with placeholder variables and logic that is far easier to read than embedded PHP.

If you’re familiar with templating languages like Handlebars, Liquid, or Blade (Laravel), then Twig will feel familiar and intuitive. It’s designed to be easy for both developers and front-end designers to work with.

Why Should You Use Timber and Twig in WordPress Theme Development?

If you’re still wondering whether it’s worth moving away from traditional WordPress theme development, here are several compelling reasons:

1. Clean Separation of Concerns

Timber encourages you to separate your theme logic (PHP) from your templates (Twig). This means less mixing of code and markup, which ultimately makes your themes easier to understand and maintain.

2. Better Collaboration Between Developers and Designers

Because Twig templates are clean and contain very little logic, front-end developers or designers who understand HTML and CSS can work comfortably in the template files without worrying about breaking complex PHP code.

3. Improved Code Reusability

With Twig, you can easily create partials and components such as headers, footers, cards, and modals that can be reused throughout your theme. This reduces duplication and helps maintain consistency across your pages.

4. Faster Development Workflow

Once you’re familiar with the structure, you’ll find that building and editing themes is significantly quicker. You’ll spend less time hunting through tangled PHP logic and more time focusing on building great websites.

5. Easier Scaling and Maintenance

Timber’s approach makes it easier to scale your themes and onboard other developers, especially in agency settings or long-term projects. Having clearly separated, readable code is key when working on larger or evolving websites.

How a Timber Theme Works

When building a theme with Timber, each template generally follows the pattern of:

1. A PHP file (acting as a controller) that gathers data
2. A Twig template that renders the data into HTML

Example

single.php

$context = Timber::context();
$context['post'] = Timber::get_post();

Timber::render('single.twig', $context);

single.twig

{% extends "base.twig" %}

{% block content %}
  <h1>{{ post.title }}</h1>
  <div>{{ post.content }}</div>
{% endblock %}

This simple example shows how much cleaner and readable your template files can be when using Twig.

Installing Timber and Setting Up a Project

To start using Timber and Twig in your theme, follow these basic steps:

1. Install Timber via Composer

You can install Timber using Composer. If you’re building a custom theme and want to manage dependencies properly, this is the recommended approach.

composer require timber/timber

If you’re not using Composer in your theme yet, this is a great time to start.

2. Activate the Timber Plugin

Timber also comes as a WordPress plugin. You can install it directly via the WordPress dashboard or include it as part of your theme with a Composer autoload.

3. Set Up Your Theme Structure

Your theme should be structured in a way that separates logic (PHP) from presentation (Twig). Here’s a sample structure:

/my-timber-theme
├── functions.php
├── style.css
├── index.php
├── single.php
├── archive.php
├── templates/
│   ├── base.twig
│   ├── single.twig
│   ├── archive.twig
│   ├── partials/
│   │   ├── header.twig
│   │   ├── footer.twig

4. Start Passing Context to Templates

Use Timber::context() to get the global context, add your own custom data, and pass it to the render function.

$context = Timber::context();
$context['custom_field'] = get_field('custom_field_name');
Timber::render('page.twig', $context);

Twig Syntax Basics for WordPress Developers

Twig uses intuitive syntax that is both easy to read and safe by design. Here are a few examples comparing PHP with Twig:

Task	PHP	Twig
Echo a variable	<?php echo $title; ?>	{{ title }}
If statement	<?php if ($title): ?>	{% if title %}
For loop	<?php foreach ($posts as $post): ?>	{% for post in posts %}
Include a file	get_template_part('header')	{% include 'partials/header.twig' %}

Advanced Use: ACF Integration

Timber works beautifully with Advanced Custom Fields (ACF). You can fetch fields in your controller and pass them to Twig:

$context['hero_image'] = get_field('hero_image');

Then, in your Twig template:

<img src="{{ hero_image.url }}" alt="{{ hero_image.alt }}">

This makes building flexible, client-editable sections a breeze.

Best Practices When Using Timber

• Use a base.twig layout to define your site-wide HTML structure and extend it in each page template.
• Create reusable components in a /partials or /components folder.
• Limit logic in templates. Templates should only render data, not manipulate it.
• Use Composer for dependency management. This makes your theme setup more robust and portable.
• Document your structure. If you’re working in a team, having clear documentation helps others follow your approach.

Final Thoughts

Timber and Twig represent a major upgrade to traditional WordPress theme development. By separating logic and layout, improving code readability, and allowing for better reuse of components, you can streamline your workflow and build themes that are faster to develop and easier to maintain.

If you’re building websites professionally, whether as a freelancer or as part of an agency, adopting Timber is one of the best decisions you can make to modernise your development stack.

Resources and Further Reading

• Timber Documentation
• Twig Templating Engine
• ACF + Timber Guide
• Starter Theme with Timber

Need help implementing Timber in your WordPress projects?

At Silk Media, we specialise in building modern, scalable websites using best practices. Get in touch if you’d like to explore how Timber and Twig can simplify and enhance your WordPress development workflow.