If you are looking to develop a single page application (SPA) theme with WordPress, you would find this project useful.
This project uses Grunt (http://gruntjs.com/) to manage all the build tasks. The
Gruntfile.js file is your entry
point to the build. Dependencies are resolved using
To build this theme, simply type the following in your command line:
% cd spa-wp-theme (install dependencies, you only need to do it once) % npm install (run grunt to build the theme in the "target" directory) % grunt
Each WordPress theme has a
index.php file. Most of the magic, however, happens in the
functions.php file. This project demonstrates the following techniques:
- Using PHP Class to encapsulate the theme logic to avoid name collision.
- Configure a proper URL (
baseUrl) for RequireJS to load its dependencies. You will want to look at
- Using jQuery with RequireJS in a WordPress environment. The jQuery library is enqueued in
functions.phpand is detected to avoid duplicate loading in
This project uses RequireJS (http://requirejs.org/) for code modularity. The application's entry point
src/main/js/app/entry.js. It is invoked by the RequireJS main JS file under
Currently, each individual JS file is dynamically loaded but you can easily change it to load the compiled JS
target/spa-wp-theme/js/compiled.js) by modifying the
For Unit Testing, QUnit (http://qunitjs.com/) is setup to run on every build. The test files are in
grunt-contrib-handlebars plugin to pre-compile the Handlebars files and how they are injected as dependencies
by RequireJS in the
Compass (http://compass-style.org/) and Sass (http://sass-lang.com/) are used to bring some sanity to CSS authoring.
The files are located in
src/main/scss. They are configured to compile with Grunt on every build.
I hope this project is helpful and gives you a idea of how to setup a Single Page Application WordPress theme. If you are interested in this theme, you may also be interested in some recent development on a JSON REST API for WordPress (https://github.com/WP-API/WP-API).
Most of the ideas/techniques are taken from people on the internet one way or the other. Please look at the References section below for where the credits are due.
 Loading conditional libraries in WordPress with RequireJS (http://dstrunk.com/loading-conditional-libraries-in-wordpress-with-requirejs/)
 Using requirejs in WordPress - wp_enqueue_scripts (https://github.com/jrburke/requirejs/issues/622)