A React + Redux WordPress Theme — Version 2.0

It’s that time of year again. I’ve updated this theme, which runs off my open theme + a few minor style tweaks.

What’s new in v2.0?

It’s all completely under the hood. So you’ll see nothing different here… But I’ll know.

First, since I build the theme, react-router hit version 4 and changed everything. There are a whole lot of changes in this theme due to that. One huge benefit to this update is that now it is much easier to integrate state into your redux flow. You can see how to implement react router 4 in the index.js here.

Also, since building the original I started using ReactJS at work, and learned a lot about how things flow, and how to keep things clean. So many of the changes have to do with duplicate code, and cleaning up the flow of data. There’s still much that can be done, but it’s a nice step in the right direction.

Bootstrap finally went from alpha to beta, so I’ve implemented that, and a few minor tweaks to make everything work. I almost lost the header for a minute…

Another piece I started implementing is a proper php fallback. When I first build the theme I thought it would be cool for it not to rely on php at all. But let’s be real, sometimes there are browsers that hiccup, and people don’t use the tools they should, so I thought it would be prudent to make the simplest functioning theme in php to fall back to. It’s not done, so for now they’ll see a list of titles…

Go check it out and I’d love to hear your thoughts.

As always, questions? comments? shoot me a line!

The Launch: A React+Redux WordPress theme

I think it’s just about done, so I decided to go ‘live’ with it.

You’re looking at it now. What do you think?

Here’s my first post about this theme…

I’ll probably tweak it over the next weeks, months. But I’m itching to give it a test drive. For now it’s good enough for government work… which means a lot less than it did just a few months ago.

I’lll also write more about the process, and how it works asap.

Find a bug? Let me know.

 

Developing A Theme for WordPress Using ReactJS, Redux, and the WP REST API

To being, check out the project here.

This is a work in progress, but I got enough done this weekend that I’d like to share.

I wanted to work on a project using ReactJS and Redux. I’ve heard a lot about it, and wanted to explore it on my own. I do that with every technology before I bring it to the office. Since WordPress incorporated the WP REST API in the core for version 4.7 I though that that might be a great opportunity to explore both the API using ReactJS+Redux.

There were a number of interesting challenges I faced building this. The idea was to make a theme that would work 100% like any other WordPress theme; that could be installed and work normally.

As it currently stands there are some missing features, which I’ll get to later. But this is past a proof-of-concept and well along the path to be fully operational.

I will explain more about how it all fits together in a future post, maybe when I load it onto this site. In this post I just wanted to muse about the process so far, and invite others to join in the project or share their ideas and implementations.

Endpoints: Handling Pretty Permalinks

The first challenge was to figure out how to handle “Pretty Permalinks.” You know what they are. Back in the early days of CMSs all URLs ran off of GET variables (http://blog.example.com?p=23). But because Google gave better SEO juice to readable URLs we all started getting urls that were readable. This was incorporated into WordPress as well.

The problem with implementing this in a single-page JS app is that the default path for posts is  /year/month/name-of-post/. That can make routing complicated. Not only that, but you can change the permalink format too. So in order for this theme to work, I’d have to handle that.

My solution was to have a catchall route and build a custom endpoint for Pretty Permalinks that would be powered by the url_to_postid() method. This ended up working pretty well and is what powers both single pages and posts.

Endpoints: Menus

Another challenge was how to handle menus. They’re dynamic, and not included in the current API. To solve this I borrowed the main class from the WP API Menus plugin. (I love GPL, don’t you?) It was written by Fulvio Notarstefano, and was beautifully implemented.

I contemplated having the menu data loaded as js variables on page load, since they don’t change. But I wanted the challenge of figuring out how to implement multiple versions of the same element with ReactJS+Redux, so they got their own endpoint.

Endpoints: Featured Images

I also modified the main post endpoint to include featured images so that I wouldn’t have to do a separate call for each image on archive pages.

Search

Another challenge, in general, was handling the different routes for different actions. It’s not all that complicated once you get the hang of it. But working in single page apps can get interesting, and if you’re not careful you can lose the benefits of using frameworks like Redux.

All in all the WP REST API is quite robust and is now polished. If you check out my redux actions you can see that I’m using the same endpoint for the main index archive, single posts and search. Which is really nice. I’ll be expanding this file for the taxonomies as well. Apparently all you need is to add a filter GET variable.

What’s still missing from the project?

There’s still a lot to do. First and foremost, there is currently only minimal styling.

There are a whole lot of things that are needed to make it a theme the might be accepted into the theme repo. First of all, I haven’t done anything with taxonomies yet.

I’d also like to add widgets. That is another interesting problem which I’ll probably solve the same way I did pretty permalinks — add a new endpoint just for them. I’ll have to render them completely on the server, then pass them down via the API. It’s not pretty, but it should work.

I’ll also want to clean up the hooks that run before the page loads. Since the entire theme is running off the API, directly from the index.php, it won’t need a lot of the server-side processing, as that is done already in the API.

The customizer isn’t playing well with the menus, I’ll have to figure that out.

I’m sure there’s a whole bunch more that needs to be done too. I’ll write about what I discover in the summary post once (if) this theme goes live.

Closing thoughts

It’s a fun project and I’ll look forward to playing more with ReactJS and Redux. The first thing I noticed was how snappy it was. It also forces you to think about the different components in a very healthy way. When designing components, each one should be independent. You should be able to drop any one in any other project (for the most part) and use it with minimal wiring up. That’s good coding practices.

Join me!

If you find this project interesting please feel free to share with me your ideas for it.