This is an article written by me for Smashing Magazine five days ago. It’s about building a WordPress theme and store using React.
So you’ve trained yourself as a web engineer, and now want to build a blazing fast online shop for your customers. The product list should appear in an instant, and searching should waste no more than a split second either. Is that the stuff of daydreams?
Yes, the WordPress REST API will help you build the back-end foundation for your web application. This is a good choice for your web application’s back-end technology if you are building a content-driven solution. WordPress will interoperate smoothly with other technologies as well; you could use Node.js as the focus of your application to connect to other RESTful services.
The WordPress REST API is a game-changer for WordPress, which can now safely be called a web application framework — not just a CMS. Now that the front- and back-end are completely decoupled, WordPress can be used as a mobile app back-end or as a back-end for any system focusing on content.
But why WordPress? The reason: You will be amazed at the functionalities that emerge out of the box with WordPress. You will get extensive user management, media management, and an incredibly developer-friendly set of APIs to extend your work.
Let’s Jump Into Building The Theme
This article assumes you are already familiar with the various existing WordPress APIs, particularly the ones that drive the development of themes for your site’s aesthetics, and functionalities for your site’s plugins. I also assume you have set up your development platform for WordPress, such as the LAMP stack in a Linux or MacOS environment.
For simplicity, though, I will refer only to absolute paths as visible with the XAMPP platform that is used with Windows.
Now, let’s create an instance of WordPress in our localhost, naming it ‘Celestial.’ That is the name of the WordPress theme we are going to use to help us set the direction for building future themes ready for use with web applications powered by the WordPress REST API. You may already be familiar with WordPress’ much-loved template hierarchy, but with the REST API, you have an opportunity to discover something different!
We then need to create a folder for the theme within the
wp-content\themes folder. Navigate to
C:\xampp\htdocs\celestial\wp-content\themes\ (or equivalent) and create a folder
celestial. Add these files inside the
celestial theme folder:
The catch-all file for the theme.
This contains information about the theme (and not actual CSS).
To write the functionality and the importing of CSS and JS files.
Add an image file named
screenshot.jpg if you want a picture for your theme showing inside the dashboard.
Note: The code for each file is a few lines long and can be found on GitHub.
Next, log in to your WordPress Dashboard, head over to Appearance→ Themes and select ‘Celestial’ as the theme. Now that the foundation is in place, let’s get onto creating the theme.