Sage Installation – Update for version 9

  • 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

Build Steps and Deployment (Austin Pray)

Based on the discussion over here: roots/roots/pull/1257.

These days your web project probably has a build step. Your build step takes your styles, scripts, and other assets and packages them for the browser. Maybe you are using gulp, grunt, or even make to orchestrate all your compilation steps. This post covers a couple methods for deploying projects with compiled assets and each method’s respective gotchas.

Source: Build Steps and Deployment

Getting Ready for PHP 7 | DigitalOcean

2015 has been an important year for PHP. Eleven years after its 5.0 release, a new major version is finally coming our way! PHP 7 is scheduled for release before the end of the year, bringing many new language features and an impressive performance boost. But how will this impact your current PHP codebase? What really changed? How safe is it to update? This post will answer these questions and give you a taste of what’s to come with PHP 7.

Source: Getting Ready for PHP 7 | DigitalOcean

Increasing memory allocated to PHP

Increasing memory allocated to PHP

I needed to do this when I got blank screens after installing Buddypress

source: http://codex.wordpress.org/Editing_wp-config.php#Increasing_memory_allocated_to_PHP

Also released with Version 2.5, the WP_MEMORY_LIMIT option allows you to specify the maximum amount of memory that can be consumed by PHP. This setting may be necessary in the event you receive a message such as “Allowed memory size of xxxxxx bytes exhausted”.

This setting increases PHP Memory only for WordPress, not other applications. By default, WordPress will attempt to increase memory allocated to PHP to 40MB (code is at beginning of wp-settings.php), so the setting in wp-config.php should reflect something higher than 40MB. Read More