JavaScript for WordPress Introducing How To Access API Inside of WordPress

[00:00:00]
>> Zac Gordon: Let's move on then and talk about actually accessing and using the API inside of WordPress. So again, there's two ways we can go with working with the API. We can use it in a plugin or theme inside of WordPress which means that we have a lot of authentication already handled for us out of the box.

[00:00:18] Or we can do it completely decoupled which means we need to go through all the process of authenticating via an API. So when we're using an API inside of WordPress, it's not too complex. First we decide what data we need, then we find the end point or end points we need, we decide what arguments to pass, right?

[00:00:36] Are we using search before or after or whatever. And then there's an internal Backbone API Client. And what this does, it means that we don't have to write the Ajax anymore. And when we want to save data or delete data, we don't have to deal with the nuances or the cookies or any of the validation for us.

[00:00:55] And we also don't even need to know Backbone. It just happens to be built in Backbone. Why, well, because the media library was built in it and the post revisions and it's already in core. So if you're doing that time when it's still a cutting edge one and popular one, it's already there.

[00:01:11] Plus the strength of Backbone is in handling models, right? React and View were better at handling the view side of things, but Backbone is pretty strong and a solid choice for this. So we don't actually need to know any Backbone, but we're gonna leverage this internal tool. And according to the documentation, and remember the gent, I showed you that video at the beginning.

[00:01:31] He did a 15 minute talk on the history of JavaScript and WordPress, also the fellow who has been building this client. So if you have any questions, you just ping him and he'll help you with it, pretty friendly fellow, Adam. So this is the official way to do it.

[00:01:49] They do not recommend you using Ajax or Axios in a theme or in a plugin to access the WordPress REST API, right? They suggest to use this tool that was built specifically for it. And then, everything else is JavaScript, right? So let me show you the final demo of what we're trying to get after building and then we'll see how far we get.

[00:02:11] And we don't have to code the whole thing together because you'll have all the code and all the steps around it. So let's just go into,
>> Zac Gordon: Our site,
>> Zac Gordon: And I'm gonna copy all the files from section five. These are all themes.
>> Zac Gordon: So copy these over into my themes folder which is starting to get out of control.

[00:02:41] Side note, WordPress, never leave a theme or plugin up on your site that you're not using. Even if it's deactivated, it could still be potentially hazardous and an open security loophole. So if you have something that you're not using, deactivate it and delete it. Don't leave it up there, okay?

[00:03:01] Like this, don't launch a site with 30 themes that you're not using. [LAUGH] Not the best idea, but for our testing, it's fine. So let's come in now and,
>> Zac Gordon: We are looking for,
>> Zac Gordon: 5.6 completed.
>> Zac Gordon: So the way this works is we have a custom template in our code and there's a conditional statement, remember I said that you could load JavaScript just on a certain page?

[00:03:41] So what I have done is I have come into my sample page, and I have assigned it this custom template. And I haven't showed you yet how to do this. I'm just showing you the different pieces of where we'll get. So we created a custom template that we've named Custom JS Page.

[00:03:59] And on this page we can click here to add a new post, and we have access to everything. We could even pull in the media library.
>> Zac Gordon: And we could save it. We see a nice message, and we see the page refresh with what it is. We could also go in and edit something.

[00:04:25] So Testing 123, go ahead save it. See a nice little message, and then Testing 123 has been updated. And finally we could delete it, it will display this message, are you sure you want to delete this post? OK, and it's gone. So this is all being handled via JavaScript and the REST API, and I think it's giving a pretty good example of basic stuff that you may commonly need to know how to do.