A React-powered WordPress theme prototype.
PHP JavaScript CSS
Pull request Compare This branch is even with kwight:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
inc
js
languages
layouts
sass
.eslintrc
.gitignore
404.php
README.md
archive.php
comments.php
content-none.php
content-page.php
content-search.php
content-single.php
content.php
footer.php
functions.php
header.php
index.php
package.json
page.php
rtl.css
screenshot.png
search.php
sidebar.php
single.php

README.md

Tango

Tango is an experimental WordPress theme that uses the React UI library in conjunction with standard Underscores template files. The goal is to develop a method for adding the magic of JavaScript-based UIs to existing WordPress themes, built in PHP.

Requires the WP API Theming plugin.

Installation

  1. Install and activate the WP REST API plugin . Leave it on the develop branch.
  2. Install and activate the WP API Theming plugin.
  3. Clone the Tango repo into your wp-content/themes/ folder: git clone git@github.com:kwight/tango.git
  4. cd into your new Tango theme, and run npm install.
  5. Run npm run build to create style.css and js/public.js. See Issues below if you get EMFILE errors.
  6. Activate Tango from Appearance > Themes.

Configuration

Tango requires some basic information to be able to properly connect to the API, and generate accurate links. These are set in js/config.js.

  • api: the API's index, eg. http://localhost/wp-json (required)
  • serverRoot: the root folder of your web server, eg. http://localhost (required)
  • subdir: if your WordPress install is in a subfolder of your web server, enter the relative path here, eg. /trunk/src
  • localStorage: whether or not to use localStorage for API results (note: there is currently no handling for stale results)

Development

Run npm run watch instead of npm run build while developing, to have files recompile automatically upon save.

Issues

Make sure you have compiled style.css and js/public.js (with npm run build or npm run watch) before activating Tango; otherwise, you'll get an error because of the missing required stylesheet.

On OS X, there is a known issue with low limits of open files, which can cause Error: EMFILE errors with Browserify (used by npm run build).

Some users report changing system settings with sudo ulimit -n 2560 can solve it. If it does not, or you prefer not to change a system setting in that way, you can run npm run watch instead to generate js/public.js (but it will not be minified).