TimberSage Wordpress Starter Theme

This theme is a fork of Sage, a WordPress starter theme based on HTML5 Boilerplate and gulp.

It comes with Timber, a library for theme building with Twig.

Docs:

• Sage Docs
• Timber Docs
• Twig Docs

---

Requirements

Prerequisite	How to check	How to install
PHP >= 5.4.x	php -v	php.net
Composer >= 1.5.x	composer -v	getcomposer.org
Node.js >= 4.5	node -v	nodejs.org
gulp >= 3.8.10	gulp -v	npm install -g gulp

Features

Development:

• gulp build script that compiles SCSS, checks for JavaScript errors, optimizes images, and concatenates and minifies files
• BrowserSync for keeping multiple browsers and devices synchronized while testing, along with injecting updated CSS and JS into your browser while you're developing
• assets/config.json to configure the build system

Backend:

• Theme Wrapper
• Timber
• Twig
• Upstatement/routes

Front-end:

• Uikit
• Swiper

---

Theme installation

1. Place project within your WordPress themes directory.

@ example.com/wp-content/themes/
$ git clone https://github.com/luism-s/TimberSage.git theme-name

2. Install composer & npm dependencies

@ example.com/wp-content/themes/theme-name
$ composer install
$ npm install

3. Compile Assets

@ example.com/wp-content/themes/theme-name
$ gulp build

---

Theme setup

Edit lib/setup.php to enable or disable theme features, setup navigation menus, post thumbnail sizes, post formats, and sidebars.

---

Theme development

This theme uses gulp as its build system and npm to manage front-end packages.

Available gulp commands

• gulp — Compile and optimize the files in your assets directory
• gulp watch — Compile assets when file changes are made
• gulp --prod — Compile assets for production (no source maps).

Using BrowserSync

To use BrowserSync during gulp watch you need to update devUrl at the bottom of assets/config.json to reflect your local development hostname.

For example, if your local development URL is http://project-name.dev you would update the file to read:

...
  "config": {
    "devUrl": "http://project-name.dev"
  }
...

If your local development URL looks like http://localhost:8888/project-name/ you would update the file to read:

...
  "config": {
    "devUrl": "http://localhost:8888/project-name/"
  }
...