Genesis Starter
| Project Name | Stars | Downloads | Repos Using This | Packages Using This | Most Recent Commit | Total Releases | Latest Release | Open Issues | License | Language |
|---|---|---|---|---|---|---|---|---|---|---|
| Sage | 12,107 |  | 6 | 3 | 5 days ago | 40 | July 19, 2022 | 13 | mit | PHP |
| WordPress starter theme with Laravel Blade components and templates, Tailwind CSS, and a modern development workflow | ||||||||||
| Timber | 5,209 |  | 131 | 77 | 8 days ago | 115 | June 22, 2022 | 209 | mit | PHP |
| Create WordPress themes with beautiful OOP code and the Twig Template Engine | ||||||||||
| Typography.js | 3,757 |  | 2,206 | 186 | 4 months ago | 79 | May 10, 2021 | 95 | mit | JavaScript |
| A powerful toolkit for building websites with beautiful design | ||||||||||
| Argon Theme | 3,160 | 2 months ago | 120 | gpl-3.0 | PHP | |||||
| 📖 Argon - 一个轻盈、简洁的 WordPress 主题 | ||||||||||
| Understrap | 2,957 |  | 81 | 1 | 3 days ago | 37 | November 08, 2021 | 75 | gpl-3.0 | CSS |
| Underscores + Bootstrap = Understrap, the renowned open-source WordPress starter theme. | ||||||||||
| Sakura | 2,947 | 2 months ago | 20 | gpl-2.0 | PHP | |||||
| A Wonderful WordPress Theme: 樱花庄的白猫博客主题 | ||||||||||
| Frontity | 2,823 |  | 6 | 67 | 2 months ago | 60 | July 19, 2022 | 66 | apache-2.0 | TypeScript |
| » Frontity - The React Framework for WordPress | ||||||||||
| Foundationpress | 2,780 | 4 years ago | 35 | April 12, 2019 | 55 | mit | PHP | |||
| FoundationPress is a WordPress starter theme based on Foundation 6 by Zurb | ||||||||||
| Kratos | 2,709 | 2 days ago | 7 | gpl-3.0 | PHP | |||||
| 📖 WordPress theme that focus on reading experience | ||||||||||
| Plugin Update Checker | 1,927 |  | 63 | 30 | 22 days ago | 31 | July 24, 2022 | 79 | mit | PHP |
| A custom update checker for WordPress plugins. Useful if you don't want to host your project in the official WP repository, but would still like it to support automatic updates. Despite the name, it also works with themes. | ||||||||||
Genesis Starter
A Genesis Framework starter theme with Gulp support. I took StudioPress' original Genesis Sampler theme and added my stuff.
Requirements
- WordPress
- Genesis Framework
- Composer
- Node (for NPM)
- Gulp
- Browserify
- Sass
-
GraphicsMagick (for
gulp-unretina)
Setup
- Clone this repository and change the theme's name.
- There is no
style.cssin the root, that is built by Gulp. The header comment metadata can be edited atsrc/sass/_meta.scss. - Run
composer installto install PHP dependencies. - Run
npm installto setup the build tools and install JavaScript dependencies. - Run
gulp buildto generate public site assets from sources.
CSS Preprocessor Support
Genesis Starter uses Sass out of the box, but it should not be at all hard to configure a Gulp task to handle different preprocessors (such as LESS or Stylus).
JavaScript and Browserify
The Starter uses Browserify to better allow modularization of client-side code using modules.
By default, your code is concatenated into a file called app.js, while external dependencies (installed using NPM) are concatenated into infrastructure.js.
The Browserify build process also handles ECMAScript 2015 transparently, using Babel to convert it into the kind of JavaScript most browsers support today.
Build Tasks
The Genesis starter provides the following Gulp tasks.
| Task | Description |
|---|---|
watch |
Watches files for changes and rebuilds assets (default). |
build |
Runs browserify, fonts, sass and images. |
test |
Runs ava and phpunit. |
clean |
Deletes the built assets so you can start afresh. |
ava |
Runs AVA tests. |
browser-sync |
Reloads and syncs browsers on multiple devices. |
browserify |
Packages JavaScript bundles from their sources. |
eslint |
Lints your JavaScript code. |
fonts |
Converts web fonts to CSS for localStorage caching. |
images |
Copies and compresses image assets. |
phpunit |
Runs PHPUnit test cases. |
sass |
Compiles, minifies and concatenates CSS from Sass. |
Task parameters may be configured via the gulp/config.js file.
BrowserSync
The watch task uses BrowserSync to observe files, automate browser refreshes and allow synchronised testing between different devices on the same site.
In order to do this, BrowserSync creates a local proxy that channels connections to the development site defined in the browserSync.proxy entry of gulp/config.js.
The proxy configuration requires that your WordPress site be available from multiple domain or host names, a feature offered by a plugin such as WP Hydra. (I recommend that you use these plugins for development only, since activating them on a public site could severely affect your site's search rankings.)
Feel free to experiment (and report on) different BrowserSync configurations, but from those I've tried this is the one that work best for me.
License
Genesis Starter is released under the GPL 2.0 Free Software License.
