Since talking about WordPress templating, I’ve covered some different engines that are available:
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.
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:
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:
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.
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.
Then issue the following command:
$ composer require timber/timber
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.
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:
- I am instantiating the Timber object.
- 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.
- 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.
- Next, I set the post index of the $context array with a reference to the Timber Post (which I’ve called $post).
- 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:
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:
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.
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.
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.