The Timber Starter Theme with Webpack
The "_s" for Timber: a dead-simple theme that you can build from. Now with Webpack!
Installing the Theme
Install this theme as you would any other, and be sure the Timber plugin is activated. But hey, let's break it down into some bullets:
- Make sure you have installed the plugin for the Timber Library (and Advanced Custom Fields - they play quite nicely together).
- Download the zip for this theme (or clone it) and move it to
wp-content/themesin your WordPress installation.
- Rename the folder to something that makes sense for your website (generally no spaces and all lowercase). You could keep the name
timber-starter-themebut the point of a starter theme is to make it your own!
- Activate the theme in Appearance > Themes.
- Install and build frontend dependencies by navigating to theme folder and running
npm install && npx webpack -w
- Do your thing! And read the docs.
Building for production
cd wp-content/themes/my-theme/ && npm install && npx webpack -p to build minified files for production.
src/templates/ contains all of your Twig templates. These pretty much correspond 1 to 1 with the PHP files that respond to the WordPress template hierarchy. At the end of each PHP template, you'll notice a
Timber::render() function whose first parameter is the Twig file where that data (or
$context) will be used. Just an FYI.
tests/ ... basically don't worry about (or remove) these unless you know what they are and want to.
The main Timber Wiki is super great, so reference those often. Also, check out these articles and projects for more info: