• Sass for stylesheets
• Webpack for compiling assets, optimizing images, and concatenating and minifying files
• Browsersync for synchronized browser testing
• Blade as a templating engine
• Controller for passing data to Blade templates
• Bootstrap 4 as CSS framework
• Bootstrap 4 Navwalker for creating the navigation with the correct bootstrap 4 tags
• Font Awesome for icons
• Vanilla Lazyload for lazy loading images and improved performance
• Carbon Fields for custom fields
• Slick Carousel for carousels
• Axios for asynchronous front-end requests

Make sure all dependencies have been installed before moving on:

• WordPress >= 4.7
• PHP >= 7.0 (with php-mbstring enabled)
• Composer
• Node.js >= 6.9.x
• Yarn

Install using Composer from directory you have cloned this project:

# @ wp-content/themes/your-theme-name
$ composer install

themes/your-theme-name/   # → Root of your Sage based theme
├── app/                  # → Theme PHP
│   ├── controllers/      # → Controller files
│   ├── admin.php         # → Theme customizer setup
│   ├── filters.php       # → Theme filters
│   ├── helpers.php       # → Helper functions
│   └── setup.php         # → Theme setup
├── composer.json         # → Autoloading for `app/` files
├── composer.lock         # → Composer lock file (never edit)
├── dist/                 # → Built theme assets (never edit)
├── node_modules/         # → Node.js packages (never edit)
├── package.json          # → Node.js dependencies and scripts
├── resources/            # → Theme assets and templates
│   ├── assets/           # → Front-end assets
│   │   ├── config.json   # → Settings for compiled assets
│   │   ├── build/        # → Webpack and ESLint config
│   │   ├── fonts/        # → Theme fonts
│   │   ├── images/       # → Theme images
│   │   ├── scripts/      # → Theme JS
│   │   └── styles/       # → Theme stylesheets
│   ├── functions.php     # → Composer autoloader, theme includes
│   ├── index.php         # → Never manually edit
│   ├── screenshot.png    # → Theme screenshot for WP admin
│   ├── style.css         # → Theme meta information
│   └── views/            # → Theme templates
│       ├── layouts/      # → Base templates
│       └── partials/     # → Partial templates
└── vendor/               # → Composer packages (never edit)

Edit app/setup.php to enable or disable theme features, setup navigation menus, post thumbnail sizes, and sidebars.

• Run yarn from the theme directory to install dependencies
• Update resources/assets/config.json settings:
  • devUrl should reflect your local development hostname
  • publicPath should reflect your WordPress folder structure (/wp-content/themes/sage for non-Bedrock installs)

• yarn run start — Compile assets when file changes are made, start Browsersync session
• yarn run build — Compile and optimize the files in your assets directory
• yarn run build:production — Compile assets for production

Load your images with lazy load following this examples:

<img 
  alt="A lazy image" 
  class="lazy"
  data-src="lazy.jpg" 
/>

Carousels can be built with Slick Carousel.

Slick Carousel is loaded globally, so in order to create a carousel you only have to do this:

$('.your-carousel-selector').slick(args);

On carousels, use Slick lazy load function instead of Vanilla Lazyload:

<img data-lazy="img/lazyfonz1.png"/>

$('.lazy').slick({
  lazyLoad: 'ondemand',
  slidesToShow: 3,
  slidesToScroll: 1
});

In order to change theme options fields access the file app/options.php and change the fields in the array here:

add_action( 'carbon_fields_register_fields', function () {
    Container::make( 'theme_options', __('Theme Options', 'sage') )
        ->add_fields( array(
            // CREATE HERE YOUR THEME OPTIONS FIELDS:
            Field::make( 'text', 'crb_facebook_url') ,
            Field::make( 'textarea', 'crb_footer_text' )
        ));
});

When this theme is installed, it creates a home page and apply this template: resources/views/template-home.blade.php

Edit this file to customize your home page.

You can change bootstrap components default colors by overwriting its variables.

You can do it here: resources/assets/styles/common/_variables.scss.