A text-focused blog theme for WordPress (in React)
JavaScript CSS PHP
Switch branches/tags
Nothing to show
Clone or download
ryelle Update: Webpack, babel, eslint, react, react-router… (#124)
* chore(package): update node-sass to version 4.1.0


* chore(package): update sass-loader to version 5.0.0


* Update webpack to v2

* Chore: upgrade all outdated packages to latest version

* Clean up webpack

* Update packages

* Run proptypes codemod

* Convert ContentMixin to a helper library, run createClass codemod

* Update babel & eslint configs

* Fix eslint issues, run prettier

* Update eslint configs, run codemods

* Get tests to passing

* Builds and renders!

* Ignore local `Projects` files (linked modules)

* Update wordpress-query-posts

* Update to beta versions of query components

* Pass the taxonomy prop down to the Term component (passing props on Route is deprecated)

* Update props with react-router v4 changes

* Update node version for testing

* Add a HOC to handle scroll & focus restoration on location change

* Add redux middleware to intercept location changes & fire the jetpack load event

* Bring back `Switch`, otherwise the Not Found component always displays

* Add “Technical Requirements” to cover PHP version for servers and node version for local dev (fixes #121)

* Add stripTags to remove HTML from meta descriptions (fixes #119)

* Fix front page route for page-on-front sites

* Make console.log a warning

* Strip out the `?` from query strings before parsing

* Use get_the_author_meta to enable filtering of username

* Version bump

* Update version of uglify to support ES6 (required by striptags package)

* Fix test with update to react-router
Latest commit dc06bd6 Nov 29, 2017
Failed to load latest commit information.
inc Decode and re-encode the search term for the URL redirect Feb 19, 2017
js Update: Webpack, babel, eslint, react, react-router… (#124) Nov 29, 2017
sass Update: Webpack, babel, eslint, react, react-router… (#124) Nov 29, 2017
test Update: Webpack, babel, eslint, react, react-router… (#124) Nov 29, 2017
.babelrc Update: Webpack, babel, eslint, react, react-router… (#124) Nov 29, 2017
.editorconfig Add editorconfig file Nov 12, 2016
.eslintignore These files don’t exist anymore Jun 19, 2016
.eslintrc Update: Webpack, babel, eslint, react, react-router… (#124) Nov 29, 2017
.gitignore Refactor to redux, query components, & the wordpress-rest-api module (#4 Jun 18, 2016
.gitmodules Remove submodule in favor of new npm packages Oct 23, 2016
README.md Update: Webpack, babel, eslint, react, react-router… (#124) Nov 29, 2017
circle.yml Update: Webpack, babel, eslint, react, react-router… (#124) Nov 29, 2017
footer.php Initial commit Dec 5, 2015
functions.php Update: Webpack, babel, eslint, react, react-router… (#124) Nov 29, 2017
header.php Skip link should direct to the same div that is auto-focused after pa… Feb 18, 2017
index.php Speak the error/success of submitting a comment for screen readers, a… Mar 17, 2017
package-lock.json Update: Webpack, babel, eslint, react, react-router… (#124) Nov 29, 2017
package.json Update: Webpack, babel, eslint, react, react-router… (#124) Nov 29, 2017
phpcs.xml Add a phpcs config file Oct 16, 2016
screenshot.png New screenshot Dec 14, 2016
searchform.php Redesign the search form for accessibility, add a color-contrast visi… Feb 20, 2017
sidebar.php Add a screen reader label for the footer widgets Mar 17, 2017
style.css Update: Webpack, babel, eslint, react, react-router… (#124) Nov 29, 2017
webpack.config.js Update: Webpack, babel, eslint, react, react-router… (#124) Nov 29, 2017
zip-theme.js Move files to a config set in package.json Mar 19, 2017


Foxhound CircleCI

A react-based theme for WordPress.



Since this is a more "experimental" theme, you'll need to have a few things set up before it'll work.

  1. WordPress 4.7 or higher, which includes the REST API content endpoints.
  2. You'll also need this WP-API Menus plugin. The REST API doesn't provide an endpoint for menus, so another plugin is necessary.
  3. Your permalinks will need to be set to /%year%/%monthnum%/%postname%/. Single-post/page views will not work without permalinks set. Category & tag archives bases should be set to category and tag, respectively.

Technical Requirements

  1. WordPress 4.7+
  2. PHP 5.4+
  3. If building locally, Node 8.9.1 + npm 5.5.1

Display & Features

This theme supports your average blogging site. It looks best with "Front page displays" set to latest posts (in Settings > Reading), however it does support a static page & blog posts on another page. This theme works best for very text-focused sites. It will display featured images on single posts & pages, but not on archive/list views. There is currently no special handling for post formats.


This theme does have a few "restrictions", things that don't work like they do in other WordPress themes.

The theme does not display anything if javascript is disabled. This should not affect your SEO, as google will crawl your page with JS & CSS enabled. This should not affect accessibility (99% of screen reader users have javascript enabled, in 2012). However, if your site needs to be usable without javascript, a javascript theme is not your best choice 😉

The API cannot be blocked by a security plugin. Some plugins recommend blocking the users endpoint, but that is required to show the author archive. If you need to block the user endpoint, the rest of the theme should work, but might be unstable if anyone tries to visit an author archive.

Permalinks for pages and archives are changed by this theme. They'll be reset if/when you deactivate the theme. You might want to set up redirects using something like Safe Redirect Manager.

This theme does not support hierarchical category archives - only parent category archive pages can be displayed. This may be fixed in a later version of the theme (see #30).

Plugins might not work as expected, especially if they add content to the front end of your site. Most Jetpack features do still work.

If you're logged in to your site, the admin bar will currently not update when you navigate pages, so the "Edit X" link will only reflect the page you initially loaded. You can force-reload the page to update the admin bar, as a work-around.

Thanks to…

These are a few of the packages/plugins that made this theme possible.


You can also install Foxhound yourself from this repo, by building it yourself. Download or clone this repo into your /themes folder, then run npm to install and build the javascript & CSS files. The process will look like this

git clone https://github.com/ryelle/Foxhound foxhound
cd foxhound
npm install
npm run build

Now you'll see a build/app.js file in the theme, and it will be available for you to switch to in wp-admin. If you're having trouble getting the theme active, please file an issue & I'll help you out.

If you don't have npm installed, you can find instructions on the npm website.

There are a few other NPM scripts you can run:

npm run dev runs webpack, with configuration enabling source maps. Eventually build will also compress/uglify built files, so this would skip that too (but that's currently disabled).

npm run watch runs webpack --watch, everything the previous command but it will also watch the source files for changes and recompile automatically. Best to run while developing. This does not live reload.

npm run lint runs eslint over all the javascript files. Webpack does this as well, before compiling, but only notifies you of errors. This command will catch warnings too.

On the PHP side, we're also adding in some prefixes for permalinks (also called routes).


If you notice anything broken (that isn't mentioned in the "restrictions" section), let me know by creating an issue.

Thanks for checking out Foxhound!