Data Driven WordPress Templates

Posted on July 26, 2017

WordPress is a flexible platform in that you can write code literally however you want and still get something out on the screen. As your development skills evolve however you should be looking to automate and abstract where it makes sense to do so. One way you can do that is by separating your “logic” code from your “view” code.

The best way to do that is with the Timber plugin. It utilizes the Twig templating language to parse your markup. Just using this by itself (they have a starter theme for you to get your feet wet) is a tremendous step in the right direction. However, you can take it one step further. In this article I will show you how to use classes and introspection to automate displaying a template file and passing data to it.

Setting Up

For this article I threw together the most barebones WordPress theme imaginable. It literally is just style.css and index.php right now! We’re going to add to it though. I’m going to start by creating a “views” folder. This will hold our Twig templates. I’m also going to create a file in the theme’s root directory called “template-master.php”. If you’re following along it should look something like this:

Putting Everything Together

I’m not the greatest at naming things. The idea behind “Template Master” is that this will provide the structure to most every template you’re going to create going forward. What we need it to do is when it is invoked by a child class grab all of the child class’s methods ( each one of those methods will be querying or formatting data ) and then compile that into a single array to pass to the Twig file. To automate things we will set up the Template Master to look for a Twig file based on the name of the child class. So if your child class is named Template_Foo we want Template Master to look for “views/template-foo.twig”. Here’s a visual representation of what we’d like to achieve:

Creating the class

Let’s get to it! Open up “template-master.php” and start your class out like this:

You’ll notice a few public properties available to the class. You’re going to use these throughout the methods in Template Master. $template_file will hold the properly formatted file name for the Twig file that we’re going to get from the child class. $cur_class is where it will get the name of the child class from. $obj_id is passed into the class when the child class is instantiated so we have access to the page ID, post ID or what have you of whatever template we are working with. Let’s build our constructor method now to set these properties up.

You’ll see that I created a method specifically for getting the template path since that is more than a line of code. Essentially what it’s doing is utilizing the WordPress sanitize_title function then replacing underscores with hyphens. Ultimately it returns an absolute path to the template file in the views folder.

Creating the Child Class

Now that we have some properties set up we need to create a child class to invoke Template Master. Let’s set up a template for the homepage. Create a file called “front-page.php” in your theme’s root directory. Inside fire up a class called Front_Page.

That’s all we need for now. You’ll notice it’s extending our Template_Master class. The “global $post” line gives us access to the post object for the homepage so we can pass the ID to the class for getting data in the future. Before getting too far at this point we need to create the “functions.php” file for our theme so we can actually include the Template Master class. ( We aren’t getting fancy with autoloading here in this basic example 😉 )

Rendering the Twig Template

Now that we have the child class created and it’s extending the Template Master it’s primed and ready to try and load “views/front-page.twig” since the name of the child class is “Front_Page”. Go ahead and create “front-page.twig” inside your views folder. You don’t have to put anything special in there just yet. Let’s go with “Hello world.”.

Back to the template-master.php file we need to inform our constructor to fire up a method to load our template. To do that we will make a “render” method and call it.

You’ll see here pretty simply we’re passing $template_file to Timber along with an empty array. We’ll fill that array with something next. In the meantime if you go to your homepage in WordPress you should see “Hello world.”.

Sending Data to the Template

Now that we have a template file rendering we can collect data from the child class’s methods and send it through Timber. To accomplish this we will add a get_data method to our Template Master. This will accomplish three things: Get the child class methods, skip over methods that aren’t relevant, and then call the methods that are and store them in an array. Let’s take a look:

Notice how the constructor was modified to add a call to the get_data method. That is then passed to the render method which was updated to accept it as a parameter. That parameter is then passed to the Twig template.

Breaking down the get_data method the get_class_methods() function will get all classes in both the Template Master and child classes. Because of this we want to omit certain methods which don’t pertain to retrieving data relevant to the template at hand. To do this we put together an array of methods we don’t want to include. Next we loop through each method. If it’s in the array of methods to omit then we skip that iteration of the loop. Otherwise we are good to call that method, get the returned value of it and pass it to the data array we are building. The name of the method is used as the array key in the data array.

Let’s bring everything full circle by modifying our Front_Page class to pass some data to front-page.twig:

Next open front-page.twig and change “Hello world.” to “Hello {{text_string}}.” Now when you go back to your homepage it should still say “Hello world.” but now you can change the return value of the method text_string to anything.

That’s really it! You can now create any template, extend Template_Master and pass it data.

Final Code

Here is what the final code ends up as:



 

The Possibilities

The great thing about this setup is it allows you to lower your code foot print. Firing up a brand new template is quick and easy you literally just create a class and call it. Template Master takes care of the rest. Let’s say you want to build a homepage out for a small business website. Your methods in Front_Page might be:

Each method would return a different set of options for a different section of the homepage. You could then call it in your Twig template like {{hero.background_image}} depending on how you set it up.

Room for Improvements

This being a super basic example there are of course room for improvements. Particularly setting it up in a way that you can overwrite Template Master values from the child class. Think of needing to set a different template filename than the child class’s name.

I hope this tutorial was useful to you and allows you to improve and automate your WordPress theme development!