«Blog
•
Tutorial

Installing Sage Starter Theme in Local by Flywheel

⚠ Heads up! I have rebuilt this theme using Timber/Twig. I haven’t maintained the Sage theme in a few years so this information is very outdated. Please checkout the Sage website for more current instructions.

I’ve been a web developer specializing in WordPress theme development for the last 6 years but my portfolio site has always been a simple site built with just HTML, CSS and some JavaScript. No fun, right? Of course I’ve been using more modern development tools at work, but I hadn’t had the time to take my personal site into modern times, until now!

I decided it was finally time to update/rebuild my portfolio in WordPress and I wanted to challenge my self by using a setup I’ve never used before. I chose to try the Sage starter theme because it is a modern development setup that is pretty different from the way I’ve done things in the past. 

Because there are so many excellent articles on the topic that explain the process of setting up Sage better than I could, this post will mostly be an info dump with links to resources and tutorials that I used to set up Bedrock and Sage using Local by Flywheel. Enjoy!

Requirements 

From the installation instructions on Roots.io:

  • WordPress >= 4.7 (I used Local by Flywheel for my local WP installation)
  • PHP >= 7.1.3
  • Composer (I already had composer previously installed globally and ran “composer update” to update to the latest stable version)
  • Node.js >= 8.0.0  (Node was already installed, and I updated it with nvm by finding the stable version of node and running “nvm install XX.XX.X” See notes below before you do this)
  • Yarn (I already had this installed and updated by running “brew upgrade yarn”)

Steps 

  1. Install or update the above requirements
  2. Install Bedrock on Local by Flywheel (<project-root>/app/bedrock)
  3. Install Sage on Local by Flywheel (<project-root>/app/bedrock/web/wp/wp-content/themes)
  4. Log in to the WordPress admin and switch the theme to your Sage starter theme.

Other Notes

  • During the set up, I selected the default Bootstrap for the front-end framework.
  • I also set up a github repository in my starter theme directory immediately after successfully installing the theme.
  • The first time I ran “yarn start” I got an error message that said “Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (72).” This is because the version of node I had upgraded to was not supported by the node-sass module. To solve this, I had to look up which node version would work with node-sass and run the following in the command line:
    • nvm install 10.18.0
    • npm rebuild node-sass

Resources 

Comments

⚠ Comments for this post are closed.