2.3 Post Methods

Hello everyone, I am Reggie Dawson. Welcome to the Get Started with WPCOM.js Course for Tuts+. In the last video, we looked at the WPCOM in Site methods. As I mentioned, there's a lot that you can do with the Site methods, but the one thing you can't do is return a specific blog post. Now the Post#get method allows us to provide a query that will be the ID of the slug of our post. Now the documentation is not very clear on how this works, so I had to spend a little time digging through the WPCOM module to see how this is configured. You will see how we grab the post in the moment. Also contrary to what you may see in the documentation, I like to use the promise-based methods, as opposed to the callback functions that you see in the examples. First, let's go back to our index.html file. Here we will add another button and an input. The input is where we will add the ID of the post that we want to access. Then we go over to index.js and first add a click handler for our new button. Then after we add the handler for the new button, we will empty out the contents of the results div in the displayPost function. This is because we will append everything to the same results div, and this will clear it out before we add anything. Then we're going to add the displayostByID function. In this function, we also empty out the results div before we add anything. Then we grab the value of our input with the jQuery var method. Then we create a reference to our WPCOM instance, site and then post. Here we are passing in the ID that we grabbed from the input. This is the query that we are passing to the get method. Whatever we type for our ID will be passed to our get. Then we pass thePost.ID to the get method. From there our success method is similar to what we did when we displayed the post. First we create an array, then we store the contents of our post in that array. Now I didn't grab the featured image because all of my post don't have one, although this wouldn't cause a problem. Again, I am logging the results so that we can look at the return data. Then in our catch method, we just logged the error to the console. After that, save everything and then navigate to your project in a command line and run beefy index.js again. When you navigate to your project, make sure the developer's tools are open. If you don't know the ID of one of your posts, go ahead and click on Display Post and look at the console. Drill down into the data and find the ID of one of your posts. After you have that, enter the ID in the input and click on Choose Post. When you do this, the correct post should be displayed as well as logged to the console. Now this is a key part of using WordPress.com as the Back-End of your apps. Being able to return a specific post is essential to any app that uses Back-End data. Now that we know how to return a specific post, next we need to learn how to add a post. Now we can do this with some methods using Site, but of course we can also add them using post. Let's go back over to index.html. Here we will add another button in input. We also add a text area as well. The button will allow us to add a post while the input will be where we add the post title. The text area will be where we add the contents of the blog post. Now we won't create a way to add images in our blog post right now, but in the later video we will work with media objects. Then in index.js we add a click handler for our add button. Once we have that, we add the addPost function. The first thing we do in this function is grab the value from our input and our text area. Then we create a data object that we will pass to our add method. If you are ever unsure of what fields you can use when creating a post, check out the documentation for the REST API. There is detailed information on the schema of a post, the fields available, and the types of data those fields accept. Here we keep it simple and just pass a title and content. Then we create a reference to wpcom.site and post. This time, however, we don't supply an ID because we are creating a new post and the ID will be generated by WordPress. Then after that we use the add method with our data object. In the success method we just log the return data which should be the post that we just created. In the error method again, all we are doing is logging in to the console. Go ahead and save the project and run beefy if you stopped it since we last ran it. Otherwise just refresh your project in the browser. Again, make sure that your developer tools are open. Add a title and type some text in the text area, then click Add Post. Now when we try to add a post it doesn't work. Instead we get the message that this is not allowed. Now this is what should happen since this of course is an action that you need to be authenticated to do. We don't just want anyone being capable of adding posts. Let's go back to index.js and add our token. Now when we save our project and then refresh, we should be able add a post. After we add the post, it should be returned to us. Then if we click on Display Post, the new post should be displayed for us. Remember, the newest post is the one that is displayed when we click on Display Post. You should now understand how to use post to grab individual posts as well as add new ones. In the next video, we will look at the Me and User methods and what we can use them for.