WordPress has long been the go-to CMS for developers and designers, but its traditional PHP-based templating system can sometimes feel outdated and cumbersome.
Enter Timber, a powerful templating framework that brings the flexibility and clarity of the Twig templating language to WordPress. With Timber, developers can separate logic from presentation, leading to cleaner, more maintainable code.
All my previous websites were entirely built using Timber, as it provided a structured and efficient way to develop themes. I still prefer Timber for crafting fully custom and clean theme templates, as it allows for better separation of logic and presentation, resulting in more maintainable and scalable projects.
And yes there still exists a life outside Elementor, Bricks Builder and all the other wonders of the page builder guild :)
What is Timber?
Timber is a WordPress plugin that integrates the Twig templating engine, allowing developers to create themes using a more structured, readable syntax. By abstracting away the PHP-heavy templating system of WordPress, Timber enables a modern, component-driven approach to theme development.
Why Use Timber?
- Separation of Concerns – Keep your theme logic out of your template files, making it easier to read and maintain.
- Cleaner Code – Write less PHP and more readable HTML-like syntax.
- Improved Development Workflow – Work in a more structured and modular way, akin to modern frontend frameworks.
- Better Reusability – Use partials and blocks to make your templates more modular.
- Faster Development – Spend less time managing complex PHP logic in templates.
Getting Started with Timber
Installation
Installing Timber is straightforward:
1 – Install the Timber plugin via the WordPress Plugin Repository or through Composer:
|
1 2 3 |
composer require timber/timber |
2 – Activate the plugin from the WordPress admin panel.
3 – Modify your theme to use Timber by creating .twig templates.
Basic Usage
A traditional WordPress template file like single.php might look like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php get_header(); if (have_posts()) : while (have_posts()) : the_post(); the_title('<h1>', '</h1>'); the_content(); endwhile; endif; get_footer(); ?> |
With Timber and Twig, the same logic is much cleaner:
single.php:
|
1 2 3 4 5 6 |
{% include 'header.twig' %} <h1>{{ post.title }}</h1> <div>{{ post.content }}</div> {% include 'footer.twig' %} |
This approach makes it easier to separate logic (PHP) from presentation (Twig), leading to a more maintainable and scalable theme structure.
Advanced Features
Context and Global Data
Timber provides a context system that makes it easy to pass data to templates. You can extend the $context variable with additional data, such as:
|
1 2 3 4 |
$context['menu'] = new Timber\Menu(); $context['sidebar'] = Timber::get_widgets('sidebar-1'); |
Reusable Components with Partials
Timber allows the use of Twig includes and extends for modular templates. For example, you can create a header.twigfile and reuse it across multiple templates:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<header> <h1>{{ site.name }}</h1> <nav> <ul> {% for item in menu.items %} <li><a href="{{ item.link }}">{{ item.title }}</a></li> {% endfor %} </ul> </nav> </header> |
Custom Post Queries
Timber makes it easy to work with custom queries. For example, to fetch the latest posts and pass them to a Twig template:
|
1 2 3 4 5 6 7 |
$context['latest_posts'] = Timber::get_posts(array( 'post_type' => 'post', 'posts_per_page' => 5 )); Timber::render('home.twig', $context); |
Then in home.twig, you can render the posts simply:
|
1 2 3 4 5 |
{% for post in latest_posts %} <h2><a href="{{ post.link }}">{{ post.title }}</a></h2> {% endfor %} |
Timber is a game-changer for WordPress developers who want a cleaner, more modern approach to theme development. By leveraging the power of Twig, it allows for better code organization, separation of concerns, and reusability. Whether you’re a seasoned developer or new to WordPress theming, Timber can dramatically enhance your workflow and make your themes more maintainable.
