As I was tired of seeing so many badly developed WordPress themes where the code was not sustainable, the understanding of it took a long time and moreover it was filled with procedural code that was not even organised properly, I was looking for a solution to separate the HTML code completely from the PHP one in a WordPress theme.
This has several advantages including:
- Your templates look cleaner and are easier to maintain by the front-end developers. No more messy PHP code within HTML tags!
- All the templates are organized in one location and updating them (even with a WYSIWYG editor) is much easier
- All the logic/parsing of the information, database fetching is done in the PHP code.
Besides using functions.php and other common files to store the PHP code, I strongly recommend using PHP classes (OOP approach) to manage a theme. It can save you time and, again, you have everything kept in an organized place.
After some research, I found Timber, a WordPress plugin, that is becoming more and more popular, powered by a modern template engine for PHP, called Twig.
This fast, secure and flexible template engine is brought to you by Fabien Potencier, the creator of the Symfony framework. Twig is released under the new BSD license.
Back to Timber, I’d like to show you some examples of how the logic is separated from the presentation.
single.php
$context = Timber::get_context();
$context['foo'] = 'Bar!';
$context['post'] = new TimberPost();
Timber::render('single.twig', $context);
single.twig
{% extends "base.twig" %}
{% block content %}
<h1 class="big-title">{{foo}}</h1>
<h2>{{post.title}}</h2>
<img src="{{post.thumbnail.src}}" />
<div class="body">{{post.content}}</div>
{% endblock %}
As you can see “post” is assigned to the template and from there its values are printed. Here’s another example of showing a featured image the old way:
<?php $thumb_id = get_post_thumbnail_id($post->ID); $url = wp_get_attachment_url($thumb_id); ?> <img src="<?php echo $url; ?>" alt="Thumbnail for <?php echo $post->post_title; ?>" />
To do the same in Twig, while looping through the posts, you can use only one line:
<img src="{{post.thumbnail.src}}" alt="Thumbnail for Timber" />
Yes, MVC WordPress Theme development can be confusing in the beginning if you were used to coding the old way, but trust me, once you get used to it and see how powerful it is, you will not go back to the old style again when developing WordPress themes and PHP projects in general.
Note that popular PHP frameworks are using the MVC approach for a reason. If WordPress doesn’t offer this by default, then why not implementing it ourselves?
Well, that’s ok if you are developing a theme for yourself, but then if this is a publicly distributed template, and you are the guy who will have to deal with it and develop the actual website, you might have an hard time when trying to add some custom functionality.
you will have to do quite a bit of reverse engineering in order to understand how each class and method are set up (not to mention adorable abstractions..), and how would you be able to add some functionality which is needed in your development.
and this will be quite an hassle even if the theme is well coded and it has support for smart hooks and actions, and overridable functions (which we all know it’s not always granted..)
while surely less elegant, the “old way” would instead allow for a quick understanding of each page functionalities, so that if you want to change or add something to single.php, you just have to go there and read/edit that code, or eventually check function.php if you bump into a custom function and you don’t know exactly how it works.
but then obviously, if you are developing a theme which will be used by you to develop websites that then will be maintained and improved by yourself, then the Object Oriented approach is the cleanest and easiest to maintain, especially if you work within a team of developers.
Thanks for sharing this OOB approach. I just retired from IT Management after 30 years and am still learning WP. One of the most important aspects of all coding, designing, and creating projects is to separate the building blocks for minimizing maintenance in the future and for having a well structured plan that others can share the same methodology. And, you’ve done this. Whether a person chooses to create their own theme or not, this is a very well explained approach that illustrates a well manageable path.