Beef up WordPress Theme Dev with Twig and Gulp

*Icon made by Freepik from www.flaticon.com is licensed under CC BY 3.0

@ericnkatz

presented by

Hi! I'm Eric

Front End Developer.

PHP Developer.

Consultant for Cardinal Solutions

Technology is awesome.

SO...

90s

00s

New CSS features get implemented regularly.

JavaScript is moving to a yearly release cycle.

PHP 7, just around the corner!

WordPress is over

12 years old

As a Front End Dev

Keeping up with the latest && greatest can be difficult

Task Runners?

Atomic Design?

Style Libraries?

So... Twig?

Cleaner markup

Component driven

Developer Experience

Clearer syntax

Twig - Syntax

Twig has 3 forms of tags.

{% ... %} // logic

{{ }} // print

{# #} // comment

{% extends "base.twig" %}


{% block content %}

<h3>Archive</h3>
  
  {# Loop through posts #}

  {% if posts %} 
    <ul class="posts">
      {% for post in posts %}
        <li class="post post-{{ post.ID }}">{{ post.title }}</li>
      {% endfor %}
    </ul>
  {% else %}
    <p>No posts yet!</p>
  {% endif %}

{% endblock %}

Twig - Readability

Dot notation.

{% extends "tease.twig" %}

{% block content %}

  <h2 class="h2">
    <a href="{{ post.link }}">{{ post.title|capitalize }}</a>
  </h2>
  
  <p>{{ post.get_preview(25)|escape }}</p>

  {% if post.thumbnail.src %}
    <img src="{{ post.thumbnail.src }}" />
  {% endif %}

  {% for i in 1..12 %}
    Option {{ i }}
  {% endfor %}

{% endblock %}

Clear helper filters

{% if 'Fabien' starts with 'F' %}

{% endif %}

English reading logic,

comparison functions

and built in filters.

Twig - Readability

    if ( in_array( get_post_type(), array( 'post', 'attachment' ) ) ) {
      $time_string = '<time class="entry-date published updated" datetime="%1$s">%2$s</time>';

      $time_string = sprintf( $time_string,
        esc_attr( get_the_date( 'c' ) ),
        get_the_date(),
        esc_attr( get_the_modified_date( 'c' ) ),
        get_the_modified_date()
      );

      printf( 
        '<span class="posted-on"><span class="screen-reader-text">%1$s </span><a href="%2$s" rel="bookmark">%3$s</a></span>',
          _x( 'Posted on', 'Used before publish date.', 'twentyfifteen' ),
          esc_url( get_permalink() 
        ),
        time_string
      );
    }

    {% if fn('get_post_type') in ['post', 'attachment'] %}
      <span class="posted-on">
        <span class="screen-reader-text">Posted on </span>
        <a href="{{ post.permalink }}" rel="bookmark">
          <time class="entry-date published updated" datetime="{{ fn('get_the_date', 'c')|e }}">
            {{ post.date }}
          </time>
        </a>
      </span>
    {% endif %}

Function

Template

Twig - Component Driven

If all your data is being injected into a template, it means you are no longer tied down to that data source.

<?php

$context = Timber::get_context();

$context['random'] = 'asfsadf';

$templates = array( 'index.twig' );

// inject the $context directly to twig
Timber::render( $templates, $context );

// index.twig

<h1>{{ random|capitlize }}</h1> 
<!-- Renders as: <h1>Asfsadf</h1> -->

This index.twig will always

render as expected when

$data['random'] is passed to it.

Twig - Component Driven

  public static function render( $filenames, $data = array(), ... ) {
    ...

    $output = self::compile( $filenames, $data, $expires, $cache_mode, true );
    $output = apply_filters( 'timber_compile_result', $output );

    echo $output;

    return $output;
  }

Since Twig processes and builds the view of our page for

us.

Twig

Component Driven

We can tie our templates together in parallel to our designed front end patterns.

Yay! Twig!

Let's use it in WordPress!

https://wordpress.org/plugins/timber-library/

Timber

<?php

// single.php

// this essentially becomes a Controller

$context = Timber::get_context(); 
$context['foo'] = 'Bar!'; 
$context['post'] = new TimberPost(); 

Timber::render('single.twig', $context);

Start treating your .php files like controllers in an MVC site
use PHP to generate and alter

content as necessary to feed to

your twig templates