seothemes/genesis-starter-theme
Stars: 148
Forks: 37
Pull Requests: 19
Issues: 24
Watchers: 27
Last Updated: 2020-04-18 04:33:20
A starter theme for the Genesis Framework with a modern development workflow
License:
Languages: PHP, JavaScript, CSS
Genesis Starter Theme
A developer-friendly starter theme used for creating commercial child themes for the Genesis Framework.
It uses Laravel Mix as a build tool to automate mundane development tasks like compiling SCSS and minifying images.
Check out the live demo
Table of Contents
Features
The Genesis Starter Theme aims to modernize, organize and enhance some aspects of Genesis child theme development. Take a look at what is waiting for you:
- Bourbon as a lightweight Sass toolkit
- Laravel Mix for automating development build tasks
- Browsersync for synchronized browser testing
- Config-based, OOP modular architecture
- CLI setup script to automatically update information
- Yarn or NPM for managing Node dependencies
- Composer for managing PHP dependencies and autoloading
- Namespaced to avoid naming conflicts
- AMP support with the WordPress AMP plugin
- Gutenberg support for latest blocks and admin editor styles
Requirements
| Requirement | How to Check | How to Install |
|---|---|---|
| PHP >= 5.4 | php -v |
php.net |
| WordPress >= 5.2 | Admin Footer |
wordpress.org |
| Genesis >= 3.1.1 | Theme Page |
studiopress.com |
| Composer >= 1.5.0 | composer --version |
getcomposer.org |
| Node >= 9.10.1 | node -v |
nodejs.org |
| NPM >= 5.6.0 | npm -v |
npm.js |
| Yarn >= 0.2.x | yarn -v |
yarnpkg.com |
Installation
One line command:
Install the latest development version of the Genesis Starter Theme using Composer from your WordPress themes directory (replace your-theme-name below with the name of your theme):
composer create-project seothemes/genesis-starter-theme your-theme-name dev-master && cd "$(\ls -1dt ./*/ | head -n 1)" && npm install && npm run buildIndividual commands:
Install the latest development version of the Genesis Starter Theme using Composer from your WordPress themes directory (replace your-theme-name below with the name of your theme):
composer create-project seothemes/genesis-starter-theme your-theme-name dev-masterNavigate into the theme's root directory:
cd your-theme-nameInstall node dependencies, build the theme assets and kick-off BrowserSync:
npm install && npm run buildStructure
your-theme-name/ # → Root directory
├── assets/ # → Front-end assets
├── config/ # → Config directory
├── lib/ # → Theme functions
│ ├── functions/ # → General functions
│ ├── plugins/ # → Plugin functions
│ ├── shortcodes/ # → Shortcode functions
│ ├── structure/ # → Structural functions
│ └── init.php # → File autoloader
├── templates/ # → Page templates
├── tests/ # → PHP Unit tests
├── vendor/ # → Composer packages
├── node_modules/ # → Node.js packages
├── composer.json # → Composer settings
├── package.json # → Node dependencies
├── webpack.mix.js # → Laravel mix config
├── screenshot.png # → Theme screenshot
├── functions.php # → Loads init files
└── style.css # → Blank stylesheetUsage
Project details such as theme name, author, version number etc should only ever be changed from the package.json file. Laravel Mix reads this file and automatically places the relevant information to the correct locations throughout the theme.
Static assets are organized in the assets directory. This folder contains theme scripts, styles, images, fonts, views and language translation files. All of the main theme styles are contained in the assets/css/main.css file, the style.css file at the root of the theme is left blank intentionally and only contains the required stylesheet header comment.
Autoloading classes and files
Classes
The Genesis Starter Theme automatically loads classes placed in the lib/classes/ directory via the Composer autoloader. Once you have added your additional files, run the following command to regenerate the autoloader:
composer dump-autoload --no-devFiles
File loading is handled by the lib/init.php file. Simply add or remove files from the directory/filename array.
Development
Please refer to the Laravel Mix documentation for further information on how to use the webpack.mix.js file.
All build tasks are located in the theme's package.json file, under the scripts section.
Contributing
Contributions are welcome from everyone. We have contributing guidelines to help you get started.
See also the list of contributors who participated in this project.
Special Thanks
A shout out to anyone who's code was used in or provided inspiration to this project:
Christoph Herr, Gary Jones, Tonya Mork, Tim Jensen, Justin Tadlock