Using Twig with Wordpress

Getting rid of Wordpress frontend means getting rid of overhead like database requests, bad plugin code. Instead we get performant, clean templates and have more control over the frontend.

Over the last years I have worked with a couple of modern CMS platforms and technologies like Adobe CQ5, Craft CMS, Craft Commerce, Zend Expressive, Laravel and so on.

Working with Wordpress again it is painful to look at its templates and  its database design (with all sorts of meta tables, taxonomies and multiple data types like orders, posts, pages, invoices into one single wp_posts table).

That said, I perfectly understand that things are like this for a good reason. This allows a backwards compatibility which allows the use of wide range of plugins. Improving the database structure would render most plugins useless. But speaking as a developer, I want clean code and a fast website and I don't care for backwards compatibility.

So on this website, I am using Wordpress exclusively as a backend as it helps me create posts, pages, upload images etc.

In order to have a modern frontend, I use Dice dependency injector, FastRoute to handle routes and Symfony's Twig Templating Engine.



So I need Twig to being able to get the post, page, image data which I edit in Wordpress. For that I decided to store all of my blogs' content into a single PHP file which returns a static multidimensional array. When I write new posts, or update an existing post, this array needs to be updated or re-generated automagically.

This has disadvantages since I cannot use any other frontend related plugins anymore. But it does give me clean templates and a fast frontend without having to load any Wordpress Core files nor templates nor do I need to query the database.

Let's take a look at one of these Twig templates. This blogs' homepage article listing:

{% for item in post %}
  <article class="post{{ item.id }}" data-id="{{ item.id }}">
    <a href="/{{ item.post_name }}/" title="{{ item.post_title }}">
      <time datetime="{{ item.post_date }}">{{ item.post_date|date('F jS, Y') }}</time>
      <h2>{{ item.post_title }}</h2>
      {{ item.post_excerpt|raw }}
      <p class="read-more">Read more →</p>
    </a>
  </article>
{% endfor %}