 Hey there, and welcome to Learn WordPress. In this tutorial, we're going to learn about interacting with the WordPress REST API using the Backbone.js client that ships with WordPress. This video will cover the REST API schema, and then you'll learn how to create, update, and delete WordPress data. If this is your first time working with the WordPress REST API, I recommend watching the Using the WordPress REST API tutorial. This will introduce you to using the WordPress REST API with code examples. Alternatively, download the example code from that tutorial using this URL and use this to follow this tutorial. When working with the WordPress REST API, it's useful to keep the endpoint reference section of the WordPress REST API documentation handy. The endpoint reference lists all the endpoints that ship with WordPress call. Looking on an individual endpoint, say posts, I'll show you the schema for that endpoint. The schema defines all the fields that exist for a resource when fetching or creating data of that specific type. You will notice that many of the endpoint fields match up with fields that are available in the WordPress database related to that data type. Some, however, are slightly different. For example, the title field for the post endpoint will match up to the post underscore title field in the post table. It is important to remember that these differences exist and then to use the correct field name when interacting with the API. For example, when fetching the post via the API using the built-in backbone JS client, you would filter by the title field and not post title. Similarly, when looping through a list of posts returned from the WordPress REST API, you would use the post.title.rended property as the title field on the post is an object and the rendered property of that object is the actual content of the post's title. Let's use the WordPress REST API to create a new post. To do so, we'll need to pass the title and content fields to a new post model. You already have a plugin that allows you to list posts in an admin page, so you can use that as your starting point. First, you will need to update the page with a form that will allow you to enter the title and content of the post you want to create. You can do so using the following HTML. So under the main div, we'll add a new div and close it out. Then we will add a header and we can add a form element and inside the form, we'll add another container. Then we'll start with a label and give it a full property. So this is post title, close the label. And then let's add an input field type of text. And let's give it an ID and we'll call this WPlearnPostType. Then we'll copy this ID in the full attribute for the label and then we can close the div. And then let's copy this to create another form input. This time we'll change it from post type to post content. And then instead of an input, let's use a text area to find the ID as WPlearnPostContent. We've got some columns, so it takes up a decent amount of space, as well as rows, and then a text area needs a closing tag. And then finally, we can copy the first input to create the button to submit this. And we'll say the input type is a button. It doesn't need a label. The ID can be submitPost. And we'll give it a value of that. Here's what the form looks like when it's rendered on the admin page. With the form added, the next step would be to add the JavaScript that will handle things when the button is clicked. So first, we need to define a variable for the button. So we can say const submitPostButton. We document getElementById. And we can copy the ID from the form in the label. And then we can do a check. And here we can just say if submitPostButton. This is the same as doing the type of and undefined check that I'm doing here. If the button exists, then we're going to add the event listener to the button. Going to add the click event listener. And then we will do something once the button is clicked. Now that you have the button click event listener added, you can add the code that will handle the creation of the post. To do this, it's a good idea to create a separate function to create the post and call that function on the click event. So the first thing you'll need to do is create a function called submitPost. So just above this, we can say function submitPost. And then update the click event listener to call that function. So we can change this to submitPost. This will call the submitPost function when the submitPost button is clicked. Inside the submitPost function, you'll need to get the title and content values from the form fields. So we can do something like const, post title, document, getElementById, and then get the title field ID attribute. And we want to get the value of that input. And then we can do the same for the post content, appeal and post content, get the value. Next, you'll need to create a new post model object using the Backbone.js post model. You will then need to pass the values for the title and content to the model object. So the way we do that is we go post new WP.API models, post, and then we pass in an object. And according to the documentation, the fields are title and content. So we can say title is the post title variable and content is the post content variable. So that will be the contents of the fields. Finally, you'll need to send the request to the post route to save the data using the post model or save method. You could also add a done callback to handle the response once the post is saved to show some kind of message. So what we can do here is we can set post, save, done. And then we can specify function to trigger once the response is returned. The response will be a post if it's returned successfully. Do something with that post. Or we could just do something like say, post has been saved. If you refresh the admin page and enter a title and content, then click the Add button. You should see an alert that says post served. So let's try that. New post, new post content. And let's click and we see post served. If you use the plug-in example from the previous tutorial, you might now want to click the Load Post button to load the posts. Notice, however, that the post you just created doesn't appear. This is because the default value for the status field in the post model is dropped. So let's find the status field. And the options we have are publish, future, draft, pending, and private, so probably defaults to draft. You can change this by adding the status fields to the post model object and passing in the publish status. So here you can say status, pass in publish. Create the new post, hit the Load Post button, and you should see the new post in the list. Let's try that. So let's refresh and say another new post, content, hit Add. Post has been saved. Let's load the posts. And there is another new post. While we're here, let's check the post list. And we'll see there's the new post that was created in draft. And there's another new post. You can also update posts in the same way as creating them. The main difference is that you need to pass the post ID to the post model so that it knows which post to update. First, in the PHP file for the plugin, you'll need to add a new form to manage handling updates. For this, you can simply copy the code that's used to create posts, but update the relevant form field ID and add a field for the post ID and finally change the button text to update. So let's take this entire Add Post section and we will just copy and paste it below. And let's start doing that. So we'll say update post. We'll leave the post title, but we'll make the IDWP learn update post. Post content will stay the same, but we'll change the four attributes and the ID attribute to WP learn update post. We'll change the button to WP learn update post. Change the value to update. And finally, we'll create a new form field just above the title for the ID. So the label will be WP learn update post ID, post ID, and WP learn update post ID. That's all that's needed on the PHP side so you can switch over to the JavaScript file. The next step is to add a function to handle the post update. This will be very similar to the current submit post function, but we'll need to be updated with the various element IDs and pass the post ID to the post model. You can also leave out the status in this example. So let's take submit post and pop down the bottom here and let's call this update post. And it'll be WP learn update post title and WP learn update post content and then we will need a field for the ID. So we can copy post title and create a new one called post ID and get the correct ID attributes. And then in the object that's passed to the post model we need to specify the ID and we can remove the status because we're not going to update that now and let's just change the message to post updated and there's the function to handle the post. Finally, you need to add the click event handler for the update button and call the update post function when it's clicked. So let's take the submit post one and change it. So update post, update post button document get element by ID, WP learn update post. If update post button add event listener and let's call the update post function. The last thing you'll need to do is update the load post functionality to include the ID in the list when you load posts. So right at the top here, we will add in the all posts pitch we will add the ID to the list of fields to be pitched and then we will include the post ID to the output in the text area and we will just separate it with a comma. Go ahead and test this out in your browser. Refresh the admin page and load the posts. Then enter an ID updated post title and content in the update form and click update. So let's take ID 175 and we'll say updated post and updated post content and let's click update and the post has been updated. Once the post has been updated, reload the list of posts to confirm the content has been updated. Very clear it and load 175 has been updated. You can also check the post in the WordPress admin to confirm the changes. So if we refresh the post list, there is the updated post and there is the updated post content. Notice how in the block editor, the post content is displayed in a classic block. This is because in this simple example, you're not passing block markup to the post model. You can pass block markup to the post model, for example, by wrapping the content in a WP paragraph block tag, but this is beyond the scope of this tutorial. Just to show you what this would look like, let's create a new block post and pass in some valid block markup using WP paragraph tags, say new post content and if we add that, the post is saved and if we look at the newest post, the content renders as a paragraph block. Now that you know how to create an updated post, let's take a look at how to delete a post. First, you'll need to add another form to the admin page that will allow you to enter the ID of the post you want to delete, as well as a button to trigger the delete. So in the PHP, we can just grab update and use it for the delete and we just need the ID so we don't need the title and content. We'll say, don't we learn post ID, don't we learn post ID? And then we'll say delete post and delete, delete. Then as before, set up the click event listener for the button as well as the function to handle the deletion. So again, here we can just grab, for example, the update post, use the post ID and say, delete post and it was the WP learn post ID field and do the same, creating a button variable. So delete post button, WP learn, delete post, add a click event and call delete post. Now that you have the button click event listener added, you can add the code that will handle the deletion. The first thing you'll need to do is get the value from the form field, which we have already, then you'll need to create the new post model object and pass in the post ID. So it will be const post, new WP API models post and passing the object and let's do ID and then post ID. Finally, you'll need to delete the post from the database using the post models destroy method. As before, you can also add the done call back to handle the response once the post is deleted. So post destroy, then go back to handle the response once the post has been deleted and we'll just unload a message to say post delete it. Now refresh the page and load the posts, grab a post ID, pop that into the delete form and hit delete. System says the post has deleted, so let's load the posts and make sure that 178 is no longer there. 178 has been deleted. Let's verify this by looking at all the posts and if we look in trash, there is the new block post which is ID 178. More information in using and interacting with the WordPress REST API as well as how to extend it. Check out the WordPress REST API Handbook at developer.wordpress.org. Happy coding.