Will Hall Consulting

WordPress Theming with Timber and Twig - a Quick Introduction

2018-07-12

By Will Hall

Originally written for designspike.com

Timber is a WordPress plugin that lets you use Twig templates in your WordPress theme.

It comes with a starter theme, and it's really straightforward to use. Read below for a quick guide!

Why use Timber for WordPress themes?

If you're a WordPress developer who's new to Twig:

Because Twig is fantastic for writing HTML templates! It's a general template language that is often paired with PHP. It makes writing templates fun and easy. If you know how to use Twig, you can now work on a bunch of PHP projects that don't even involve WordPress!

If you're a PHP developer who's new to WordPress:

Well, you're probably in a tiny minority, and you probably know why Twig is awesome. You know that it helps you separate your logic from your presentation. You know that it has a helpful standard library of functions and filters. You know it has lots of documentation and StackOverflow articles ;) You know it has lots of flexibility and ways of inheriting and including your templates. And you know that most importantly, it keeps you have having to type htmlspecialchars() ever again. Yes, {{ }} is a beautiful thing.

What's Twig like?

Twig is real nice. Just look how easy it is to do basic things like loops, includes, and conditionals.

{# our template will inherit another template #}
{% extends 'base.twig' %}

{# the "content" block to pass to the parent template which we're extending #}
{% block content %}

  {# basic if structure #}
  {% if show_greeting %}
    <h1>Hello, world!</h1>
  {% endif %}

  {# loop through an array #}
  <ul>
    {% for item in mystuff %}
      <li><a href="{{ item.link }}">{{ item.name }}</a></li>
      {# so convenient… #}
      {% if loop.last %}
        <li>last item was up there</li>
      {% endif %}
    {% endfor %}
  </ul>

  {# include a template and limit what it sees #}
  {% include '_article-summary.twig' with {
    article: sample_article,
    author: example_user
  } %}

{% endblock %}

Installing Timber

Timber is just a WordPress plugin, so just search for it in Plugins > Add New, and click the install button. Then activate the plugin.

Installing the Starter Theme

This is pretty easy. Just download the Timber Starter Theme and put it in your wp-content/themes directory.

Now, activate the theme in Appearance > Themes.

Parts of a Timber Theme

There are two broad categories of what you'll be doing in a Timber theme.

*.php files

(Located in wp-content/themes/starter-theme)

Well, these are the plain old PHP files that WordPress runs when you view your blog.

Some things you might do in this folder:

For a straightforward theme, you won't even need to edit these PHP files.

*.twig files

(Located in wp-content/themes/starter-theme/templates)

These are the actual Twig templates! They don't involve PHP at all - they are just a bunch of HTML written with Twig.

Here are the files you may want to edit:

More Resources