Getting started

How to spin up the theme and development.

General

Main idea of this project it to reverse the logic of a standard WordPress theme, which loads wires the view files according to the Template Hierarchy.

This theme has a singular entry point of index.php which routes all the traffic though the theme core and loads a specific template from src/views/ using View Composers. This means templates are not responsible of processing the logic anymore, but instead they're loaded by the internal classes when needed.

Theme structure

.
├── .tools/             # Internal Node package helping with development
├── config/
│   ├── acf-json/       # Local copy of ACF groups
│   ├── *.json          # Various configuration files, like colors or typography
│   └── *.php           # Bootstrap configuration files
├── src/
│   ├── assets/         # JS, SCSS and Image development files
│   ├── classes/        # Theme PHP files
│   └── views/          # Template files, loaded according to the WP template hierarchy
├── functions.php       # Theme bootstrap file
├── index.php           # Entry file, not editable
└── style.css           # Theme manifest, not loaded on front-end

Development

Install dependencies

$ composer install && npm install

Build the static assets

This will transform SCSS into CSS, JS ESNext into older syntax and optimize images.

$ npm run build

Run the following script for processing styles, JS, and images on the fly whenever any change occur to any of those files.

$ npm run start

Linting and testing the code:

$ npm run lint
$ composer lint
$ composer test

Deployment

Run this script to generate production-optimized assets.

$ npm run build:production

Migrate the files according to .git-ftp-ignore file or use automated Github workflow.