Waypoint (Timber)

Waypoint is built with Timber, based on the The "_s" theme.

Install the theme on WordPress

1. Download this repo and remove -master from the file name, so it reads waypoint-timber.zip.
2. Add a new theme in WordPress and upload the zip file
3. Activate the theme and install all the required plugins
4. Navigate to Languages and create a default language. Assign this language to all existing posts.
5. Navigate to Settings -> Permalinks. Select Post name and hit Save Changes.
6. To install the remaining non-required plugins, head over to Appearance -> Install Plugins. Then install and activate them.
7. Finally, once installing the remaining plugins, it's important to reset your htaccess file by following step 5.

Developing the theme

1. Follow the above instructions to install the theme.
2. Navigate to wp-content/themes & open waypoint-timber in your code editor & terminal.
3. Make sure to have composer & gulp installed globally
4. Run npm install
5. Run composer install
6. Finally, run gulp watch to compile the static files when editing the theme.
7. For updating the theme version, go to styles.css and update the version & template version. Then in git add a tag like: git tag v0.0.3 with the new version. Finally, push the tag like so git push origin v0.0.3 - Make sure the tag is newer than the current version.
8. If styles & templates have been updated, it's best to re-publish the package on NPM, so the child themes can use the base themes design elements. To do this, update the version number in package.json to the new version number in styles.css and run npm publish. Then in the child theme, you'll need to run npm install --save rentivo-waypoint-timber@[version].

What's here?

static/ is where we keep 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 our 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.

src/ contains all of the php classes for logic & bootstrapping of the theme

Other Resources

The main Timber Wiki is super great, so reference those often. Also, check out these articles and projects for more info:

• This branch of the starter theme has some more example code with ACF and a slightly different set up.
• Twig for Timber Cheatsheet
• Timber and Twig Reignited My Love for WordPress on CSS-Tricks
• A real live Timber theme.
• Timber Video Tutorials and an incomplete set of screencasts for building a Timber theme from scratch.