Theming WordPress with Timber— Part 1

May 31, 2017 By - Azeem Hassni
    • Introduction

      If you are a WordPress developer, I believe you know the pain of memorizing dozens of function names and parameters. Everyone ends up writing their own functions on top of WordPress API. But locally we’ve a very cool solution available.

      Timber

      Timber is a library which allows you to write WordPress themes rapidly and have your PHP separated from HTML with the help of the powerful Twig templating engine.

      Let’s have a brief look how we can go with Timber

      Installation

      Installing timber is super easy it’s just matter of a single composer require just cd into your theme’s directory and run the following command

      composer require timber/timber

      If you don’t like composer or can’t use it for any reason you can still have timber by installing it form WordPress plugins directory.

      After installation make sure you are including the composer auto-loader in your them’s functions.php (composer only)

      require_once "vendor/autoload.php";

      Timber is now ready to be used. Let’s dive in.

      The First Page

      Now let’s create our first page by creating the following two files

      • index.php
      • views/index.twig

      In the first file we’ll have our PHP logic like getting posts from database or doing anything related to our business and the same file is responsible to render the second file which holds our HTML. let’s see how it looks

      index.php

      $context            = Timber::get_context();
      $context[ 'books' ] = Timber::get_posts(['post_type' => 'book']);
      
      Timber::render('views/index.twig', $context);

      Timber::get_context() allows us to setup the most common data required by views like site title, theme directory URL etc.

      Timber::get_posts($args) is same as WP’s query_posts($args) it lets you fetch posts from the database, and it accepts the same arguments array as WP_Query or query_posts() does.

      Timber::render() compiles the twig file and renders the resulted HTML.

      Now let’s see how we will go with Twig.

      views/index.twig

      <!doctype html>
      <html>
      <head>
          ....
          {{ wp_head }}
      </head>
      <body>
      ....
          {% for book in books %}
              <h1>{{ book.title }}</h1>
          {% endfor %}
      ....
      {{ wp_footer }}
      </body>
      </html>

      In the head tag we are echoing out wp_head which is available to us from the Timber::get_context() call, the same is true for wp_footer on the bottom before closing body tag.

      In the middle we’re looping through our collection of books and printing book title in the H1 tag. The book variable is an instance of Timber_Post object where we’ve verity of methods and properties related to our book and Timber is smart enough to read Post’s custom fields and make them available as properties.

      Lets say we’ve a custom field with the name of price it will be automatically available to us in our view. We can simply write book.price to get the custom fields value.

      Layouts

      If you’ve ever used any templating engine you will be familiar with Master Pages or Layout Files,

      Let’s create a layouts directory in views directory and create a file called base.twig this will be our main layout files all of our views will extend this layout. Let’s see how the code looks like

      views/layouts/base.twg

      <!doctype html>
      <html>
      <head>
          ....
          {{ wp_head }}
      </head>
      <body>
          {% block content %}{% endblock %}
      {{ wp_footer }}
      </body>
      </html>

      When our views will extend this layout file they will override the content block and the content from views will be automatically placed here.

      Now that we’ve a layout lets use it in our home page

      views/index.twig

      {% extends 'views/layouts/base.twig' %}
      
      {% block content %}
          
          {% for book in books %}
              <h1>{{ book.title }}</h1>
          {% endfor %}
      {% endblock %}

      To be continued …

      Comments

      comments

    blog user
    Azeem Hassni

    I write code and i love it. I do write blogs on things which I am passionate about. I love to Explore the internet of things and whats new in web technologies. My topic of Interests include WordPress, Laravel & Magento to name a few.

    Related Posts

    If you develop WordPress projects more often and if you‘re pretty familiar with using Timber Library to create and manage your..

    Google Analytics Alternative