Powering up the WordPress Admin with React

Custom post-types are part of the bread & butter of WordPress. We use them everywhere for things like products, events, or just about anything else needing special treatment.

Sometimes, a custom post-type is simple enough that all you need is the normal post content area and a handful of metaboxes (Pro-tip: CMB2 is a nice alternative to built-in metaboxes).

Other times, you need a post-type to be more customizable.

We recently built a special product admin for FirstBuild. This allowed site admins to create product pages out of different pre-defined, customizable widgets (like image slideshows, FAQs/Tech Specs, image/text content blocks) that can be displayed in any order.

If this sounds a lot like WordPress 5.0’s Gutenberg, it kind of is. We certainly wish Gutenberg had been available when we were building this thing.

Today, we’ll show you how to build the basic scaffolding for a similar implementation of your own. Our example will gloss over some of the React basics (like ES6 with Babel, Webpack, etc). If you need a working example of all that, check out this JavaScript Playground Template.

Step 1: Define a custom post type

For this, we’re going define a Product custom post-type. Add the following to the functions.php of your theme.

This will define a post-type without the normal content box.

Step 2: Add a meta box for our React app

We don’t actually need any metabox inputs. We just need to display an empty <div> for the React app to load into.

Add the following to the functions.php of your theme.

At this point, you should be able to create a new Product post. When you do, you’ll see a page that looks something like this:

Notice that the layout box is empty! Don’t worry, the markup we need for our React app is there waiting.

Step 3: Do stuff with React

Now we can setup a basic React app which gets loaded into the markup created by our metabox. You can easily use react+redux or any other React libraries you want. The sky’s the limit!

Step 4: Save your custom data

The easiest way to save your custom data is to catch the WordPress admin JavaScript events for the “Save Post” and “Publish” buttons.

You can do whatever you want with your custom data (we like to store it as JSON in the post_meta table), the let the rest of the post save normally when it’s complete.

Here’s a rough example:

This should give you a good framework for building your own custom admin pages using React. Have fun!