- Update: 4-12-2018
For older versions of Sage see this post
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:
- 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 & thenode_modules
directory is smaller.
Theme Installation
- Make sure all dependencies have been installed before moving on:
PHP >=5.6.47.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 - 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 AwesomeUpdate: 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
- 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 openpackage.json
you’ll see bothdevDependencies
anddependencies
that Sage uses.devDependencies
are used by the build process, whereasdependencies
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