WordPress Themes using Tinder TIMBER

With Sam Brook @webwaldo

Hope your still interested

What I will cover

  • What is Timber
  • Features
  • Examples
  • Bonus bits I liked
  • Disadvantages 
  • Summary

Timber helps you create fully-customized WordPress themes faster with more sustainable code.

With Timber, you write your HTML using the Twig Template Engine, separate from your PHP files.

~ http://upstatement.com/timber/

Provides Twig templating language

http://twig.sensiolabs.org/

Twig with blocks

<!DOCTYPE html>
<html>
    <head>
        {% block head %}
            <link rel="stylesheet" href="style.css" />
            <title>{% block title %}{% endblock %} - My Webpage</title>
        {% endblock %}
    </head>
    <body>
        <div id="content">{% block content %}{% endblock %}</div>
        <div id="footer">
            {% block footer %}
                © Copyright 2015 by <a href="http://domain.invalid/">you</a>.
            {% endblock %}
        </div>
    </body>
</html>

Base Template

{% extends "base.html" %}

{% block title %}Index{% endblock %}
{% block head %}
    {{ parent() }}
    <style type="text/css">
        .important { color: #336699; }
    </style>
{% endblock %}
{% block content %}
    <h1>Index</h1>
    <p class="important">
        Welcome on my awesome homepage.
    </p>
{% endblock %}

Detail Template

Plus loads more

  • Filters
  • Functions
  • Named Arguments
  • Control Structure
  • Template Inheritance
  • HTML Escaping

And plenty more from http://twig.sensiolabs.org/doc/templates.html

Separates  the view from the data/logic

Cleaner templates

More OOish and MVCish

<img src="{{post.thumbnail.src}}" alt="Thumbnail for Timber" />

Bonus Timber methods & filters

Plays nice with ACF

Example coming up...

What does it look like?

Theme Structure

your-theme/
    index.php
    single.php
    archive.php
    404.php
    views/
            index.twig
            single.twig
            404.twig

The Data ( single.php ) 

$context = Timber::get_context(); 
$context['foo'] = 'Bar!'; 
$context['post'] = new TimberPost(); 
Timber::render('single.twig', $context);

Add data to the context

The View ( 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 %}

Output data based on the context

Plays nice with ACF

<h1 class="text-center">
    {{post.feature_title}}
</h1>
<h2 class="text-center">
    {{post.get_field('feature_intro')}}
</h2>

Basic text fields

ACF Repeater

{% for item in post.get_field('featured_blocks') %}
    {% set featuredPost = TimberPost(item) %}
    <div class="col-md-4 col-sm-4">
        <div class="content-box featured-block">
            <header class="featured-block__header">
                {%  if featuredPost.thumbnail %}
                    <a href="{{featuredPost.link}}" class="featured-block__imglink">
                        <img class="featured-block__img" 
                        src="{{featuredPost.thumbnail.src|resize(360, 204, 'top')}}" />
                        </a>
                {%  endif %}

                <h4 class="">{{ featuredPost.post_title }}</h4>
                {%  if item.post_type == 'post' %}
                        <span class="featured-block__date">{{ item.post_date|date}}</span>
                {%  endif %}

             </header>
             <p class="featured-block__intro">{{featuredPost.get_preview(15, false,'')}}</p>
             <a href="{{featuredPost.link}}" class="button featured-block__linkbutton">Read More</a>
        </div>
    </div>
{% endfor %}

Resize Filter

 <img src="{{featuredPost.thumbnail.src|resize(360, 204, 'top')}}" />

Resize Filter

Will use internal wordpress re sizing methods to generate a new file on first load, then reference that file next time.

|resize($width, $height = 0, $crop = 'default')

More Resize

<img src="{{post.thumbnail.src|tojpg}}" />
<img src="{{post.thumbnail.src|tojpg|resize(300, 300)}}" />

To jpg

To jpg with sizing

<img src="{{ post.thumbnail.src }}" srcset="{{ post.thumbnail.src | retina(1) }} 1x, 
    {{ post.thumbnail.src | retina(2) }}  2x, 
    {{ post.thumbnail.src | retina(3) }}  3x, 
    {{ post.thumbnail.src | retina(4) }}  4x">

Srcset / Retina

What else?

  • Text Manipulation
  • Taxonomy
  • WP Menu
  • Caching
  • Routing
  • Pagination

https://github.com/jarednova/timber

Disadvantages 

  • Additional view files
  • Different syntax 
  • Working with the context
  • Working with plugins
  • Learning new methods
  • Not part of WP core

Summary

It's worth a go

Timber

By Sam Brook

Made with Slides.com

Timber

  • 1,337

More from Sam Brook