, (*1)
A modern WordPress starter theme which uses the WP Emerge framework., (*2)
This is the WP Emerge Starter Theme project - for the WP Emerge framework please check out https://github.com/htmlburger/wpemerge., (*3)
Summary
Documentation
http://docs.wpemerge.com/#/starter/theme/overview, (*4)
http://docs.wpemerge.com/#/starter/theme/quickstart, (*5)
Development Team
Brought to you by Atanas Angelov and the lovely folks at htmlBurger., (*6)
Comparison Table
|
WP Emerge Theme |
Sage |
Timber |
View Engine |
PHP, Blade, Twig, any |
PHP, Blade |
Twig |
Routing |
โ |
โ |
โ |
WP Admin Routing |
โ |
โ |
โ |
WP AJAX Routing |
โ |
โ |
โ |
MVC |
โโโ |
โโโยน |
โโโ |
Middleware |
โ |
โ |
โ |
View Composers |
โ |
โ/โยฒ |
โ |
Service Container |
โ |
โ |
โ |
Stylesheets |
SASS + PostCSS |
SASS + PostCSS |
N/Aยณ |
JavaScript |
ES6 |
ES6 |
N/Aยณ |
Front end, Admin, Editor and Login Bundles |
โโโโ |
โโโโ |
N/Aยณ |
Automatic Sprite Generation |
โ |
โ |
N/Aยณ |
Automatic Cache Busting |
โ |
โ |
โ |
WPCS Linting |
โ |
โ |
โ |
Advanced Error Reporting |
โ |
โ |
โ |
WP Unit Tests for your classes |
โ |
โ |
โ |
ยน Sage's Controller is more of a View Composer than a Controller., (*7)
ยฒ Sage's Controller provides similar functionality but is limited to 1 composer (controller) per view and vice versa., (*8)
ยณ Timber does not provide a front-end build process so you can implement whatever you prefer., (*9)
Email any factual inaccuracies to hi@atanas.dev so they can be corrected., (*10)
Features
- All features from WP Emerge:
- Named routes with custom URLs and query filters
- Controllers
- Middleware
- PSR-7 Responses
- View Composers
- Service Container
- Service Providers
- PHP view layouts (a.k.a. automatic wrapping)
- Support for PHP, Blade 5.4 and/or Twig 2 for views
- Gutenberg support.
-
SASS + PostCSS for stylesheets. Separate bundles are created for front-end, administration, Gutenberg and login pages and custom bundles can be added easily.
- ES6 for JavaScript. Separate bundles are created for front-end, administration, Gutenberg and login pages and custom bundles can be added easily.
- Pure Webpack to transpile and bundle assets, create sprites, optimize images etc.
-
Hot Module Replacement for synchronized browser development.
- Autoloading for all classes in your
MyApp\
namespace.
- Automatic, fool-proof cache busting for all assets, including ones referenced in styles.
- WPCS, JavaScript and SASS linting and fixing using a single yarn command.
- Single-command optional CSS package installation:
- Normalize.css
- Boostrap 4
- Bulma
- Foundation
- Tachyons
- Tailwind CSS
- Spectre.css
- FontAwesome
- WP Unit Test scaffolding for your own classes.
Non-goals
-
Taking over the WordPress main query., (*11)
WP Emerge does not take over the main query - it actively works with it., (*12)
-
Taking over WordPress routing., (*13)
WP Emerge does not take over WordPress' routing - it actively works with it. The only exception to this are hardcoded URLs explicitly added by a user., (*14)
-
Reinventing WordPress APIs using object-oriented interfaces., (*15)
WP Emerge does not provide alternative APIs for registering post types, taxonomies or the like for little added benefit. Instead, it provides logical and handy places for developers to use core APIs., (*16)
-
Using a third party engine by default., (*17)
WP Emerge uses PHP by default in the same way WordPress does but with added features. Using a third party engine is entirely optional and requires installing an extension., (*18)
-
Include most of Laravel or another framework., (*19)
WP Emerge is lean and tuned for WordPress. While inspired by Laravel, it does not come with any illuminate/*
packages. There are only 2 third party production dependencies:, (*20)
-
pimple/pimple
- The single-file PHP service container.
-
guzzlehttp/psr7
- A PSR-7 Request and ServerRequest implementation.
Requirements
Directory structure
wp-content/themes/your-theme
โโโ app/
โ โโโ helpers/ # Helper files, add your own here as well.
โ โโโ routes/ # Register your WP Emerge routes.
โ โ โโโ admin.php
โ โ โโโ ajax.php
โ โ โโโ web.php
โ โโโ src/ # PSR-4 autoloaded classes.
โ โ โโโ Controllers/ # Controller classes for WP Emerge routes.
โ โ โโโ Routing/ # Register your custom routing conditions etc.
โ โ โโโ View/ # Register your view composers, globals etc.
โ โ โโโ WordPress/ # Register post types, taxonomies, menus etc.
โ โ โโโ ...
โ โโโ config.php # WP Emerge configuration.
โ โโโ helpers.php # Require your helper files here.
โ โโโ hooks.php # Register your actions and filters here.
โ โโโ version.php # WP Emerge version handling.
โโโ dist/ # Bundles, optimized images etc.
โโโ languages/ # Language files.
โโโ resources/
โ โโโ build/ # Build process configuration.
โ โโโ fonts/
โ โโโ images/
โ โโโ scripts/
โ โ โโโ admin/ # Administration scripts.
โ โ โโโ editor/ # Gutenberg editor scripts.
โ โ โโโ login/ # Login scripts.
โ โ โโโ frontend/ # Front-end scripts.
โ โโโ styles/
โ โ โโโ admin/ # Administration styles.
โ โ โโโ editor/ # Gutenberg editor styles.
โ โ โโโ login/ # Login styles.
โ โ โโโ frontend/ # Front-end styles.
โ โ โโโ shared/ # Shared styles.
โ โโโ vendor/ # Any third-party, non-npm assets.
โโโ vendor/ # Composer packages.
โโโ views/
โ โโโ layouts/
โ โโโ partials/
โโโ views-alternatives/ # Views for other engines like Blade.
โโโ functions.php # Bootstrap theme.
โโโ screenshot.png # Theme screenshot.
โโโ style.css # Theme stylesheet.
โโโ wpemerge # WP Emerge CLI shortcut.
โโโ ...
Notable directories
app/helpers/
Add PHP helper files here. Helper files should include function definitions only. See below for information on where to put actions, filters, classes etc., (*21)
app/src/
Add PHP class files here. All clases in the MyApp\
namespace are autoloaded in accordance with PSR-4., (*22)
resources/images/
Add images for styling here. Optimized copies will be placed in dist/images/
when running the build process., (*23)
resources/styles/frontend/
Add .css and .scss files to add them to the front-end bundle. Don't forget to @import
them in index.scss
., (*24)
resources/styles/[admin,editor,login]/
These directories are for the admin, editor and login bundles, respectively. They work identically to the main resources/styles/frontend/
directory., (*25)
resources/scripts/frontend/
Add JavaScript files here to add them to the frontend bundle. The entry point is index.js
., (*26)
resources/scripts/[admin,editor,login]/
These directories are for the admin, editor and login bundles, respectively. They work identically to the main resources/scripts/frontend/
directory., (*27)
views/
While views that follow the WordPress template hierarchy should go in the theme root directory (e.g. index.php
, searchform.php
, archive-post.php
etc.), others should go in the following directories:
1. views/layouts/
- Layouts that other views extend.
2. views/partials/
- Small snippets that are meant to be reused throughout other views.
3. views/
- Named custom post templates or views that don't fit anywhere else., (*28)
Avoid adding any PHP logic in any of these views, unless it pertains to layouting. Business logic should go into:
- Helper files (app/helpers/*.php
)
- Service classes
- WP Emerge Controllers, (*29)
Contributing
WP Emerge Starter Theme is completely open source and we encourage everybody to participate by:, (*30)
- Reviewing
.github/CONTRIBUTING.md
.
- โญ the project on GitHub [https://github.com/htmlburger/wpemerge-theme](https://github.com/htmlburger/wpemerge-theme)
- Posting bug reports [https://github.com/htmlburger/wpemerge-theme/issues](https://github.com/htmlburger/wpemerge-theme/issues)
- (Emailing security issues to hi@atanas.dev instead)
- Posting feature suggestions [https://github.com/htmlburger/wpemerge-theme/issues](https://github.com/htmlburger/wpemerge-theme/issues)
- Posting and/or answering questions [https://github.com/htmlburger/wpemerge-theme/issues](https://github.com/htmlburger/wpemerge-theme/issues)
- Submitting pull requests [https://github.com/htmlburger/wpemerge-theme/pulls](https://github.com/htmlburger/wpemerge-theme/pulls)
- Sharing your excitement about WP Emerge with your community