Using Timber to Build Easy To Understand WordPress Themes

+

Ivan Villa

Work at Scribe / Web Design

Free Code Camp Sacramento / Active Member

Outline of This Talk 

• Basics Concepts of Themes
• Introduce Timber Plugin and  it's purpose
• Pros & Cons 
• Who can benefit from using Timber
• Personal Experience(small use)
• Q&A

Wordpress Themes

Backend

Wordpress core application for managing content for the website.

FrontEnd

what the user can see and interact with.

Functionality & Design

(basic Functionality)

Templates, Template Tags & Docs Galore

** Don't Really Need to master PHP Language **

<?php the_author(); ?>

<?php comment_author_link(); ?>

<?php the_title(); ?>

Starter Themes

• Underscores
• Sage
• FoundationPress

Enter Timber

allows you to write your HTML using Twig Template Engine Seperate from PHP

Using Timber

$context = Timber::get_context();
$context['flavor'] = 'Vanilla';
$context['post'] = new Timber/Post();
Timber::render('single.twig', $context);

{% extends "base.twig" %}

{% block content %}

	<h1 class="big-title">{{flavor}}</h1>
	<h2>{{post.title}}</h2>
	<img src="{{post.thumbnail.src}}" />
	<div class="body"> {{post.content}} </div>

{% endblock %}

my-theme/views/single.twig

my-theme/single.php

Cleaner Syntax

<?php
  $thumb_id = get_post_thumbnail_id($post->ID);
  $url = wp_get_attachment_url($thumb_id); 
?>

 <img src="<?php echo $url; ?>" alt="Thumbnail for Timber" />

<?php ... ?>

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

Wordpress Way

Twig Way

<?php the_content() ?> => {{ post.content }}
<?php the_permalink() ?> => {{ post.link }}
<?php the_title() ?> => {{ post.title }}
<?php get_the_tags() ?> => {{ post.tags }}

Seperation of concerns

As code gets more complex its easy to get lost. Keeping your code organized is a good idea

Logic (getting Data from WP)

Presentations (displaying)

Full Starter Theme

Like Underscores, but written for Timber.

add A little(personal Story)

If you just want to do a simple module in your site, you can use timber just for that.

Use a little, use a lot

Wordpress Walker + Bootstrap(link)

Personal Story

Downsides 👎

• Extra dependency your site needs to function, If it breaks your site breaks.
• Extra step the server has to do, so to keep performance up server side page caching is recommended.
• Way less examples and documentation than the Wordpress way of doing things.