Child theme for Genesis Framework with a modern development workflow

Installs: 28

Dependents: 0

Suggesters: 0

Security: 0

Stars: 4

Watchers: 3

Forks: 1

Open Issues: 12

Language:SCSS

Type:wordpress-theme


README

Packagist Build Status

Zen is a child theme for the Genesis Framework with a modern development workflow. Live Demo

Tested up to WordPress 5.7.2 and Genesis 3.3.3.

Features

  • Consume packages from npm registry
  • Modern JavaScript
  • SASS/SCSS for stylesheets
  • Autoprefixer to make your CSS work with needed vendor prefixes
  • Minify and bundle code with Webpack
  • Split large files and enqueue the generated parts
  • Synch browser testing with Browsersync](http://www.browsersync.io/)

Requirements

Make sure all requirements have been installed before moving on:

Theme installation

Install Zen using Composer from your WordPress themes directory (replace your-theme-name below with the name of your theme):

# initialize the theme
$ composer create-project nicbeltramelli/zen your-theme-name

# move inside your theme folder
$ cd your-theme-name

# install front-end dependencies
$ yarn

# bootstrap project
$ yarn bootstrap

Theme setup

  1. Edit style.css to define your theme meta information (name, URI, description, version, author)
  2. Edit wpackio.server.js that handles the development server:
  • proxy should reflect your local development URL, e.g. 'http://your-address.local'
  • distPublicPath should reflect the absolute URL path of your dist folder, e.g. '/wp-content/themes/your-theme-name/dist/'
    You must add a forward slash at the end otherwise it will not work.

Theme development

# start development server
$ yarn start

# create production build
$ yarn build

# create distribution package
$ yarn archive

WordPress coding standard

  • composer phpcs — Runs WordPress coding standards checks
  • composer phpcbf — Fix php sniff violations automatically

Theme structure

themes/your-theme-name/  # → Root of your child theme
├── src/                 # → Front-end assets
│   ├── scripts/         # → Theme JS
│   └── styles/          # → Theme stylesheets
├── config/              # → Theme configuration data
├── dist/                # → Built theme assets (never edit)
├── lib/                 # → Theme PHP library
│   ├── blocks/          # → Add support for Gutenberg blocks
│   ├── structure/       # → Theme structure
│   ├── woocommerce/     # → WooCommerce PHP library
│   ├── admin.php        # → Adds the admin dashboard setting
│   ├── assets.php  	 # → Enqueue assets
│   ├── body-classes.php # → Adds consistent classes to the body tag
│   ├── customize.php    # → Adds the Customizer addition
│   ├── defaults.php     # → Configures the default theme settings
│   ├── errors.php       # → Displays error messages
│   ├── extras.php       # → Custom functions
│   ├── helpers.php      # → Adds the required helper functions
│   ├── output.php       # → Adds the required CSS to the front-end
│   └── setup.php        # → Defines theme constants and features
├── node_modules/        # → Node.js packages (never edit)
├── page-templates/      # → Custom page templates
├── vendor/              # → Composer packages (never edit)
├── composer.json        # → Composer dependencies and scripts
├── composer.lock        # → Composer lock file (never edit)
├── front-page.php       # → Front page template
├── function.php         # → Includes the theme PHP library
├── package.json         # → Node.js dependencies and scripts
├── search.php           # → Search template
├── style.css            # → Theme meta informations
├── wpackio.project.js   # → Project configuration
├── wpackio.server.js    # → Dev server configuration
└── yarn.lock            # → Yarn lock file (never edit)

Dependencies