UsTwo Project Overview

The UsTwo project is not a WordPress theme or plugin, in fact it isn’t really WordPress, it is merely powered by it. The UsTwo project is actually a decoupled React website, powered by a WordPress site and it’s REST API.

The UsTwo project was actually a website built for the UsTwo digital agency. They focused on the design, and brought in

UsTwo Site Out of the Box

This is not your typical WordPress theme or WordPress plugin, in fact it in itself isn’t even WordPress!

What you are getting is actually a standalone application that runs React.js but completely separated from WordPress, it is only using WordPress to power the application (fill it with content).

This is not for the faint of heart, out of the box you do not get much, but what you do get is the need to know Docker. Docker is a container-ized server solution which has a lot of popularity among certain developers. Think of it is another way to have a local setup besides ServerPress or VVV. Docker allows you to create containers for every aspect of the stack, or have it all in 1 container.

I did not know Docker at all coming into this, after trying for a few weeks to get the site up and running locally (their documentation has some to be desired) I had to call up on my friend Shawn Hooper who does know Docker, a lot more than I do. I challenged him to get it up and running, which he did in a matter of minutes. 2 weeks later, I got what I needed and had it running locally.

Just to share, these are the commands above I ran in terminal from start to finish, after installing (through brew) Docker to finally get it working. If you are having issues connecting to the IP Docker says it’s running on, do a docker-machine ip dev and then docker ps the second one will show a list of containers, find with the nginx image, and find the port it is running on. Mine was running on port 9080, so i went to the IP address and port 9080 to finally see the site running.

Customizing The UsTwo Project

Customizing the project is not as easy as other projects I have seen. When Josh Pollock and I created a similar concept decoupled front end with Angular, we wanted it to be simple to get up and running, so we created a very convenient local config file which you could modify to point to your own website, and it would grab default wp-json data.

The first thing I wanted to do with this project is point to my own site, so I went looking for a long time for where the API url was set. Since I didn’t find a centralized config file, I started to look at other config files I could find, and found 1 that allowed me to change the URL. I pointed it to https://roysivan.com/wp-json hoping by default the site would work and was mistaken.

My suggestion to is that anyone wanting to do something similar would first open the network tab and look at the data coming into the home page. Once I have a clear understand of what my site needs to serve up, I would implement it with a custom API route and endpoint so that my content will be easily digestible by this ustwo front end.

Styling is a little bit easier, but different. In React, a lot of the styling happens within the component itself. I was trying to find a way to change the background colors to something else and found that each component gets created with the background color, and there is a function fired on scroll to set the next upcoming color, not as easily done.

If you are looking for something that you know is in the CSS, each component has its own style.scss which can be built by running make css in terminal.

Project Ideas for the UsTwo Project

The potential for this is great. If you want a really advanced decoupled website that is powered by a headless WordPress build, this is a great option.

This isn’t for quick, or easy projects. This is not something easily built in a day or two, but will require some time and energy to go through to make it your own. That being said, it is a very impressive foundation to start from. It is very powerful, lots of modular and decoupled code logic, which is great fundamentally.

If you are looking to build this out as as a theme, I’d recommend looking at other React themes that aren’t decoupled sites. If you are looking to build a web-app, this may make a good starting point also, but it seems likes it is more focused on delivering content, as opposed to being an app boilerplate.