Introduction
If you are a WordPress developer, I believe you know the pain of memorizing dozens of function names and parameters. Everyone ends up writing their own functions on top of WordPress API. But locally we’ve a very cool solution available.
Timber
Timber is a library which allows you to write WordPress themes rapidly and have your PHP separated from HTML with the help of the powerful Twig templating engine.
Let’s have a brief look how we can go with Timber
Installation
Installing timber is super easy it’s just matter of a single composer require just cd into your theme’s directory and run the following command
composer require timber/timber
If you don’t like composer or can’t use it for any reason you can still have timber by installing it form WordPress plugins directory.
After installation make sure you are including the composer auto-loader in your them’s functions.php (composer only)
require_once "vendor/autoload.php";
Timber is now ready to be used. Let’s dive in.
The First Page
Now let’s create our first page by creating the following two files
- index.php
- views/index.twig
In the first file we’ll have our PHP logic like getting posts from database or doing anything related to our business and the same file is responsible to render the second file which holds our HTML. let’s see how it looks
index.php
$context = Timber::get_context();
$context[ 'books' ] = Timber::get_posts(['post_type' => 'book']);
Timber::render('views/index.twig', $context);Timber::get_context() allows us to setup the most common data required by views like site title, theme directory URL etc.
Timber::get_posts($args) is same as WP’s query_posts($args) it lets you fetch posts from the database, and it accepts the same arguments array as WP_Query or query_posts() does.
Timber::render() compiles the twig file and renders the resulted HTML.
Now let’s see how we will go with Twig.
views/index.twig
<!doctype html>
<html>
<head>
....
{{ wp_head }}
</head>
<body>
....
{% for book in books %}
<h1>{{ book.title }}</h1>
{% endfor %}
....
{{ wp_footer }}
</body>
</html>In the head tag we are echoing out wp_head which is available to us from the Timber::get_context() call, the same is true for wp_footer on the bottom before closing body tag.
In the middle we’re looping through our collection of books and printing book title in the H1 tag. The book variable is an instance of Timber_Post object where we’ve verity of methods and properties related to our book and Timber is smart enough to read Post’s custom fields and make them available as properties.
Also Read: Secure WordPress website from common vulnerabilities
Lets say we’ve a custom field with the name of price it will be automatically available to us in our view. We can simply write book.price to get the custom fields value.
Layouts
If you’ve ever used any templating engine you will be familiar with Master Pages or Layout Files,
Let’s create a layouts directory in views directory and create a file called base.twig this will be our main layout files all of our views will extend this layout. Let’s see how the code looks like
views/layouts/base.twg
<!doctype html>
<html>
<head>
....
{{ wp_head }}
</head>
<body>
{% block content %}{% endblock %}
{{ wp_footer }}
</body>
</html>When our views will extend this layout file they will override the content block and the content from views will be automatically placed here.
Now that we’ve a layout lets use it in our home page
views/index.twig
{% extends 'views/layouts/base.twig' %}
{% block content %}
{% for book in books %}
<h1>{{ book.title }}</h1>
{% endfor %}{% endblock %}To be continued …
