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.
- 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/)
Make sure all requirements have been installed before moving on:
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
- Edit
style.css
to define your theme meta information (name, URI, description, version, author) - 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.
# start development server
$ yarn start
# create production build
$ yarn build
# create distribution package
$ yarn archive
composer phpcs
— Runs WordPress coding standards checkscomposer phpcbf
— Fix php sniff violations automatically
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)