Updating A Blog Post Using The WordPress REST API

This post aims to cover the steps required in order to update  a blog post using WordPress's built in REST API. The descriptions provided in this post are specific to the NextJs application created that utilises the REST API, treating WordPress as a headless CMS.

Updating A Post

Users can update a post by clicking the blue update button found on any post that they are the author of. In order to see or use the /blog/update/[id] page the user must be logged in as the author of the post. The page uses the getServerSideProps( ) function to get fetch the blog post and author data.

If an attempt is made to retrieve a blog post that does not exist then the user is provided the /pages/404.tsx page that can be seen in one of the following screenshots. An example of one of these attempts is demonstrated within the following screenshot.

If a blog with the ID provided in the url is found then the data is passed to the page and is then used to auto populate the text area fields with the existing data. Using this approach makes the modification of the page simple as changes to the existing content can be easily made.

By using NextJs dynamic routing the page can easily be accessed by using the correct URL. By using dynamic routing the application can easily read the slug contained within the URL and perform server side rendering based on this data (Vercel and NextJs, n.d.).

The update page created mimics the create page, which can be read about here, however uses a different POST route for the request sent. The request is sent using the fetchJSON function, using a HTTP method of POST directed at the /posts/<id> route of the WordPress REST API. The instructions for updating a post were retrieved from the WordPress developer website (WordPress, n.d.). 

The users JSON Web Token is sent within an Authorization header in the format Bearer <token>, as is shown in the following screenshot. More can be read about the applications implementation of authentication and authorization here.

The following screenshot provides an view of the network tab located in the Chrome developer tools, indicating that the update request was successful with an HTTP 200 response.

Conclusion

Updating a WordPress blog post using the WordPress REST API can be done by sending an HTTP post to the /wp-json/wp/v2/posts/<id> route as described by the WordPress developer website. WordPress makes CRUD operations easy to do using the REST API once an authorization system has been configured.

References

Vercel and NextJs (n.d.). Routing: Dynamic Routes | Next.js. [online] nextjs.org. Available at: https://nextjs.org/docs/routing/dynamic-routes [Accessed 14 Apr. 2021].

WordPress (n.d.). Posts | REST API Handbook. [online] WordPress Developer Resources. Available at: https://developer.wordpress.org/rest-api/reference/posts/#update-a-post [Accessed 18 Apr. 2021].

Comments

Post a Comment

Popular posts from this blog

WordPress Modifying A Child Theme & Using The OpenWeatherMap API

Image
The modification of a WordPress child theme can be accomplished in multiple stages. For my child theme modification users can search the name of a city and are provided some current weather data from openweathermap. To accomplish this I used TypeScript to make my requests and perform DOM manipulation. Child Theme Creation & OpenWeatherMap API To create a child them, navigate to the directory where WordPress themes are stored. Create a new directory that uses a similar name to the parent them you wish to extend, however append the text "-child" to the end. This text does not do anything, however this is considered best practice (WordPress, n.d.). This directory requires several files in order to be operational. Firstly, a CSS file that contains a description of the theme is required. This should be named style.css and contain text similar to the following extract. The child theme will now be available for activation thro...
Read more

Creating A WordPress Post Using The REST API

Image
The created NextJs application allows for the creation of a new blog post using the WordPress REST API by sending a HTTP POST request to  /wp/v2/posts  using the schema defined on the WordPress developer website(WordPress, n.d.). A custom built page was created that contains a form for creating blog posts. This page can only be accessed if the user has a currently authenticated session.  The Create functional component reads the state of the login session by accessing the AuthContext using the useContext hook. More can be read about the implementation of the persistence of an authenticated session by  accessing this blog entry. Creating The Posts Content Users can provide a blog with a title, an excerpt and can create HTML content for the post within the Post Content textarea shown in the following image. Each form input on this page uses the useForm form validation hook that was created for performing real time, reactiv...
Read more

Consuming The WordPress Posts Via The REST API

Image
WordPress provides a REST API that has good online documentation that includes information such as type definitions and route information(WordPress, n.d.). Fetching & Server Side Rendering As the data is stored on an external storage system, the server hosting the WordPress application, the page can not be directly served with the data if it is rendered on the client. By rendering the page on the client using Reacts default rendering technique the user will have to wait for the data to be fetched, parsed and then rendered.  A small subset of the post information is rendered for this page as the entire post is not required. To reduce the amount of fields returned from the REST API the ?_fields?= query is used, as shown below. To avoid this issue the data for the blog index page, the page that renders the posts and their excerpts, is rendered on the server. The data fetching is handled by the server meaning that when the client receives the page all of the data fetching has alrea...
Read more