Kelly DwanKelly Dwan is a Cambridge-based Code Wrangler at Automattic. She has worked on everything from small business websites, to higher education, to enterprise and big media. In her spare time, Kelly develops WordPress themes and contributes to the WordPress community.

Kelly wrote Foxhound in React because she wanted to explore the REST API and what it would be to make a javascript theme. It turns out there’s a lot you need to reinvent, like routing (permalinks), fetching data (from the API, instead of WP_Query), and so on. She wanted it to be a theme, specifically, so that anyone could download it and drop it into a WordPress site – instead of needing a separate node server for a standalone app.

 

An Overview of Foxhound

This is a basic styled WordPress theme focused on text and content heavy blogs. It is powered by ReactJS, webpack, and babel. The ReactJS offers pretty (SEO-friendly) URLs out of the box without a hashtag or bang (!) like some of the previous JavaScript Single Page Application themes.

The theme was created by kelly dwan & mel choyce, currently located on GitHub for anyone to contribute to.

If you are happy with the theme and styling out of the box than there isn’t much needed. However if you want to start editing there are a few layers that will be involved.

No matter what you will need a knowledge of npm and how it works fundamentally

A knowledge of webpack would also make life easy for editing files, but not necessary as it works out of the box.

 

Foxhound Out of the Box

Note: This theme requires WordPress version 4.7

You get a pretty minimalistic theme out of the box. The colors out of the box are soothing, nothing too crazy, but clearly it is focused on blog content. Out of the box you get views for every major page you can think of from the typical list page, to single / detail post and page views.

Basically, out of the box you get a pretty complete theme unlike some other JavaScript powered themes that are still being worked on heavily.

Once the theme is activated you may want to consider adding widgets to the sidebar, and setting the menu for the Primary Menu location created by the theme.  The only other necessity will be to change your permalinks to match /%year%/%monthnum%/%postname%/ per the documentation.

 

Customizing Foxhound

Customizing the theme will take a certain level of knowledge of how to work the technologies used.

CSS

For CSS changes you can run npm run watch which will start the watch command. Now go into the sass directory and make any modifications to the scss files there, as you save, the watcher will auto build the css and map.

DOM / Layout

For layout, it get trickier. While in most typical WordPress themes you’d look for a php template, with ReactJS you work with primarily jsx files, and finding the exact one you need can be tricky as ReactJS is component based (and components are often nested). All jsx files which house both DOM template and basic JavaScript functionality are in the js/components directory.

If you are using WebStorm or other like IDE, it may be easier to search the entire components directory for a DOM element or class you are looking for to find the appropriate file to edit, till you get the hang of it. The dev team did a great job with naming convention, so searching for a particular component wouldn’t be too tough if needed. Keep the watcher on and it will auto build as you save.

Custom Post Types

Custom Post Types can be tricky. I tested my instance out with a podcast custom post type and noticed that the permalinks did not match by default what the theme had requested. I opened up js/index.jsx and found the routes constant. I added in a new Route: <Route path={ `${ path }podcast/:slug` } component={ SinglePost } />

This defined out the podcast route and sent the slug as a variable. I wanted to keep the look and feel the same, so used the same component. If you want to try using a different component or a modified version, copy the SinglePost component and name it something else, then define it in the Route definition.

Custom JavaScript Functionality

Adding custom JavaScript functionality will be the most difficult and will require the most knowledge of ReactJS. Learn how to add functionality to a particular component, you can probably also enqueue another JS file all together, but I’d recommend sticking to ReactJS standards first, before trying to enqueue something else entirely.

 

Project Ideas Based on Foxhound

This theme would be great for a site that is content heavy, a lot of concurrent visitors (traffic), and needs to be very mobile friendly. The site loads quickly, and switches pages (views) just as rapidly. Unlike some of the other JavaScript Application themes which can be focused and tweaked for more web-application purposes, the Foxhound theme is really a great content centered theme.

Some things you may want to try with this:

  • Skin for a particular blogging niche
  • Add a custom post section for adding a portfolio
  • Try extending it to work with API supported plugins

 

Share Your Work

Have an example project you have built based on this?

Let Zac know and we will feature it here!