Sage Optimizes WordPress Theme Workflow

Sage Optimizes WordPress Theme Workflow

I just started additional part-time work with a marketing agency and have found this tool to be very useful. Sage uses Webpack, Bower, Gulp, SASS and other technologies to cut out manual tasks in WordPress theme development. Moreover, the tool has built-in browsersync so that developers can instantly see changes. The Sage docs are a little bit hard to look through and it seems that the company wants devs to buy their book. However, I did find a really good guide for getting started. Wern Ancheta on sitepoint has a great guide that shows how the file structure works — just keep in mind that the guide is a little dated even though it less than 6 months old.

Installing

I used the methods described by Sage docs:

1

2

cd example.com/site/web/app/themes/

composer create-project roots/sage your-theme-name 8.4.2

Once you got that part all you need to do cd into the theme folder and run:

1

2

npm install

bower install

Note on Warren Ancheta’s Sitepoint Guide

When you get to the section on customization, where you begin to learn about adding widgets, menus, and theme support, the file you want to modify is not lib/init.php but rather src/setup.php.

I am looking forward to using this optimized workflow and plan to come back with more details once I have been using it for a while. Happy Coding!