<\/p>\n\n\n
For older versions of Sage see this<\/a> post<\/p>\n https:\/\/github.com\/roots\/sage<\/a><\/p>\n https:\/\/roots.io\/sage\/docs<\/a><\/p>\n 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).<\/p>\n<\/li>\n Webpack is responsible for:<\/p>\n During theme installation you will have the options to:<\/p>\n – Update theme headers (theme name, description, author, etc.) Update: <\/strong>Newest version of Sage9 (9.0.5 at the time of writing) gives the following error: <\/p>\n Solution: run this from the theme<\/em> directory<\/p>\n You now have all the necessary dependencies to run the build process.<\/p>\n About dependencies:<\/strong> <\/p>\n<\/li>\n<\/ol>\n ————————–<\/strong><\/p>\n Optionally import test data with WP Test. See here<\/p>\n When activiating this plugin, it will write to your wp-config.php. <\/p>\n <\/p>\nChanges in Sage 9<\/h3>\n
\n
Learn about Blade<\/a>. Check out the templates directory<\/a>.\n
<\/strong>Bower is dead and all packages should be available on npm.\n\n
\n
<\/strong>Great resource for learning about ES6: Wes Bos\u2019 ES6 for Everyone<\/a>
Convert existing JS to ES6 with Lebab<\/a><\/li>\n
<\/strong>It’s still in alpha<\/a>, but there\u2019s so<\/em> many improvements over Bootstrap 3.
<\/strong><\/li>\n
Roots projects switched to PSR-2<\/a> 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.<\/li>\n
All theme templates are finally out of the theme root! Our implementation is a little hacky because a 7 year old WordPress Trac ticket<\/a> still hasn\u2019t landed, but we believe our implementation is the best we can do at this time.<\/li>\n
Yarn is a drop in npm client replacement. With Yarn, the installation of Node dependencies is quicker & the node_modules<\/code> directory is smaller.<\/li>\n<\/ul>\nTheme Installation<\/h3>\n
\n
PHP<\/a> >= 5.6.4<\/del> 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<\/a> (Dependency manager)
Node.js<\/a> >= 6.9.x
– If necessary install Node (with npm). I used the Windows installer here<\/a> (x64 version)
Yarn<\/a><\/li>\ncomposer create-project roots\/sage your-theme-name dev-master<\/pre>\n
– Select a CSS framework (Bootstrap, Foundation, none)
– Add Font Awesome<\/p>\nTTY mode is not supported on Windows platform<\/code><\/p>\n.\/vendor\/bin\/sage meta # or edit style.css directly\n.\/vendor\/bin\/sage config # or edit resources\/assets\/config.json\n.\/vendor\/bin\/sage preset # Install css framework
<\/code><\/pre>\n<\/li>\nyarn && yarn build<\/code><\/p>\n
If you open package.json<\/code> you’ll see both devDependencies<\/code> and dependencies<\/code> that Sage uses. devDependencies <\/code>are used by the build process, whereas dependencies<\/code> are packages that are used in the front-end theme assets.<\/p>\ndependencies<\/code> includes the front-end options you selected during install, such as Bootstrap and Font Awesome<\/p>\n\"dependencies\": {<\/code> \"bootstrap\": \"^4.0.0-beta\",<\/code> \"font-awesome\": \"~4.7\",<\/code> \"jquery\": \"1.12.4 - 3\",<\/code> \"popper.js\": \"~1.11\"<\/code>}<\/code><\/p>\nInstall WordPress and activate plugins<\/h3>\n
Warning when activating i-themes Security:<\/strong><\/h3>\n
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<\/p>\n\n
Build commands<\/h3>\n
\n
yarn start<\/code> \u2014 Compile assets when file changes are made, start Browsersync session<\/li>\nyarn build<\/code> \u2014 Compile and optimize the files in your assets directory<\/li>\nyarn build:production<\/code> \u2014 Compile assets for production<\/li>\n<\/ul>\n<\/li>\nAdditional commands<\/h4>\n
\n
yarn run rmdist<\/code> \u2014 Remove your dist\/<\/code> folder<\/li>\nyarn run lint<\/code> \u2014 Run ESLint against your assets and build scripts<\/li>\ncomposer test<\/code> \u2014 Check your PHP for PSR-2 compliance with phpcs
\n<\/code><\/li>\n<\/ul>\n<\/li>\nhttps:\/\/project-name.dev<\/code>, update the file to read:\n\"<\/span>devUrl\"<\/span><\/span>: \"<\/span>https:\/\/project-name.dev\"<\/span><\/span>,<\/pre>\n<\/li>\n\"<\/span>publicPath\"<\/span><\/span>: \"<\/span>\/wp-content\/themes\/sage\/\"<\/span><\/span><\/pre>\n<\/li>\n
\n\n