If you’ve been on the internet, chances are you’ve used a WordPress website. 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 sites out there, finding ways to increase the usability and performance of your site is important. An easy way to do this? By rendering the SPA and exposing the REST API.
What is SPA?
A single-page application (SPA) is a web application that updates to a single page with body content, rather than multiple pages. This increases user efficiency and performance as they are able to switch between content without having to load entire 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. You may need to create additional database tables on your WordPress site if the pre-existing tables are not sufficient to model your business data. However, existing WordPress API endpoints will not allow loading and updating data in these new tables. Fortunately, WordPress makes it really easy to configure additional REST API endpoints to handle that custom data.
How to deliver a SPA and expose a REST API
Every WordPress plugin has an associated php script that runs on page load. There is almost infinite flexibility in that scenario. You can:
- Run database migrations
- Attach a JavaScript file to the page that places the SPA in the Document Object Model (DOM)
- Discover the REST API
- Tap into the many application lifecycle hooks that WordPress exposes.
Step 1: Create a custom plugin
Creating a custom plugin is extremely simple. Simply create a folder under /wp-content/plugins that includes an index.php file with the following content:
The name of the folder does not matter. You should now be able to enable the plugin from wp-admin.
You can learn more about plugins here: https://developer.wordpress.org/plugins/
Step 2: Submit the React application and expose the REST API
Actions are lifecycle hooks that WordPress exposes. In this example, we can use those actions to expose a React application and expose a REST API:
- The “rest_api_init” operation will be used to expose the REST API
- “wp_enqueue_scripts” will be used to include a JavaScript file on your page that represents 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 available at: yoursite.com/wp-json/our-api/foobars.
There is one caveat to this step. for a route, the permission_callback can be assigned a function that allows configuration of the permission for the endpoint being registered. However, I don’t recommend using it because that authorization callback is bound to the route name, not the method, which means you can’t have separate authorization callbacks for GET foobars/ and POST foobars/ . if permission_callback is registered for both routes, both callbacks will be processed for requests to either endpoint.
Here’s how the wp_enqueue_scripts action can be used to include a JavaScript file on a page that will render the SPA:
In the code above, “index.js” is declared as the JavaScript file we want to include in the page. Make sure that the JavaScript file exists in your plugin folder and that it contains the code that will place your chosen SPA in the DOM (Document Object Model).
That’s all there is to it. You now have a SPA and REST API neatly nested within your regular WordPress application.
You can find a comprehensive list available WordPress actions here. To learn more ways to take your WordPress site to the next level, contact the grio today.