Category: Web Development

• Update: 4-12-2018

For older versions of Sage see this post

https://github.com/roots/sage

https://roots.io/sage/docs

Changes in Sage 9

• Laravel’s Blade as a templating engine.
  Learn about Blade. Check out the templates directory.

  You can opt-out of Blade templates by replacing them with regular PHP ones (you could copy over the templates from Sage 8 if you really wanted to).

• Replaced gulp and Bower with Webpack and npm.
  Bower is dead and all packages should be available on npm.

  Webpack is responsible for:

  • Compiling assets
    • Sass to css with ccsnano
    • ES6 to JavaScript that can be run in today’s browsers with buble
  • Optimizing images with optipng, gifsicle, pngquant, and svgo
• ES6 for Javascript
  Great resource for learning about ES6: Wes Bos’ ES6 for Everyone
  Convert existing JS to ES6 with Lebab
• Bootstrap 4
  It’s still in alpha, but there’s so many improvements over Bootstrap 3.
  
• PSR-2 coding standards.
  Roots projects switched to PSR-2 last year. Previously we had used a modified PSR-2 ruleset, but we stopped caring about 2-spaces in our PHP files and fully adopted PSR-2.
• Restructured theme files.
  All theme templates are finally out of the theme root! Our implementation is a little hacky because a 7 year old WordPress Trac ticket still hasn’t landed, but we believe our implementation is the best we can do at this time.
• Introduced Yarn.
  Yarn is a drop in npm client replacement. With Yarn, the installation of Node dependencies is quicker & the node_modules directory is smaller.

Theme Installation

1. Make sure all dependencies have been installed before moving on:
   PHP >= 5.6.4 7.1.3 (with php-mbstring enabled)
   – Add the wamp php (at least 7.1.3) to Windows PATH (and no other php in the path).
   – make sure extension=php_mbstring.dll is enabled in the php.ini of the php version you are using (default= enabled)
   Composer (Dependency manager)
   Node.js >= 6.9.x
   – If necessary install Node (with npm). I used the Windows installer here (x64 version)
   Yarn
2. From your WordPress themes directory, run the following composer command:

   composer create-project roots/sage your-theme-name dev-master

   During theme installation you will have the options to:

   – Update theme headers (theme name, description, author, etc.)
   – Select a CSS framework (Bootstrap, Foundation, none)
   – Add Font Awesome

   Update: Newest version of Sage9 (9.0.5 at the time of writing) gives the following error: 

   TTY mode is not supported on Windows platform

   Solution: run this from the theme directory

   ./vendor/bin/sage meta        # or edit style.css directly
   ./vendor/bin/sage config      # or edit resources/assets/config.json
   ./vendor/bin/sage preset      # Install css framework
   

3. Navigate to the theme directory then run yarn, and yarn build (to refresh files):

   yarn && yarn build

   You now have all the necessary dependencies to run the build process.

   About dependencies:
   If you open package.json you’ll see both devDependencies and dependencies that Sage uses. devDependencies are used by the build process, whereas dependencies are packages that are used in the front-end theme assets.

   dependencies includes the front-end options you selected during install, such as Bootstrap and Font Awesome

   "dependencies": {
  "bootstrap": "^4.0.0-beta",
  "font-awesome": "~4.7",
  "jquery": "1.12.4 - 3",
  "popper.js": "~1.11"
}

————————–

Install WordPress and activate plugins

Optionally import test data with WP Test. See here

Warning when activating i-themes Security:

When activiating this plugin, it will write to your wp-config.php.
This causes an error with the Bedrock config setup and make you website/admin unaccesible.
Solution:
– activate i-themes
– edit wp-config.php -> remove file permissions added by i-themes (we use config/application.php for that)
– WP admin should be accesible again
– Go to i-themes settings-> WordPress Tweaks -> File Editor -> uncheck the box

Read More