Starter App is a WordPress starter theme that is designed to be used as a WordPress-based application for clients. Since its intended use is for individual clients vs. the theme marketplace, much functionality is meant to be built directly into the theme instead of delegated to seperate plugins (contrary to WordPress conventions).
This is simply a starter framework that is constantly in flux and there are no intentions of supporting it!
- PHP namespaces for cleaner organization
- Various helper functions and settings
- Sass for stylesheets with loosely based SMACCS structure
- ES6 support for JavaScript
- Gulp for compiling assets
- Webpack for bundling JS within gulp
- Browsersync for synchronized browser testing
Make sure all dependencies have been installed before moving on:
Install the starter theme by using yarn from your custom theme's directory. Make sure that all dependencies are always installed within the assets/build directory:
# @ themes/your-theme-name/
$ yarn install --modules-folder ./assets/build/node_modules
For now, use a text editor to search through all of the theme files to find and replace all instances of Starter
and Starter App
with your custom theme's namespace.
your-theme-name/ # → Root of your theme
├── assets # → Front-end assets
│ ├── build/ # → Settings for compiling assets
│ ├── fonts/ # → Theme fonts
│ ├── images/ # → Theme images
│ ├── scripts/ # → Theme JS
│ ├── styles/ # → Theme stylesheets
│ └── vendor/ # → Third party assets
├── dist/ # → Built theme assets (never edit)
├── functions.php # → Theme includes
├── index.php # → Main template file
├── package.json # → Node.js dependencies and scripts
├── screenshot.png # → Theme screenshot for WP admin
├── includes/ # → Theme PHP
│ ├── acf.php # → ACF helpers, settings and custom functionality
│ ├── assets.php # → Theme styles, scripts, and fonts
│ ├── classes/ # → PHP classes go here
│ ├── dev.php # → Dev helpers
│ ├── extras.php # → Miscellaneous functions
│ ├── integrations.php # → Third party integrations (might need to delegate them to classes)
│ ├── settings.php # → Theme settings for use throughout app
│ ├── setup.php # → Theme setup
│ ├── shortcodes/ # → Shortcodes go here
│ ├── theme-wrapper.php # → Theme wrapper
│ ├── widgets/ # → Widgets go here
│ └── woocommerce.php # → Misc. woocommerce functions
├── page-templates/ # → Page templates
├── partials/ # → All partials/template parts
├── style.css # → Theme meta information
├── partials/ # → Theme templates
└── vendor/ # → Composer packages (never edit)
Edit includes/setup.php
to enable or disable theme features, setup navigation menus, post thumbnail sizes, and sidebars.
Sage uses Gulp and Webpack to manage front-end assets.
From the command line on your host machine navigate to the theme directory then run yarn
:
# @ themes/your-theme-name/
$ yarn install --module-folder ./assets/build/node_modules
You now have all the necessary dependencies to run the build process.
- Within assets/build/gulpfile.js, make sure to specify your scss and js entry points on lines 54 and 56
gulp
— Compiles all assets for dev environent (sourcemaps/unuglified), sets up a watch task, and initiates browsersyncgulp production
— Compiles all assets for production- Also, the system will create seperate tasks for each of the files you specify as your entry points, so if you can watch/process individual files according to your needs
To use Browsersync you need to set your localURL
on line 41 within assets/build/gulpfile.js