Install Sage WordPress theme and 3rd party libraries on OS X

wordpress-wppolarity-sage-theme.md

Installing Sage WordPress theme and 3rd party libraries with Pressmatic

• Updated 31 August 2016

Create a new Pressmatic site

1. Create new site using "Add Site" button

Installing Sage WordPress theme

1. Using terminal, enter the "themes" directory of the new site cd ~/www/<site>/app/public/wp-content/themes
2. $ composer create-project roots/sage <theme-name> 8.4.2 # This will download the Sage theme of version 8.4.2
3. $ wp theme activate <theme-name> # Activate the new theme
4. $ npm install -g gulp bower # Install gulp and Bower globally (you only need to do this once on your machine)
5. $ npm install # Install the Node dependencies that are required by Sage
6. $ bower install # Install the Bower dependencies

Fix gulpfile.js file in case of Sage version 8.4.2

In the .../themes/<theme-name>/gulpfile.js file change:

.pipe(function() {
  return gulpif('*.less', less());
})
.pipe(function() {
  return gulpif('*.scss', sass({
    outputStyle: 'nested', // libsass doesn't support expanded yet
    precision: 10,
    includePaths: ['.'],
    errLogToConsole: !enabled.failStyleTask
  }));
})

into (swicth the pipe calls places)...

.pipe(function() {
  return gulpif('*.scss', sass({
    outputStyle: 'nested', // libsass doesn't support expanded yet
    precision: 10,
    includePaths: ['.'],
    errLogToConsole: !enabled.failStyleTask
  }));
})
.pipe(function() {
  return gulpif('*.less', less());
})

Install 3rd party WordPress plugins

1. $ wp plugin install https://github.com/xeiter/az-elements/archive/master.zip --activate # Install "az-elements" WordPress plugin
2. $ wp plugin install piklist --activate # Install "piklist" WordPress plugin
3. $ wp plugin install https://github.com/roots/roots-wrapper-toolbar/archive/master.zip --activate # Install "roots-wrapper-toolbar-sagesupport" WordPress plugin
4. $ wp plugin install caldera-forms --activate # Install "caldera-forms" WordPress plugin

Gulp watch and compile

1. cd ~/www/<site>/app/public/wp-content/themes/<theme-name? # Enter theme's directory
2. gulp # Run gulp to re-build teh package
3. gulp watch # Run gulp in the watch mode

Using the theme

Navigation

Bootstrap Nav Walker

Forked from https://github.com/twittem/wp-bootstrap-navwalker.

1. Load lib/navigation/bootstrap-nav-walker.php from <theme-name>/functions.php
2. Place the following mark up to header.php

<header class="banner navbar navbar-default navbar-static-top" role="banner">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only"><?= __('Toggle navigation', 'sage'); ?></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="<?= esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a>
    </div>

    <nav class="collapse navbar-collapse" role="navigation">
      <?php
      if (has_nav_menu('primary_navigation')) :
        wp_nav_menu(['theme_location' => 'primary_navigation', 'walker' => new Bootstrap_Nav_Walker(), 'menu_class' => 'nav navbar-nav']);
      endif;
      ?>
    </nav>
  </div>
</header>

Offcanvas Bootstrap Nav Walker

1. Install Jasby Bootstrao from http://www.jasny.net/bootstrap/ by running bower install jasny-bootstrap --save
2. Re-build the package gulp
3. Place the following mark up to header.php

<header class="banner navbar navbar-default navbar-static-top" role="banner">

  <nav id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-left offcanvas" role="navigation">
      <?php
      if (has_nav_menu('primary_navigation')) :
        wp_nav_menu(['theme_location' => 'primary_navigation', 'walker' => new Bootstrap_Nav_Walker(), 'menu_class' => 'nav navbar-nav']);
      endif;
      ?>
  </nav>
  
  <div class="navbar navbar-default navbar-fixed-top">
    <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="body">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>

</header>

or

<header class="banner navbar navbar-default navbar-static-top" role="banner">

  <nav id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-left offcanvas" role="navigation">
    <a class="navmenu-brand" href="#">Brand</a>
    <ul class="nav navmenu-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </nav>
  
  <div class="navbar navbar-default navbar-fixed-top">
    <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="body">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>
  
</header>