Creating a Custom WordPress Plugin: Rendering a SPA and Exposing a REST API
If you’ve been on the Internet, chances are you’ve used a WordPress site. WordPress, a free, open-source content management system (CMS) that allows you to host and build websites, is currently responsible for 43% of all websites on the Internet. With so many WordPress websites out there, finding ways to increase your site’s useability and efficiency is key. One easy way to do that? By rendering a SPA and exposing a REST API.
What is a SPA?
A single-page application (SPA) is a web app that is one page with body content that is updated, rather than multiple pages. This increases efficiency and performance for users because they are able to switch between content without needing to load whole pages each time.
What is a REST API?
A REST API, also known as a RESTful API, is an application programming interface (API) that follows the representational state transfer (REST) architectural style. In a WordPress site, you may need to create additional database tables if the pre-existing tables aren’t sufficient for modeling your business data. However, the existing WordPress API endpoints won’t allow for the fetching and updating of data in those new tables. Luckily, WordPress makes it really easy to configure additional REST API endpoints to manage that custom data.
How to Render a SPA and Expose a REST API
Every WordPress plugin has an associated php script that runs when the page loads. Within that script, there’s nearly infinite flexibility. You can:
- Run database migrations
- Append a JavaScript file to the page, which mounts a SPA to the Document Object Model (DOM)
- Expose a REST API
- Tap into the myriad of application lifecycle hooks WordPress exposes.
Step 1: Create a Custom Plugin
Creating a custom plugin is super simple. Just create a folder under /wp-content/plugins that includes an index.php file with the following contents:
The name of the folder doesn’t matter. You should now be able to enable the plugin from the wp-admin.
You can learn more about plugins at: https://developer.wordpress.org/plugins/
Step 2: Render the React App and Expose a REST API
“Actions” are the lifecycle hooks that WordPress exposes. In this example, we can use those actions to render a React app and expose a REST API:
- The “rest_api_init” action will be used to expose the REST API
- The “wp_enqueue_scripts” will be used to include a JavaScript file in your page that renders the SPA.
Here’s how the “rest_api_init” action can be used to expose a REST API with a single GET /foobars endpoint:
The above endpoint should now be accessible at: yoursite.com/wp-json/our-api/foobars.
There is one caveat to this step: The permission_callback for a route can be assigned a function to allow the configuration of authorization for the endpoint being registered. However, I don’t recommend using it because that permission callback becomes associated with the route name, not the method, which means you can’t have separate permission callbacks for GET foobars/ and POST foobars/. if a permission_callback is registered for both routes, both callbacks will be processed on requests to either endpoint.
Here’s how the “wp_enqueue_scripts” action can be used to include a JavaScript file on the page that will render a SPA:
In the above code, “index.js” is declared to be the JavaScript file that we want to include on the page. Ensure the JavaScript file exists in your plugin folder and that it contains the code that will mount your SPA of choice to the DOM (document object model).
That’s all there is to it. You now have a SPA and REST API neatly residing within your custom WordPress plugin.
You can find a comprehensive list of available WordPress actions here. To learn more ways to take your WordPress site to the next level, contact Grio today.
