https://github.com/the-couch/timber-webpack-postcss
Starter theme for Timber Wordpress Instances
https://github.com/the-couch/timber-webpack-postcss
es6 javascript post-css timber webpack wordpress
Last synced: 7 months ago
JSON representation
Starter theme for Timber Wordpress Instances
- Host: GitHub
- URL: https://github.com/the-couch/timber-webpack-postcss
- Owner: the-couch
- License: mit
- Created: 2018-06-20T18:48:06.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-06-20T18:56:40.000Z (over 7 years ago)
- Last Synced: 2025-01-15T10:07:41.797Z (9 months ago)
- Topics: es6, javascript, post-css, timber, webpack, wordpress
- Language: PHP
- Homepage:
- Size: 102 KB
- Stars: 2
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# The Timber Starter Theme
## Couch Enhancements
We added gulp, webpack, and postcss (sorry it's what I like lately :))
Up and Running with `npm install` && `npm run dev`
Gulp handles the file watching and live reloading of the wordpress environment, it watches twig files, and watches the updated javascript and css assets.
### Default Docs
The "_s" for Timber: a dead-simple theme that you can build from. The primary purpose of this theme is to provide a file structure rather than a framework for markup or styles. Configure your Sass, scripts, and task runners however you would like!
[](https://travis-ci.org/timber/starter-theme)
## 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:
1. Make sure you have installed the plugin for the [Timber Library](https://wordpress.org/plugins/timber-library/) (and Advanced Custom Fields - they [play quite nicely](http://timber.github.io/timber/#acf-cookbook) together).
2. Download the zip for this theme (or clone it) and move it to `wp-content/themes` in your WordPress installation.
3. Rename the folder to something that makes sense for your website (generally no spaces and all lowercase). You could keep the name `timber-starter-theme` but the point of a starter theme is to make it your own!
4. Activate the theme in Appearance > Themes.
5. Do your thing! And read [the docs](https://github.com/jarednova/timber/wiki).
## What's here?
`static/` is where you can keep your static front-end scripts, styles, or images. In other words, your Sass files, JS files, fonts, and SVGs would live here.
`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.
`bin/` and `tests/` ... basically don't worry about (or remove) these unless you know what they are and want to.
## Other Resources
The [main Timber Wiki](https://github.com/jarednova/timber/wiki) is super great, so reference those often. Also, check out these articles and projects for more info:
* [This branch](https://github.com/laras126/timber-starter-theme/tree/tackle-box) of the starter theme has some more example code with ACF and a slightly different set up.
* [Twig for Timber Cheatsheet](http://notlaura.com/the-twig-for-timber-cheatsheet/)
* [Timber and Twig Reignited My Love for WordPress](https://css-tricks.com/timber-and-twig-reignited-my-love-for-wordpress/) on CSS-Tricks
* [A real live Timber theme](https://github.com/laras126/yuling-theme).
* [Timber Video Tutorials](http://timber.github.io/timber/#video-tutorials) and [an incomplete set of screencasts](https://www.youtube.com/playlist?list=PLuIlodXmVQ6pkqWyR6mtQ5gQZ6BrnuFx-) for building a Timber theme from scratch.