nicbeltramelli / zen
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
Requires
- php: >=7.1
- composer/installers: ~1.0
- wpackio/enqueue: ^3.2.1
Requires (Dev)
- dev-master
- 4.3.1
- 4.3.0
- 4.2.0
- 4.1.3
- 4.1.2
- 4.1.1
- 4.1
- 4.0
- 3.6.0
- 3.5.1
- 3.5.0
- 3.4.0
- 3.3.0
- 3.2.2
- 3.2.1
- 3.2.0
- 3.1.1
- 3.1.0
- 3.0.0
- 2.6.0
- dev-dependabot/npm_and_yarn/json5-1.0.2
- dev-dependabot/npm_and_yarn/decode-uri-component-0.2.2
- dev-dependabot/npm_and_yarn/loader-utils-1.4.2
- dev-dependabot/npm_and_yarn/socket.io-parser-3.3.3
- dev-dependabot/npm_and_yarn/terser-4.8.1
- dev-dependabot/npm_and_yarn/minimist-1.2.6
- dev-dependabot/npm_and_yarn/follow-redirects-1.14.8
- dev-dependabot/npm_and_yarn/node-sass-7.0.0
- dev-dependabot/npm_and_yarn/nanoid-3.2.0
- dev-dependabot/npm_and_yarn/nth-check-2.0.1
- dev-dependabot/npm_and_yarn/tar-6.1.11
- dev-dependabot/npm_and_yarn/path-parse-1.0.7
This package is auto-updated.
Last update: 2024-03-05 19:06:41 UTC
README
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
- 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.
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 checkscomposer 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)