Skip to content

An organized, ES6 and SASS powered theme taking advantage of the WP Emerge framework. πŸš€

License

Notifications You must be signed in to change notification settings

grahammtbr/wpemerge-theme

Β 
Β 

Repository files navigation

WP Emerge Theme Logo

Packagist Travis branch Gitter

A modern WordPress starter theme which uses the WP Emerge framework.

This is the WP Emerge Theme project - for the WP Emerge framework please check out https://github.com/htmlburger/wpemerge.

Summary

Documentation

http://docs.wpemerge.com/#/starter-theme/overview

http://docs.wpemerge.com/#/starter-theme/quickstart

Development Team

Brought to you by Atanas Angelov and the lovely folks at htmlBurger.

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.

Β² Sage's Controller provides similar functionality but is limited to 1 composer (controller) per view and vice versa.

Β³ Timber does not provide a front-end build process so you can implement whatever you prefer.

Email any factual inaccuracies to hi@atanas.dev so they can be corrected.

Features

  • All features from WP Emerge:
    • 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.
  • ES6 for JavaScript. Separate bundles are created for front-end, administration, Gutenberg and login pages.
  • Pure Webpack to transpile and bundle assets, create sprites, optimize images etc.
  • Browsersync for synchronized browser development.
  • Autoloading for all classes in your App\ 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.

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
β”‚   β”œβ”€β”€ setup/                # Register WordPress menus, post types etc.
β”‚   β”‚   β”œβ”€β”€ menus.php
β”‚   β”‚   β”œβ”€β”€ post-types.php
β”‚   β”‚   β”œβ”€β”€ sidebars.php
β”‚   β”‚   β”œβ”€β”€ taxonomies.php
β”‚   β”‚   β”œβ”€β”€ theme-support.php
β”‚   β”‚   └── widgets.php
β”‚   β”œβ”€β”€ src/                  # PSR-4 autoloaded classes.
β”‚   β”‚   β”œβ”€β”€ Controllers/      # Controller classes for WP Emerge routes.
β”‚   β”‚   β”œβ”€β”€ Widgets/          # Widget classes.
β”‚   β”‚   └── ...
β”‚   β”œβ”€β”€ config.php            # WP Emerge configuration.
β”‚   β”œβ”€β”€ helpers.php           # Require your helper files here.
β”‚   β”œβ”€β”€ hooks.php             # Register your actions and filters here.
β”‚   └── views.php             # Register your WP Emerge view composers etc.
β”œβ”€β”€ 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.
β”‚   β”‚   └── theme/            # Front-end scripts.
β”‚   β”œβ”€β”€ styles/
β”‚   β”‚   β”œβ”€β”€ admin/            # Administration styles.
β”‚   β”‚   β”œβ”€β”€ editor/           # Gutenberg editor styles.
β”‚   β”‚   β”œβ”€β”€ login/            # Login styles.
β”‚   β”‚   β”œβ”€β”€ shared/           # Shared styles.
β”‚   β”‚   └── theme/            # Front-end styles.
β”‚   └── vendor/               # Any third-party, non-npm assets.
β”œβ”€β”€ theme/                    # Required theme files and views
β”‚   β”œβ”€β”€ partials/             # View partials.
β”‚   β”œβ”€β”€ templates/            # Page templates.
β”‚   β”œβ”€β”€ functions.php         # Bootstrap theme.
β”‚   β”œβ”€β”€ screenshot.png        # Theme screenshot.
β”‚   β”œβ”€β”€ style.css             # Theme stylesheet (avoid adding css here).
β”‚   └── [index.php ...]
β”œβ”€β”€ vendor/                   # Composer packages.
β”œβ”€β”€ README.md                 # Your theme README.
└── ...

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.

app/setup/

Modify files here according to your needs. These files should contain registrations and declarations of WordPress entities only such as post types, taxonomies etc.

app/src/

Add PHP class files here. All clases in the App\ namespace are autoloaded in accordance with PSR-4.

resources/images/

Add images for styling here. Optimized copies will be placed in dist/images/ when running the build process.

resources/styles/theme/

Add .css and .scss files to add them to the front-end bundle. Don't forget to @import them in index.scss.

resources/styles/[admin,editor,login]/

These directories are for the admin, editor and login bundles, respectively. They work identically to the main resources/styles/theme/ directory.

resources/scripts/theme/

Add JavaScript files here to add them to the front-end bundle. The entry point is index.js.

resources/scripts/[admin,editor,login]/

These directories are for the admin, editor and login bundles, respectively. They work identically to the main resources/scripts/theme/ directory.

theme/

Add views in this, the theme/partials/ or the theme/templates/ directories accordingly. Avoid adding any PHP logic here, unless it pertains to layouting (PHP logic should go into helper files or WP Emerge controllers)

Contributing

WP Emerge Theme is completely open source and we encourage everybody to participate by:

About

An organized, ES6 and SASS powered theme taking advantage of the WP Emerge framework. πŸš€

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • PHP 52.2%
  • JavaScript 25.6%
  • HTML 12.4%
  • CSS 9.8%