Class 4

Custom Websites with Timber

Okay...what the heck is Timber?

Timber is a library that allows you to use the Twig templating language for PHP in your templates.

Given the amount of jargon in that sentence, we haven't really answered the question. Let's take a step back.

If you've ever coded a WordPress theme, you know that PHP syntax can be nasty. You also know that seemingly simple tasks in WordPress, like showing a list of posts in the same category, for instance, can involve way more steps than you'd think is necessary. Or maybe that's just me (but I don't think so). Timber lets us use the much cleaner Twig syntax in our templates, and it allows us to separate the gross PHP logic from the HTML.

Still confused? Then this class is for you! Well, if you can check off the pre-knowledge at the end of this page.

The Project

I build all of my websites with Timber along with Advanced Custom Fields for customizing the WordPress experience for my clients. In this course, we will build a website following the process I've figured out for building client websites. We will create a highly customized content management system based on a content-focused approach to web design. After we've fine-tuned that content structure, we'll move into marking up our templates with semantic HTML, then to adding a visual layer with Sass, and finally adding any interactive flourishes with jQuery. We won't be using plugins to display related posts or to add a slider to the home page.

In addition to the development itself, we will talk about incorporating your WordPress skills into a freelance practice, and how to create your own process to ensure successful relationships with your clients.

Pre-Knowledge

Timber has a learning curve, no doubt about it. It's a very different way of approaching WordPress development, therefore it is important for anyone taking this class to have a certain level of WordPress and front-end development expertise ahead of time. You should be able to do or figure out how to do all of the following:

WordPress

• Use an action to enqueue new scripts or stylesheets
• Register more than one custom menu
• Create a widget area or dynamic sidebar
• Register custom post types and taxonomies
• Exclude a category from the loop
• Create an an archive template for a specific category

Front-end development

• Use Sass, or be very familiar with what it does
• Use Grunt, Gulp, CodeKit, or equivalent for compiling code and running tasks
• Look for errors in the JavaScript console
• Fix a navigation bar to the top of the page
• Change the background color of the page when a button is clicked
• Understand the programming concepts of loops, arrays, and objects

If you are dying to take this class but can't check off all of the above items, you are in luck! As the culmination of the Tackle Box curriculum, all of the knowledge necessary for this class is covered in the other Tackle Box classes!