Ivan Villa
Designer learning front end development
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
One More Thing
...No Mo Magic
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
The End?
build the wordpress way
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
Personal Story
//Gets the Data
$data['menu'] = new TimberMenu();
// Twig Template
{% for item in menu.items %}
<li><a href="{{ item.link }}">{{ item.title }}</a></li>
{% endfor %}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.
Who is this For?
- Working with non wordpress Developers
- you work in more than just wordpress and use modern templating languages already.
- you are looking to learn/have fun writing modern templates
Q&A
Timber Talk
By Ivan Villa
