One of the main problems in Wordpress is the lack of structure. When I have started to use it I’ve recognized the framework doesn't use MVC as an architectural choice. Instead it's based on another paradigm called event-driven.
Using the event-driven paradigm, we're able to inject or modify blocks of functionality when a certain event happens to our system. It brings the advantage of being extremely flexible. But in IT it's more important to define a structure. So a project will be maintainable, extendable and understandable to others.
Wordpress customization relies on theme creation. It means every custom model view we want to implement will be written within the theme.
The problem about those views is that they are PHP files with HTML markup nested on them. This basically means we're grouping on the same file, parts of the code which handle backend tasks with others that are just used for frontend purpose. In a MVC notation this would mean we're joining view and controller on the same file.
The result is that the code isn’t easily readable. It's difficult to debug and we don't have a clear place to add our functionality.
Also, we're all the time rewriting blocks of code in order to include common parts of the views like header, footer or sidebar sections. This crosses a fundamental coding principle DRY, don't repeat yourself!
Let's bring in the modern approach: Make use of template engine, template inclusion, url routing, object oriented code, template caching, javascript and css compression, debugging tools or deployment tools... For this there are two main ideas I would like to talk about.
The first section is Bedrock. It's a modern Wordpress stack using Composer for dependency management. Along that, Capistrano a ruby based tool is offering methods to automate and improve your deployment process.
The second section is the roots starter theme. It's written in native Wordpress syntax but with interesting default features.
The theme is based on HTML5 boilerplate. So all of your initial templates will have already integrated HTML5 syntax. It integrates a less bootstrap library as a CSS framework and the use of NodeJS modules to achieve several tasks is special on this. It uses Bower as a package manager and Grunt as a task runner.
Meaning that with a few terminal commands we'll be able to install all the used libraries like bootstrap.
We could also setup a watcher that will observe your changes on javascript and less files and will compile all of them into one minified CSS and one uglified javascript file. Those will be the only ones included in your production installation with the performance benefits that this brings.
The last thing here is the theme wrapper. It brings by default a good way of including template files within another, this will save you a lot of time, too.
Rather than having to include your header and footer in all the pages, the theme wrapper will create a base template where all others custom templates will be included into the content area.
Timber is an object oriented library with the shape of a Wordpress plugin. It will give you a huge set of functionality on top of Wordpress with just little costs on performance.
One of the coolest things is that it integrates Twig a template engine being similar to Mustache. The difference is that twig has logic conditionals. For the fact that Timber introduces a template engine makes it is worth using it.
<?php $thumb_id = get_post_thumbnail_id($post->ID); $url = wp_get_attachment_url($thumb_id,'small-image'); ?> <img src="<?php echo $url; ?>" alt="Thumbnail for <?php echo $post->post_title; ?>" />
<img src=" {{post.thumbnail.src|resize(200,200)}} " alt="Thumbnail for {{post.title}}" data-mce-src="{{post.thumbnail.src|resize(200,200)}}">
Good uh? And this is just one example. The amount of code saved by the use of timber is huge.
In addition to that, it brings back one of the best concepts of MVC pattern. The separation between controller and views. Like this, frontend developers can focus on what really matters for them and backend developers can do their work with a fully PHP syntax.
Another great features of Timber are: Integration for advanced custom fields plugin, caching, debugging, image manipulation, custom menu loops, pagination, routing, text manipulation and widget integration within other features.
Personally I’ve used both and I don’t think on starting any new project without them. If you like more a classic Wordpress style in your coding I would recommend roots. Instead, if you really want to innovate and get closer to how most of modern frameworks are now structuring their code I think Timber is for you. The gain using any of both is out of question.
In future posts we’ll get more into the topic discussing some specific parts of them. Stay tuned!
