Since talking about WordPress templating, I’ve covered some different engines that are available:

If you’re looking at Mustache, then you may be interested in Handlebars, and if you’re looking at Blade, then I highly recommend checking out Sage from the Roots team.

WordPress Templates: Sage

But for this final post, I’m going to continue with Timber which is what I introduced yesterday. I’m not so much about which is being used (as they all have their tradeoffs) as long as it’s consistent.

WordPress Templating: Using Timber

With that said, here’s how you can get started using Timber in your projects.

WordPress Templates: Timber

To get started, you’re going to need to be familiar with Composer, and you’re going to need to have a local development environment setup. If you don’t have either of these or need help, then I’ve got you covered:

  1. Using Laravel for WordPress Development
  2. Configuring Composer for WordPress

Once you’ve gone through the steps in each of those guides, you should be good to go. So here’s what we’re going to do.

1. Setup a Local Installation for Timber

I’m going to be using Valet for this which means I’m going to have a directory with the latest version of WordPress (which is 4.8.3) installed in its directory.

This means I’ll have a database already ready to go:

WordPress Templates: The Database

And I’m going to have issued the following commands to setup Laravel and a secure installation (to mimic a staging environment):

$ valet link
$ valet secure

So that I can access the site in a browser.

WordPress Templates: WordPress

For those who are curious, I’m using:

And no other plugins. It’s just a vanilla installation other than what you see above.

At this point, I’m ready to install Timber.

2. Installing Timber

Assuming you followed the guides above for Valet and Composer, you should be good to go. So using a terminal, navigate to your WordPress installation directory.

WordPress Templates: Installing Timber

Then issue the following command:

$ composer require timber/timber

WordPress Templates: Installing Timber with Composer

This will install Timber, but you’ll still need to update your theme’s functions.php file so that it properly uses Composer’s autoloader.

WordPress Templates: Adding the Autoloader

Assuming everything has gone correctly, you should be able to refresh your site, navigate to any posts, pages, and so on and nothing should be out of order.

3. Initializing Timber

Finally, it’s time to use Timber to replace much of what we’re used to seeing within the context of a WordPress template.

I’m opting to do this within content-page.php to make it easy to follow. Note that the segment of code I’m changing originally looks like this:

In this post, I’m not going to be completely re-creating what you see above, but I am going to get started with what’s needed to start using a templating engine within the context of a PHP foundation.

First, you’re going to need to create a template that can be applied to the sample page in a standard WordPress installation. I called mine template-timber-page.php and it looks like this:

In the above code, here’s what’s happening:

  1.  I am instantiating the Timber object.
  2. Then, I’m getting a Timber context. The context contains a lot of information that’s useful within the template (or the site) depending on where you’re using your template.
  3. After that, I’m grabbing a TimberPost which is essentially an extension of a WordPress post. It has the data of WP_Post but makes it available to our templates.
  4. Next, I set the post index of the $context array with a reference to the Timber Post (which I’ve called $post).
  5. Finally, I tell Timber to render a page called content-sample-page.twig using the given context.

This is where it’s important to create the actual twig file (which is the extension of the Timber template file). So I created content-sample-page.twig and it looks like this:

After instantiating the Timber object and then replacing the code you see above, you’ll notice that the code reads a little bit differently (though not altogether hard to follow).

4. Applying The Template

To apply the template, navigate to Pages in WordPress. Locate Sample Page then, in the template dropdown, choose the one we just created using the title above:

WordPress Templates: Selecting the Template

Once that’s done, you can view the post. You’ll notice that it looks a bit naked in comparison to what we’re used to seeing:

WordPress Templates: An example Template

But you get the general idea as to how we’re able to use the context to access many of the same properties that we’re used to seeing within WordPress without having to litter the code with markup and PHP and whatever else we’re used to using.

More Resources

I know this is predominately a crash course in templating and it doesn’t cover near as much as it could. As this post approaches 1000 words, I need to draw the line somewhere, so I’m opting to do so here.

This doesn’t mean I’m done discussing it, though. I plan to return to more advanced topics around templating in future pots.

But if you’re interested, I highly recommend following both the Getting tarted guide for Timber and the project on GitHub.

This will at least give you a starting point from which you can make even more progress in your efforts to create cleaner, more logically separate code than what we’re used to seeing in WordPress.

Category:
Articles
Tags:
,