 Okay, we are online, we are recording, focus mode is on, you should be good to go. Welcome everybody. While we're going through the welcomes and introductions, if you would like to come along with me today, please do consider downloading the plugin example code today, which we will be going through going over in a few seconds. I have posted this in the chat. And then also if you haven't already, please consider downloading post mode up. You don't have to download it. We'll just be giving you a brief introduction into how it works and what it does. But if you'd like to sort of test up with me when we get to that portion of the workshop, you can start downloading and installing that. I have actually uninstalled postman from my machine. So I will be going through the process of installing it myself so you can sort it along with me. So some quick introductions. While you're doing that as well, if you'd like to please also just say hi in the chat. I'd let us know where you're joining us from where you are in the world. My name is Jonathan. I am from Cape Town in South Africa. I am an ex-developer and code instructor. And I'm a sponsor for the Retail and Autosomatic. So that means I'm paid to do online workshops and create tutorials and work with the training team to create or be learn WordPress content. And if you want to find the online, the easiest place to find me would be my website which is jonathanbossager.com. It has links to my various social media platforms and my GitHub repositories and my email address and all those. So that's where you can find me online. Okay. Today we're going to be continuing with our sort of dive into the WordPress REST API or WPREST API. Last week we had a session on creating posts. Sorry, list of creating posts, deleting posts. And we had a brief introduction to Postman. We use the back row of JS Client. And today we're going to continue. We're going to learn how to update posts. We're going to learn how to work with custom fields on posts. And then we're also going to look at authentication, very briefly. Authentication in the REST API is quite a deep topic to dive into in one workshop. So I'm going to cover the kind of options available and we'll just talk about one that's available to workers call. And that's the goal for today at least. If we run out of time, we might not do your indication part and then I might push that out to a future session. But we do have an hour and a half, so we'll see how it goes. Hi there from, you're going to have to excuse me if I pronounced that correctly. Snow Hermish. And I guess WA is Washington state. I don't know the state abbreviations, the U.S. state abbreviations. So I hope I've got the correct welcome. Nice to have you joining us. Okay. As always, before we get going, we have a few announcements. I have already done all the welcomes. I don't have a co-host with me today purely because I forgot to find one. It was a bit of a busy week today and a couple of folks in the training team reached out last week to offer to co-host and I just didn't get a chance to reach out in time. So I'm on my own today. Thank you, Washington, USA exit. So please bear with me if I get a bit stuck managing multiple things. As always, you are welcome to ask questions. You're welcome to either post questions in the chat or unmute to ask questions if you don't want to post them in the chat. The only thing that I do ask is if your question doesn't specifically relate to whatever we're speaking about or doing or coding at the time, please keep those for the pauses that I allow for sort of ancillary questions. Then if you're, as I mentioned earlier, if you're going to cope along with me, that is the plug-in zip that you can download. I'm going to paste this in the chat again for folks who joined after that initial announcement. And then you can also download the version of Postman for your operating system. So I'll pop that in the chat there and get that installed and set up. And as always, if I'm going too fast, please do that. I tend to keep an eye on the time and try to squeeze a lot in the tunnel. So sometimes I might speed up a bit. I might code a bit too fast and you need to slow down and see the code. So please do shut if anything is not clear and I'm going too fast. This record, this session is being recorded and will be posted to WordPress.tv afterwards during the Postman Day tomorrow. And then I will share the link to that video in the comments for the meetup event. There's also more WordPress focus content on learn.workpress.org. So all of these meetings, all of these workshops are linked on that site, all of the tutorials that we create, all of the courses, all of the lesson plans. So you can get everything on there. All of these workshops that I'm running this year, I'm also turning into tutorials. So you'll be able to watch the hour and a half or however long it is, according to the workshop. But then in a few weeks time, maybe a month's time, there'll still be a shorter content, sort of 10-minute tutorial version. So you'll be able to catch that later. And then follow up questions. I pasted the wrong link there. So let me just update that one and I'll update the slides. But for follow up questions, so in other words, if you are watching this later or if there's anything that you think of after the session, you are welcome to post those questions as a comment on the learn WordPress issue. This is basically just the issue that I used in the WordPress learn project or the learn WordPress project to kind of manage my workshop for the week. So you'll see all my notes there that I create for myself from the various links that I used to prepare my slides. So if there's any questions that we either don't get to in the session or something that you think about afterwards, you're welcome to post them there and I'll do my best to either answer them there or if there's something that's coming up in a future session or might be a good topic for a future session, I will use them and go forward from there. So please do feel free to use that. That's if you have anything you want to ask me about the session afterwards, if you're watching this afterwards or watching the recording, that's going to be the easiest way to get hold of you. All right, our learning outcomes today, we're going to, as I mentioned, we're going to be looking at updating posts using the WordPress API. We're going to be looking at creating updating post custom fields or sometimes post meta using the WordPress API. We're then going to authenticate with the REST API using an application password. And to do this, we're going to be using the Postman API testing tool because I can't replicate the environment in my dashboard by logging out and all of that, but it's easier if we just use the Postman out to show you how that all works. So that's the first of the four goals for today. The objectives that we're going to achieve to achieve those goals or the objectives that we're going to take to achieve those goals. First, we're going to set up and review the example plugin code to just refresh ourselves, what it's been done so far. That's the stuff that folks that are new to this so they can see what's going on. Then we're going to add the functionality to update the post. We're going to very quickly review custom posts and what they do and how they work if you haven't dealt with them before. And then we're going to add functionality to update custom posts when we add or update the post themselves. We're just going to add one custom post or one meta post meta field, whatever you know that as. Then I'm going to give you a quick introduction to application passwords and how that works in the history of that. And then we're going to use Postman to test the application password and test a post request to the rest API. And I'm going to show you how Postman works and how you can use it to test your input. All right. Any questions on all of those goals and objectives that we have for today while I refresh my third pretty, otherwise we won't move on. The one thing I forgot to mention, when we did the announcements was that while we are in focus which means I can see you, but you can't see each other, you are welcome to enable your video if you would like to. If you would like me to see you, I don't mind if you don't, I don't mind if I have a bunch of just names. But if you'd like, you want to enable too, we're welcome to. Okay. Let's do some code. So today is a very code heavy session. We don't have a lot of theory today. If this is your first time learning about the WordPress API, what I do recommend that you do maybe after the session is go to WordPress.TV and then search for Let's Code because there's a tag on WordPress TV which groups all of my Let's Code videos to go on Let's Code workshops. You can see there, Let's Code series, there it is. And you can then see all of the Let's Code videos and if you go to the newest videos, you will see that the two most recent ones are the ones about the WordPress API. So the first one we did on the 13th of January is using the WordPress API workshop. Go and check that one out. And then lastly, it's one which was interacting with the WordPress API which is where we created posts and deleted posts. So if anything today is new to you and you're finding it confusing, I recommend going back and watching those two workshops and then watching the body, this one, excuse me, and things should become clearer. Okay. So the code that we've been working on is this Learn, Rest API plugin. I shared the link with you in the chat. I've got it installed and active on my WordPress site. There's one small change. If you've been following along the last two sessions, I originally had the menu item just as a top-level menu. In my testing last week, I actually discovered that there was, I was causing a bug. I was causing an error message in doing that. So I updated that code and I'll show you that code in a second. That it adds it to the tools menu, a top-level menu and it's there for the Learn, Rest API. So if you added the plugin overwritten, the one you were using maybe last week or week before, you're not finding that menu item. Go to tools and then go to WP Learn, Rest API. Once you've done that, there you will see the load post section. So it's just a very simple admin dashboard page. You've got a load post button which uses the Rest API to query the post from the database and it currently just gets the ID and the title. This is slightly different last week. I don't think we added the ID last week. I can't remember, but I'll show you that code in a second. And then there's a clear post button which just clears that text area. Then below that we have an add post button. I'm sorry, an add post area. I should maybe put some borders around here so they're a little bit more separate. But here we can add a new post and give it a post title and some content. I'm trying to go to posts. I'm telling you one and then you can click add and that will add the post using the Rest API and then it refreshes the post list. So there we can see post ID, post title one is added with an ID of 153. I haven't included the content because the content could be quite big. But if you go and have a look at your posts, you'll see if you've done it, you'll see that it's added some content there. You might notice that it's added as a classic block if you're using classic editor because it's posted with raw data. So if you want blocks, you need to add that block code. But for our purposes, we're just going to be working with raw content. And then there's a delete post form. And if we take an ID that say this one is ID 153 and we pop it in the ID field and we say delete, it will then delete that post via the Rest API and it gives us a message to say post deleted, refresh the page and confirm that yes indeed that post has been deleted. And all of this is possible using the WordPress Rest API, using the backbone JS client which connects to the Rest API and forms the relevant functions. And because I'm doing this in the dashboard I'm already an authenticated user. So I can just use the client in my JavaScript code. I don't have to worry about authenticating because it uses the cookie that is stored in your browser when you log into your WordPress dashboard. Okay. Let's take a quick review at the code. So this is what the code is. I'm going to start with the PHP file. So the PHP file you can recognize because it has a PHP opening tag at the top. It has the plugin header. And then here is the code to add the sub-menu. And the bug that I was having was I was adding menu page and I wasn't specifying a position number and was pausing all kinds of issues. So I realized it should actually be a sub-menu page. So I've changed it to a sub-menu page. That's the code that names that. And then this is the, so in the add sub-menu page function there is a callback function that you need to specify which is the function that basically generates all the content for that page. So this is that function that WP learned rest render admin page function. And it essentially just outputs some HTML. And you'll see here is the different handles the load post and clear post area with the text area. Here is the code for adding the post. So it's just a form with some input fields and text area for the title, the content and the button. And then the delete post is again another form where the input for the ID and a button to delete. So it's fairly straightforward. And then at the bottom, I just have the usual NQ in the JavaScript. If you've worked with plugins or themes before this is a very familiar to you. So it's looking into the admin NQ scripts action hook setting up the callback function to NQ on our script. And then doing the screen get current screen and then if the screen ID is not equal to the ID of my screen. So this is something that WordPress builds up because of where I have the page set up based on the slope over here. So what I'm basically doing is if this code is installed this plugin file will always be run every time the dashboard is executed. And I don't want to register the JavaScript anywhere else in the dashboard. I just want it on my page. So I use the screen get current screen and then checking the screen ID check. And if it's not my page I just return back to regular execution which means this doesn't then load. If it is that screen then it loads my JavaScript file. It just means that the rest of the dashboard is not loading that file which isn't necessary. And I'm loading the WP learn risk API JS file which is in the same location as the PHP file that's where this works. And I'm requiring it to use the WP API dependency which is the backbone JS client which allows me to access the rest API endpoints. And I'm using time as the version so that if I refresh the page that's the cache and refreshes the JavaScript which is a very handy developer tool. You should always ship your register scripts with an actual version number. So in this case, I think my version number is 0.0.3. So if I was ever ready to ship this code to production I would simply remove time and add 0.0.3 as a string and I'm using true because I want it to be in queue in the footer. So that's also if you've done plugins or themes before that's probably gonna look very familiar to you. So that's all of the PHP code on the JavaScript side. It's this WP NerveRest API JavaScript file. I've basically created a bunch of functions to handle some common functionality. So there is a clear fields function which takes the learn posts, takes area of the post title, post font of the post ID and clears them out. There is a load post function which is what gets triggered when the load post button gets clicked and that clears the fields and then creates a new all posts collection using the WP API object which is available because we've told WordPress to use it when we include the JavaScript code. Yeah. And then, sorry, I don't like the way. There we go, better. We're too tired of having it in one time. So that basically creates an empty collection of posts. Then I fetch the posts and there is some filtering that I'm doing. So I'm saying include certain IDs and includes just the fields in the title. I'm actually, you can actually, if you've got this code on your side, this is a fact, this includes shouldn't be there. So you can take out this line here if you would like to. I was playing with something and that shouldn't have got shipped. So I apologize for doing the data object. I just want the fields global parameter which essentially specifies that only the ID and title fields will be returned by the request. So when the request is made, only return me the ID and the title fields. I just reformatted these now to make them look a little bit cleaner on my screen. It doesn't matter, you don't do the same. And then once the fetch happens, that returns a promise. So when the promise gets returned, I need to use the done function to then say, get all the posts into this posts variable here and then I'm looping through the posts. Here I am setting up the text area based on getting the element by ID and then I loop through the posts and then I append the post ID, a comma and the post title and then a new line character to the text area. So that's what when the load post button gets clicked, that's all the code that handles all of that. In the submit post function, it's basically just getting the post title and post content values and popping them into variables. Then it's creating a new post model and new API model of type post. So I've noted these to insert into the post table and I'm passing at the title which is the title variable, the content which is the content variable and the status of publish. This title and content, I could call it something else but these properties on the post object, I need to specify as title and content because that's the schema requires which we discussed in the last session. And then I can call posts, like I called posts or posts fetch. When I'm saving a post, I can say posts save to push that data to the rest API and then again, I use the done function with a callback and basically when you post data to an API endpoint, it's going to return with the saved post. So then I can do something with that post if I want to, I'm not doing something yet but I learned to not just say posts saved, clear the fields and then reload the posts. And then the delete function is doing a similar thing, getting the ID value, creating a post but this time I'm passing in the ID so it would know to delete that post based on the ID and then it uses the destroy function of the post model. And then again, the done function post deleted, clear fields load post. So that's some common functionality that I'm using again and again. And then right at the bottom I just have all of the buttons that I'm using. So I'm creating a variable for each button based on it's ID. If the button exists in the pages just to check in case something goes wrong the button gets removed or whatever. Then I add an event listener on the click event and based on what things are happening I call wanted function. So when the clear post button is clicked I call the clear fields post when load post button is clicked I call load posts when submit post button is clicked I call submit post and with the deed post button is clicked I call the deed post. And I like to separate my functionality like that. So if you remember the very first session we did we were all coding this inside of these events and checks and things and I kind of separated it up because it makes it easy. For example, when you're say submitting a post to then call clear fields and load posts together it's like to kind of make it work and make things happen. So that's what we're getting with there. Okay, I'm gonna take a pause there if there's any questions or anything we've just covered anything you're not sure of please to get the note and have a look. And okay, Sergio says on Windows which branch are you currently using from the GitHub repo? That's a good question, Sergio. So if you're downloading the code if you're not gonna download the zip file and install it on your local machine and you're using the get to clone the repository you would need to currently switch to the release 003 branch. So I'm going to just paste that in the chat. Release 003. Sergio, I'm going to assume you know how to do that checking out of the branch yourself. So I'm not gonna construct you on that. If we're working off the 003 branch and if we have a look you'll see here is that code it's the sub-menu page. It's all the same code and then the JavaScript file probably still has the bug. Yes, there it is. There's the includes it shouldn't be there should we keep that out but the rest of the codes in the set. Okay, great. Okay, what he seems to be good to go. Thank you Sergio for that question. I think we can move on. Okay, so let's have a look at our outcomes for today. We've checked that. I need to figure out how to do check boxes in my slides so I can check items up as I go through. But now we want to add functionality to updated box and the cool thing about the backbone JS client not gonna go to documentation for this one but you use the same save You use the same save function to update a post as you do to create one. The only differences you pass in the ID in the same way that you pass in the ID for it. So what I'm going to do is I'm going to start by underneath in the learnrestapi.js file underneath the submit post function. I'm going to just hang on a second. Just checking my notes here. I'm going to start by creating a new function and I'm going to call it update post. And I'm just gonna pop that there so it's ready to rock and roll. Once I've done that, I'm then going to go over to my, you know, some folks waiting to join so let me just let them in. I'm then going to need to add some form to my PHP file so I'm gonna switch back to the PHP file and I'm gonna scroll up to here where all the HTML is. And I'm just going to copy the add post form because the only real change is the, excuse me, the IDs for the fields and adding an ID field. This is where I get confused because I'm going to be using and hopefully this doesn't confuse you but I'm going to be using the term fields meaning multiple different things. So there's going to be form fields and fields in the database and then I'm going to be talking about IDs and I'm going to talk about the post ID which is an ID field in the database and then I'll be talking about HTML attribute IDs. So I hope you bear with me. We get stuck, give me a shot. But I'm going to copy out all of this add post code so it's from the style, from the div above the add post H2 all the way to the closing div off of the form there. And this is another reason why I like to use some white space between my divs in these sessions so it's easy to see where things are and I'm going to add some more white space and I'm going to pop that code in there. So now I've got add post at the top here and then I've got add post copy to the bottom here and I'm going to simply just start by making some small changes. So it's going to go from add post update post in that and then I'm going to just go WP learn and I'm going to go hyphen updates post title. So I'm just adding in hyphen update off of WP learn part on all of these fields. So WP learn update post title that can stay the same, that can stay the same. WP learn update post content that all can stay the same. The button itself I'm going to make WP learn update post for obvious reasons and the value I'm going to make updates for obvious reasons. So I'm going to leave this on screen if we're coding along and then the only other thing I need to do is I need to add an additional field for the ID so that we can post the ID we can get the ID at least and post it in the request. So I'm going to copy the post title field to do that and I'm going to just pop it above the post title and then it'll be WP learn update post ID and post ID and then it's an input. It's type text WP learn update post ID and I'll change the place forward to ID. So it's very simple as record just adding a new form to that page and going to copy up this code if you like to grab it from me if you need to copy paste. So that is in the chat right now. I will leave it on screen for a few seconds. The other thing I want to mention is it's always a good idea if you have labels to make sure that your label for attributes matches your fields ID attributes. That is for the screen readers and accessibility issues. So when the screen reader is reading the label it knows it belongs to the ID. So I always try and do that to my friends. Okay. So we've got the form there. If you're still coding the form don't stress I will allow time to wrap up later but I want to start on the JavaScript side of things. And it's going to be very simple to when we did the submission. We're going to capture the fields. We're going to create the post model and then we're going to get saved and done. So we can effectively, if we switch back to the JavaScript file we can effectively take pretty much all of the submit post code and we can reuse it. Now we could start getting clever and we could do something like if the ID field is there and has a value then include the ID and use that in submit post we could do that. And that might not be a bad idea because then we're not repeating our code. But for the purposes of today's session I want to keep things a little bit simpler. So I'm just going to duplicate the submit code into my update code. So there we go. The title and content stays the same but additionally we need to make here is the ID. So we'll go to the ID and we'll say the document gets element by ID and then it will be, I think it's WP first ID. So there we go and value. And then we need to pass that into the object when we create the post. So here is the object. I'm just going to format these article bits and we can see where the object starts. So this is the JSON or the JavaScript object and we can tell that by the use of the curly braces that we're passing to the post model. And the only addition we need to do there is we need to add ID property and pass in the ID constant. And I can make sure that has a comma because that's what a JSON object needs. And then we can do the same post save down function because that's the same action that happens. The only difference we need to worry about here is maybe say post updated. And then we can leave clear fields and we can leave low posts because we like that, that in fact that works. The only other addition we might need to do and I've just thought about this now is we might want to, there's the post ID already, I've already included it. That probably shouldn't have been there. But we're going to want to clear out that, wait, hang on. No, these are the original posts. So what we might need to clear out is these new fields which I haven't updated because I'm getting the post ID, not the learn update post ID which is the one I need for my form. So let's rather do that. So in the update post function is to make sure we're getting the right ID fields. So it's WP learn update post ID. It's WP learn update post title. And it's WP learn update post content. So there it is there. Let me copy the site into the chat in case anybody needs it on their side. Just goes to show you how quickly you can, when you copy code, make sure you check it. So really what I should also be doing in that clear fields is I should be clearing out these fields. Now again, what I could do is I could do something like apply a class to all the fields and then just do a document get, I think it's by selector or something and then you pass in the class and then you could say a value because zero and it'd be one line of code. That would be a lot cleaner and smoother. I agree. I'm just going to do this just so that it's a little bit more verbose and a little bit more explicit as to what we're doing. So it'll be value equals and interest string. So we're just going to add those to that field. You don't have to do this if you don't want to but I want to do it for the day session. So it clears up those fields so we can add a new one without deleting. So we're deleting the post text area, the post title, post content, the post ID for the deletion form and now the update fields as well. So that's all here today. Okay, let me copy up this clear fields function as well in case anybody needs that. And then I'm going to pause here and I will pause on the update post function if anybody needs to catch up, if anybody this code is coding along, otherwise if you're happy for me to move on, give me a all set or thumbs up or okay or anything like that in the chat and I will move on. Or if you have questions, now is a great time to ask those questions as well. All right, I don't see anybody slowing me down. So I'm going to assume it's okay to move on. And so that should be it. This should work now. I should be able to create a post and then update that post using the new code. So let's see if that does indeed work. So if I hop on over to my screen and I refresh, because obviously I've made some changes to the JavaScript code, load the post, that also works. Clear the post, good, that's all works. So let's just reload, there we go. So let's add a new post and call it new post one. And I'm just going to pop in some content, new post one content and let's hit add. And that has saved the post and there it is, one, five, five, new post one. So now if I copy out the ID of that into the field and then let's say updated post one and then let's say updated post one content. And just to verify this, what I want to do is I just want to have a look at the post currently and its current status. So if I go into new post one, there it is, it's using the classic block new post one content that is all the data. And if I now hit update, this should now update the post. So let's see if that works. That didn't work. So I've got a bug in my code somewhere, so let's switch over to the console. So I'm switching all my developer tools to see why that's not working. Let's do a quick refresh and load the post again. Believe it or not, I do love it when these things break because then we can see where it went wrong. And we can figure it out, update post one and no. Sorry folks, I struggled with my keyboard combinations. Updated post one and updated post one content. And let's hit update. Oh yes, I know why this is not working. We wrote the functions up at post one. We didn't register the event, have we? So that's the downside about having all these, all the separation of code is that it's all on the code I've got the post updated. Nothing is triggering this function. So if I scroll down to the bottom here, let's pop this in between the submit and the delete post and we can effectively use exactly the same code as we've used here. Again, I could get clever and I could refactor this to be like a general submit post and depending on which button it's clicked and all various other things. But I'm going to keep it simple today. So it's going to be the update post button, document by IEWP learn update post. If the submit button is valid, then add an event listener to it. And then we want to run the update post function when it is clicked. Let me pop this out into the chat as well if there's anybody who needs that. So this should now work. Let's do a check. Switch it back and refresh. And I like to leave my console open when I'm working with JavaScript code because there's an error in the seed immunity. So let's do a load posts. So it was 155. So let's go to 155, updated post one, data post intent one, and let's hit updates. And there we go. The post has been updated. There are no errors. So that's all good. And let's do a check on the refresh. Yes, there it is. 155, updated post one. This refresh actual post itself, the ID, you can see there is ID 155. It should now be updated post content one. Yay, that worked. Okay. So updating a post using the REST API and the background JS client is as easy as adding a post. You simply create a post model. You pass in the fields as we did creating. The only difference is you pass in the ID so that it knows to update to that ID. So if you pass in an ID to a post ID that doesn't exist, I think it'll throw you an error and say this post doesn't exist, it's just going to try and do an update. So the backbone client will check, oh, you're passing an ID, this needs to be an update and make an update request. And then I think it'll throw you an error. But otherwise you could pass in the same fields as you did for previous posts. So title, content, date, GMT, all of those fields we discussed in the steamer. And in the last week's session, and then it will make a request to the REST API and update that post for you. Okay, we're gonna take another break if there are any questions at this point in time. And then we're going to move on. Okay, so we've got somebody who's got a bug since the load post is not working. I'm on the branch you mentioned. When you say load post is not working, is it the load post button that's not working? Or it's not loading the post when you update the post. Nothing loads, I can add a post client. Okay, can you open your developer tools and see if there are any errors that are logged when you click the load post button? Anything in the console? Okay, so there's no errors. So the other thing it could be, I don't know if you saw this, you might have missed it in the very beginning of the session. In the code, I left the bag in inadvertently. So do me a favor and piece check at the top of your JavaScript file in the load post function, check the data object if it has an includes global parameter and remove that. Because what that's going to do is only return a post with ID 16, 17, 18. And if you don't have those post IDs, it's not going to return them. So what it should be, let me show you in my code, it should just be all post fetch, open in the object and then data, and the object fields at the time, that's all that should be in there. If you can check that for me, I'll share the load post function with you if you want to take a look on your site, but that should fix that point. Now it was a small bag that I left in code, I don't apologize. You'll just have to forgive me, your username on Zoom is just useless. I don't know what to refer to you. So I'll just call you user for now. Oh, it's easier. Oh, sorry, I didn't see that. Okay, here we go. Sorry, it's difficult as I said, I don't have a car today, so I'm struggling to pull up things. So is it fixed now if you remove the entry pot? You're not to access between where you, why don't you do me a favor, why don't you copy your entire JavaScript, the contents of your JavaScript file out and paste them in the chat. We had, I think it was Mark whilst we got similar issues. So let's do some live debugging. So if you can copy your entire JavaScript code out and paste that into the chat for me, which you currently got, and then I'll pop it in on my side and I'll see what's going on. Need to find a better way to manage that when things go wrong. That's how it works. Okay, so just paste these codes and then we grab this with you and have a look. Now I get to fight with the Zoom meeting chats screen and then get me copy of this. And I'm going to paste it here. Okay, and let me see what I get on my side. Okay, load post is working. So it might be a PHP or an HTML issue, won't you copy the contents of your PHP file out as well for me so I can see what that looks like. I'm going to add some posts and update some posts on this side. Post to post to integrate. Now that seems to be working fine. Again, you grab your PHP code. So I find the Zoom chat to be not so conducive to sharing code. I'm going to use it to look into a better way to do it. This is my initial code. This, you see, I end up copying the wrong thing. It's quite frustrating, let me try that again. There we go. There we go. Okay, it could be here because you've got WP updates at the mid post as the ID for the button. If you can change that to WP update post for me. I'm going to test that, that you should fix things. Okay, I'm also getting an error tonight. That's the dashboard. Okay, for some, it looks like there's more issues on the GitHub repo than I thought. So I'm going to have to fix those. Okay, it should be using this learn, rest sub menu. So let me just switch back here. Now this is using the old add sub menu. So that also needs to be changed. So let's do that. So make sure that your top admin page code looks like this. That was from the zero three release. The very first set of PHP code. And then make sure in your update form that your button ID is WP update post, not sub meta updates. And then that should get things working. So I'm going to go back to the admin, go to tools, learn, rest API. There we go. Let's do load posts. Okay, there we go. You'll be seeing an error. Cannot set properties of null at clear fields. There we go. Load posts on line 12, okay. Load posts, post API code, post update, post update, post update, post update, post update, post update. So that's that error. That's on line six. So line six is the learn, update, post ID field. Oh, here we go. Okay. So your IDs should be, you can either change your ID to WP-learn update post, or you can change it in the JavaScript. I prefer to do it like this. There's multiple ways to do it. But to keep us all in check, the easiest way would be to make it WP, WP-learn update post content, so that it matches the JavaScript code. So let me know how you're going with that, Sergio. So it's WP-learn and then update, post ID, WP-learn, update, post title, then update, post title, WP-learn. And I leave out the hyphens because it's annoying having to say hyphen every time. So I apologize if you're not following that. Now, WP-learn update post content and then WP-learn update post as well. So I think that's how I'm specifying things. WP-learn, WP-learn, WP-learn. WP-learn, WP-learn. That's where we are there. But yeah, they all have the WP-learn prefix. So make sure everything has the WP-learn prefix and then you should be good to go. So we'll do the first share. Load post works, clear post works. Let's go to post. Post three. Content three. So the key is to make sure that the fields that you're specifying when you are setting up the ID values. So the ID attributes of your text areas should match the ID attributes that you use when you call getElementById. And then things should start working. Okay, so let's just add three to test that. Reports, that would be fine. Let us update two to make sure that works. I think my seven will tend to post two. Update, post two, content, test that. All right, that's because I don't think I have the button in the firing. So I also need to check and make sure that you have the, I used the type of stack, I think it was a tree. I think you might have a combination of some new and some old code there. Let me just check in the repository. Yeah, I'm using the if, say, it doesn't matter too much. We go back here, post. Update, post button, there was a typo, there was all the eight post button, instead of update, post button. So you need to fix that. And then update, post button, add again to listener, post update, post. And then that should now fix this. But I do recommend maybe doing a pull of the version three code because the way you're doing all the checks is not wrong. It's just the old way that I did it in the previous session. So let's just do update, update, post. Let's just refresh this. Let's load, let's update, post two. Let's update, post two, post two, one, two. Yeah, that should be working. Sergio, how are you doing there? Have you got things working? Okay, excellent. I'm going to just switch back my local environment to the code that I had just so I can post and go out and search this back. Just go back a few steps. There, it's where I wanna be. So there's some updates. And there's one in the page again, good. Otherwise, if I don't go back to the code that I'm expecting, I will get lost again. Okay, so we can add, we can update. Moving on to custom fields. Somebody asked me about custom fields in a previous session. So I just wanna mention and confirm that when I talk about custom fields, I'm talking specifically about the default WordPress implementation of custom fields. However, if you're using something like advanced custom fields or one of those plugins that gives you a user interface to generate custom fields, generally those plugins implement custom fields in the same way as WordPress. So it registers what's known as post-mater fields and then it uses the same core function calls. But I'm not using one of those plugins, I'm using the core functionality. So your mileage may be, if you're gonna be using a plugin like advanced custom fields, you might need to do certain things in the user interface to enable the fields for the REST API. What I'm gonna be showing you today is the way I do it in code in a plugin and how you can interact with it when you're adding updated things. So for those who don't know, custom fields is a way of storing additional pieces of information on a WordPress post or custom post type. Basically, I'm gonna show you very quickly. In any WordPress database, there is a table called posts. Depending on your install, it may or may not have a different prefix to mine, but my prefix is WP posts and it stores the core data for a bunch. So it stores the post state, the post content, the post type, except status, blah, blah, blah. And those are all the default fields that you can submit to on a REST API endpoint. So when we looked at the schema last week, let me open up the schema.pt. So we can just refresh ourselves and how that works. So the schema is how you submit data to, sorry, that's all right, I'm going to put this. The schema for, for example, posts is the fields that you can submit and update the fields to the database. And as we mentioned, some of the fields are slightly different to the database fields. The most obvious one is the title field that you can see in the REST API is actually the post type of field in the database. So the REST API maps the title field data that you submit to the post type of field in the database. However, WordPress also has this concept called post meta. And these are basically key value pairs that you can add to any post. So you'll see in the post meta field, every post meta record has a post ID. So that's post ID two. For example, we added post ID 55 or something we see there's nothing there for that but they might be later. And then there's a key and a value. So these are key value pairs. So when you create a custom field or a post meta field, you always are storing it against a key. And then when you need to retrieve that field for a specific post, you pass in the post ID and the key and you can retrieve that field. The key can be used multiple times. So you can have the same key being used on multiple posts. And so there's that combination of post ID and key that gives you the coordinates data. And custom fields are often used when you're using a custom poster. For example, you might create a custom post type of an author, maybe not a good example, but let's just go with a book. A book is maybe a good example. And on a book, custom post type will have a book title and you'll have some content about the book. But then you might have things like the ISDN number, excuse me, or the URL that points to the book's website or various additional fields. And traditionally in WordPress, that is what gets used. The post meta fields get used, the custom fields get used to store that data. Now, in the editor, depending on which editor you're using, you can view the custom fields in one of two ways. If you're using the block editor, actually I can read that to blocks very quickly, you click on the three little dots that opens up options, you go to preferences, you go to panels and you enable the custom fields panel. This will reload the editor and then right at the bottom of the screen, you will see there the custom fields panel sits and you can add new custom fields to the post from this interface if you want and you can remove custom fields, I think. It's been a while since I've done this. Now, you'll see there are some custom fields already available. The one is related to the fake press plugin that I use. So I can add a fake press flag, the custom field and I can add the value. Stefan says by stocked on the API, I assume you're using the classic editor, Stefan. Oh, no, no, it doesn't need a plugin. It's built into WordPress. So the reason that plugins like advanced custom fields exist is because the user interface is very time free, as you can see, and to add new custom fields, you need to write code for it. So that's why plugins exist. But the functionality itself that advanced custom fields use is already built into WordPress. The database is already there by default. WordPress uses for various other things and advanced custom fields just falls on top of that and makes it easier to manage that this use. But it is a default core WordPress experience. Very quickly, while we're talking about the classic editor, I do have a quick introduction on how that works. If you're still using the classic editor, I do understand if that's your preference. So I have the Sensei Press site setup, which uses the classic editor. And if you're inside of posts, you can click on the screen options at the top here and then you can enable the custom fields option there and enabling that, let me just write all of this. Well, again, enable the custom fields mailbox to bottom. So that is a default WordPress functionality and you can add fields and you can update fields and you can do various things. Okay, now, to be able to use custom fields via the REST API, you have to register them first and they have to be registered to be available to the REST API. You cannot create a post and simply pass in a custom field key and it will create it in WordPress. So the first thing that you need to do in some way in your plugin or in your theme that uses PHP, you need to use one of the functions that registers a custom field. And one of the ways that you can do it is you can use the register meta function, which I'm going to open up here on my screen. I'm going to share it with you in the chat. And that basically requires you to pass in the object type. In other words, the object that you're registering this piece of metaphor. So it could be a poster or a comment or a terminal user. If you have a look at the database, you'll see that posts has a post meta, terms has a term meta and users has a user meta and comments has a comment meta. So by default, those four options can all have metadata. And then you need to pass in things like the key and any other arguments. And one of those arguments we need to pass in is the default value. And another argument we need to pass in is whether it's available to the REST API or not. So this is the documentation you could read through all of this, there's the show in REST field. I'm very quickly going to show you what that looks like. If we switch back over to our code editor and we go into the PHP file, you can just call this in the roots of your plugin or fee because this registers the casting field for WordPress to use. So you don't have to look into like an early action hook. You can, if you want, hook it into the endotopia of the WP hook if you want to. But you can just call register meta in the roots of your plugin. It won't cause any errors. And then inside of register meta, you need to specify some data. So the one piece of data you do need to specify is what post type it's going to be registered to. In our case, we're using posts. So I'm just going to register it to post. And then we need to give it the key. So for our examples that I'm going to be using a URL key, so we're going to be pasting in a URL to a website. So I'm just going to call the key URL. Then we need to add some arguments and we'll add those arguments as an array because that's what it expects if you read the documentation. The first argument we're going to pass it is whether single is true or false. Now, if you don't know what that means is you can store metadata either as a single item, like a single string or numerical, whatever, or you can store it as an array of data. I mean, what PHP, what WordPress does, serializes that array which is basically converting it from an array to a special type of string and you can store that in the database. That's a topic for another day, which we will get to one day, but not today. But for now, it's just a single string, so I'm leaving it as a single metadata type. The next thing we need to do is we need to give it a type. So this could be a string, a Boolean or a numerical, whatever, I'm just going to go for string because it's just a piece of text. I like to give my meta fields a default. In this case, the default can be an empty string. So that's just whenever the metadata is queried. So when a post is queried, then it'll run a post meta query and if there's nothing stored for that key or that key doesn't exist on the post, then it'll return the default value. So in our case, we can just turn it into string. And then the last thing we need to do is we need to say show in rest. And we need to set that to true. And basically, that means that it will be available to the REST API so that we can push data to it. If you've never worked with an array in PHP, you'll see I'm just using this equals sign and I think it's the less than sign. So basically creates an arrow, a special type of arrow in PHP, which will set up the array for us. So that's what the code looks like. I'm going to paste this into the chat if you would like to pop it into your own code or if you've missed anything, you should compare it to what you've got. That's essentially going to register the URL meta key in the code and effectively because we put it in the root of the plugin, whenever WordPress code execution loads, either in the dashboard or in the front end, it loads any active plugin code. And this means doing it this way, it will load the key into memory to be available for pushing and pulling posts and various other things. It doesn't actually create anything in the database yet, but then when we push data to that meta key with the key of your URL, it'll be registered and WordPress will then know what to do with that piece of information. So this is a requirement when I first started working with custom fields in the REST API, I thought I could just get away with the way we used to do PHP, which you can just run update to meta key with a key and a value and it just creates a difference on there. You can't do that in the REST API. You have to register it so it's available to the REST API so that you can push data to it. Okay, I'm going to pause again. Is there any questions around that? Otherwise, we're going to move on to updating and adding some custom fields to our friends. I don't seem to have any questions. I think we can move on. So with that in mind, I'm going to scroll down to my forms and I'm going to add a field for the URL. And I'm just going to copy the post title field and I'm going to pop it under the post content and then it's going to be WP Learn Post URL. And just say post URL here. And again, the ID is WP Learn Post URL and the placeholder could just be URL. And then I'm going to do the same thing for my update to post form. So I'm going to grab the ID field just because the text, actually let's grab the title field. It's easier to press type in the URL. We'll pop that in the content and then we'll just go URL, URL, URL, URL. And again, URL. So now I've got a title, a content and a URL of the form field. So I can capture that data. Then in my JavaScript code. So let's go and have a look at the documentation and see what the documentation tells us about the ability to add PostMeta to a REST API request. And if we scroll down on the schema page here, you'll see there is a meta property that we can like, I'll answer that for you in a second, Stefan. There is a meta property that we can push data to and we will see that it is an object. So what that means is when we pass in the metadata, we need to create a new object and then pass in the meta key with the verb. Stefan, to answer your question about what the meta is used for, it depends on the requirement. So it depends on how you're setting up the site. In the default instance of WordPress, if you're not using it, you'll see it stores things like the edit lock, someone's editing a post or trash status or various other things that WordPress uses by default. But in sort of custom development terms, Spokes generally use it for adding custom data to a post. So if they can't use the title or the content for what they're doing, they want to add additional fields, they generally use the PostMeta for that. Okay. What was that? Let me see if there's a question here. Okay. No, it wasn't. I was reading the documentation, so when we capture the meta value from the form field, how we pass it to the post model is slightly different. So let me show you what that looks like. So I'm just going to grab the create field, which is WP Learn Post URL. And in my, I'm going to scroll up to my set let post function. I'm going to add a new line to capture the URL into a variable. And I'll just document, get that by ID and we set what was WP, then I copy that. Yes, I did. WP-learn-post-url value. So that'll grab whatever I put into that form. And then here in the data object, or at least the object that I'm sending to the model. I'm just following this a little bit so it's easier to read. It doesn't really matter in terms of codes or about readability. I can now pass in a meta property and that needs to be an object. So I open up the curly braces to define a new object. And then I pass in the meta key that I specified in the PHP code, which in this case is URL. And then I pass in the value that I want to save as that URL. So in this case, it's going to be the constant that we've set up. Going to need a comma after my published property and that should be good to go. I should be able to do the same thing on the update post. So if we scroll down here, I need title, condensations, updates, sorry, status. I'm going to pop in the meta there as well. I need to put it in a comma there as well. So that should enable the URL to be posted when we do the update. Okay, so that's the only change I need to make. And the only difference there is, as you can see, if it's a top level field, it's generally property and value. If it's meta, I need to create the meta object and then I can have multiple meta fields. So if I've registered multiple custom fields or meta fields in the PHP, I can then list. So let's say if I have a URL and it's an ISP anyone as well for a book, then I could pass an ISP in that object. But for now, we're just going to work with a single URL. So let's see if that works. So let us load our posts. I for first, I need to refresh my page. I'm in my posts, gather all my posts. So let's create post number four and give it some content. And then for the purposes of an example, I'm just going to use the domain.com example for a string. And I'm going to add that. So that's created the post. Okay, let's see if it's worked. So if I go over to my post list and I find post four, there it is with the content. And there is the URL custom field and there is the domain. So it's posted down through. Let's test the update. So if I take post four, which is one to 60, post ID and let's say update to the post, I think it was. Yes, post four and updated post four content. And now I'm going to change the URL for the domain.com to example.com and I'm going to hit update. Okay, URL is not defined. Interesting. So I've got to back in my code somewhere. It's on line 60. I think it's because I haven't specified the constant. Yes, that's what I forgot to do. I forgot to specify the constant which pulls the data from the relevant form field. So let's add that in the update, updates post function. And then I need to remember it's WP learn update post URL. So WP learn update post URL, there you go. So let's refresh and check that out. So refresh, get the post. Okay, post four is 160. So we're crossing post ID, we've got updated, post four, updated, post four content. And this time the example, the URL is example.com. And that's updated. So let's verify that by refreshing the actual post. And there we go. I didn't even, I didn't find example.com wrong, but you can see the updates. The title is updated, the content is updated and the example is updated. So that's how you can, if you're working with custom fields and they're enabled in the REST API, that's how you can submit them to your API requests to be able to push the data to your post meeting. Okay, we'll take another break if there are any questions around all of that. And then we will move on to some basic authentication of the REST API. If you want to test the authentication with me and you haven't already got post-man install, please do that. I'm actually gonna do that now because I don't have it installed on my system. So if you have any questions, go ahead and ask them. Otherwise, I'm going to hop on over to my desktop and find the post-man download over here. And on a Mac, it sort of adds it to your home screen there. So I'm just gonna run that. And I'm gonna say, yes, I want it to open. Yes, I want to give it to the application folder. And then I should get post-man opening up. There it is. And you should see something like this. Actually, you shouldn't see something like this because one of the things that I like about post-man, so what you're seeing here is the fact that post-man will save your workspaces to the cloud somewhere for you and then you can get them later on. But what you should see is something more like this with empty workspaces and this should be empty. Mine's clear currently, but it could be something along these lines. See there's some questions. So if I can answer those quickly. So it says, good morning. Will there be a recording available for the session? Yes, there will be. The step-on has pointed out on WordPress TV. Usually posted during the course of the day tomorrow, Friday. Tomorrow is Friday, yes. And I then link the WordPress TV link in the meetup. Comments. However, if you don't see that, why is it braver than I'm going to tell you? I don't want to let you know. Probably because post-man's are a huge step this way. If you don't see that, you could also just go to WordPress TV and search for Let's Code. Because there is a tag, WordPress TV uses WordPress as a trip. And there is a Let's Code tag. And if you search for everything by Let's Code, you'll see there's a tag there, Let's Code series. You can check that and go newest and it'll be the one right at the top. And then you can see all the others on there as well. Okay. I need, I think that's water. Maybe water. All right. So if you've got post-man along, set up and running, if you don't want to worry, I'll show you how it works in a second. But we're going to talk about authentication with the REST API. Now, depending on your use case, we'll determine your choice of an education option. As I mentioned earlier, if you're bonding something for the dashboard, so some of you might have seen that the Yoast plugin released a new update to dashboard recently. And I think it might be used in the REST API. You don't need to worry about authentication because it's in the dashboard and the user's already authenticated using the cookie-based authentication, which effectively is storing something in your browser to say this user is logged in. So it all just works if you don't have to worry about authentication. That's if you're using the REST API and the Backbone.js client. If you're using, if you're writing, if you're building blocks and you're using the WordPress API fetch package, that also doesn't require authentication for the same reasons. If you're just fetching a list of posts types, that actually doesn't require any authentication. You can do that from outside because that data is public anyway, unless you turn it off. But if you need to create posts or create content, you do need to be authenticated. There are a couple of ways that you can do authentication. Now, if we think about using JavaScript and the REST API, any JavaScript code that you run or that you code, unlike PHP code, is going to be visible wherever you're running that code because JavaScript gets loaded in the HTML and you can see that code. So if you're storing your API with authentication username and password in your JavaScript file, that's a bad thing. So if you're building a SBA, a single page application, or if you're building something for the web and you wanted to talk to and push data to WordPress instances, then storing your username and password to JavaScript is not great. So there are a couple of options available for that. I'm not going to dive into those today because there are quite in-depth topics and maybe we'll cover them one day. The one implementation is using something called OAuth. And the way OAuth works is the application makes a request to your WordPress site. Your WordPress site then returns a callback URL to that application, says, yes, I authenticate you. It returns a token and then uses that token to store in memory somewhere to make additional requests. That's one way of handling it. The other way of doing it is using something called JSON web tokens. This is a fairly new way of doing things. These are all plugin-based solutions. So you install the plugin on your WordPress site and then you can implement these options. I haven't dived into JSON web tokens yet. I'm probably going to be planning a series of workshops specifically on each one of these options in the future. Maybe not in the near future, but somewhere down the line so that we can understand how they work and what the pros and cons are. So they might do a series on each one. But faulting to WordPress, there is a way that you can authenticate a user from outside of your WordPress instance and allow them to do this. And that is known as application passwords. Now, application passwords was a plugin developed by George as the partner. So he's a colleague of mine who works on the Jetpack team. It has now been merged into WordPress core and there is a full integration guide which I'm going to share with you in the chat if you want to read it later that shows you how to set it up, how to use it, and then how to interact with it in the code. And essentially what this does is this generates an application-specific password for your user. And then when you make requests to the REST API, you pass your username and your password to those requests to authenticate that request. And then if it's authenticated, you return the data. So this is somewhere where this is perfect for something like building a mobile where you can store that data securely on the phone. You can encrypt it, store it securely and then unencrypted when you need it. And it's not stored on the phone in any way that somebody can access it if they do get hold of it. So that's great for something like that. It's also, it's again, it's not great for building SPAs or web applications that are connected to a WordPress site but it's perfect for like a mobile scenario or an application that you control in some way. So the cool thing about it is creating an application password is really easy. Before I show you how to do that though, I want to switch back to Postman so I can show you how to test your API endpoints because what we can do is we're going to test the get endpoint of the post request and then we're going to test posting, creating a post, using a post method. And to do that, we will need to authenticate. So we will go through the authentication process where we do that. So I'm going to jump around a little bit so hopefully you can just bear with me on this. So let's go back to Postman. So Postman, as I said, is this way of testing your API requests. It's a great application. It can be used for testing more than just REST API requests. I'm pretty sure you can test SOAP environments, you can just XMOMRPC environments. I use it for REST API testing because it's just the easiest tool to use for it. When you get started, it's a good idea to hit the create collection button and then collect all your requests for a specific project in one collection. As I mentioned, Postman syncs these if you create a free account with Postman, your collections will be synced. I think there's a limit on how many collections you can have. I generally only have one or two collections at any one time because I'm working on a bunch of good time. So I'm going to create this new collection and call it WorkPlace because that's just the name of my site. And then inside of your collection, you can create requests. So I'm going to add a request here. You'll see by default when the request is created, it is a get request. And because what I like to do is I like to name my requests based on the method and based on the resource that I'm fetching. So I'm going to get posts. So that's what I call it. It just makes it easier for me to see what I'm working with. It names it on the side there. I just want to see if I can zoom in a little bit here so you can see this in person. Yeah, let's see if that's where we go. And then I can input the request URL. Now in our case, we're going to work with the post endpoint. And if you don't know what the post endpoint is, I'm going to show you very quickly. It's whatever your, where is my site? Well, I lost it now. There you go, learn post. It's whatever your site's URL is. So local or online or whatever. And then it's wp-json slash wpd2. So in my case, it's learnpress.test. I'm going to copy this into the link so it's whatever your domain is. I'm just going to take up a domain file so that you can change your request URL. So it's whatever your domain is. And then wp-json wpd2. And then just the name of the root which in this case is post. So let me see if I can edit that a bit better. I can't, I'll just leave it like that. So this is my post root. And if I access the get endpoint by making a get request, I will return all the posts. If I access the post endpoint by pushing a post request with some data, I should be able to create a post. So let's copy out this URL and pop it into our postman request URL area. Here we go. And that's all we need to do. Create the get request, add the URL. You can then hit save to save it, save it to your collection. And then when you want to do a test, you can hit save. And that will then make a request to your site. We'll see it there at the bottom. And what's nice is it gives you the response nicely cleaned up. You can view the raw response if you want to. But you can also, by default, so the pretty option, the clean option, so you can read through and you can see how this works. Okay. Now we want to create a post. So I'm going to go through the process of setting up the request in postman first so that you can see the errors that happened. So I'm going to create a new request, which I can do by clicking on the three options here and say, where is it? Add request, where is it? Add request. And I'm going to say post, post, and I'm going to change this to a post method, but I'm using the same root. If you remember from the earlier session we did a couple of years ago, the root is the URL. And when you access that root with a specific method, that's the end point. So this is the post endpoint for the posts route. Click again to get this request. And if I hit send on this one, you'll see that the response I get is, sorry, you are not allowed to create posts as this user. And this is because I'm not authenticated. So I need to find one of the authentication methods and authenticate this request. So this is a great way of testing where the authentication works by using postman outside of your WordPress instance. So what I can do now is I can switch back to my WordPress install. And I can go to my user. Now this is what I like about this is it's user specific. So if the user isn't on the site with the right privileges, they can't access. So I'm going to go into my admin user for my site. And right at the bottom of the user interface, there's an application passwords area. And you'll see it says application passwords and authentication via non-interactive systems, such as XLRPC and the REST API. So what this means is I'm creating a different password for my user specific to the REST API, not my user password for the dashboard. So if somebody should get hold of this, all they can do effectively is create posts. They can't access my dashboard. So I can then log in and I can change passwords and revoke passwords and stop that access from happening, which is what I like about it. So you could, if you wanted to put on a website somewhere. And the worst that could happen is that somebody could create whatever content you allow them to create. Not the most secure way, but it is better than just giving out your username and password. So what I like to do is I like to give my password a name based on the application that's accessing it, in this case, the REST API, specifically Postman. And then I just say add new application password and here it gives me the password. It says your new application password for WP, REST API, Postman is this. And it says be sure to save this in a safe location because you will not retreat. So I'm not going to be able to get this back later, which I like. And then you'll see at the bottom of the list is the option to revoke this password. So should this password get leaked somewhere, I can just hit revoke, it can move the password and it'll access the shortcut. So that is my password. Let's see how we can test this in Postman. So let me just make sure I've copied this into the browser. In fact, I'm going to stick it. You can't access my local environments, I'm going to stick it in the notes just to save it for myself. I'm going to switch back to Postman and the way we do authentication in Postman is there is an authorization area. And the type of authorization is BASICALTH. Now in a future session, I'm planning on showing you how to do this in a REST API request. We'll probably do like a React app or something that's separate from the WordPress dashboard and I'll show you how to pass that data. But for now, we're just going to do this. And then it's literally just a case of using the username, the same username from the WordPress site, but then passing in your password. So in this case, it's the password that I just copy and pasted. You can also click Show Password to make sure it's without a password. Yes, it's the right password. And now when I try and create a post, I'm going to save this and hit send. I get a different message and it says empty content. So what that tells me is my request is authenticated, but I'm not sending any data, which makes sense because I'm not. I'm not passing in type of content in those kinds of things. It's actually easier type of content and accept or empty. You don't actually need accept, you just need type of content. So how do we do that in Postman? So the way we do that for the REST API is we click on the body tab in the request and we click on the raw option. So it's raw data, but instead of text data, we want to click on this dropdown and switch to JSON because we're passing JSON data. That's how REST API works. It uses JSON data. And then if you remember looking at our JavaScript code, now I can't get visual studio's cut. It's effectively this kind of content. So using JSON, so open, close brackets and then passing in properties and values. The only difference is in JavaScript, you don't need to use any quotes because it's JavaScript code, not JSON code. So it takes the JavaScript code and converts it to JSON when it creates the request. When you're doing it in raw JSON, you do need to wrap your properties and your values in double quotes. So I'm going to copy and paste this example in the check just because it's easier than typing out because we're running out a little bit out of time. So it's great to look at something like that and I will paste it up there as well so you can see it. So I open and close the cooly braces and then I pass in the title property in quotes, colon and then the value in double quotes. That's a JSON format that I need to pass using double quotes. You'll see that if I actually was nice about postman, if I use single quotes, it actually gives me a little speedy line that says, whoop, there's an area. And if I click on it and hover over it, it actually says unexpected in the string because I'm using a single quote. And if I change this one to single quotes as well, it says, I don't like that value expected and starts giving me errors. So it's because I'm not using double quotes. Other than that, content is the same, status is the same, meta is the same, passing in an object, URL, postman.com, all of that is exactly the same. So this is what your body is. So authorization is basic auth, username and application password specifically. This is another cool thing. If somebody accesses my postman requests that I've saved to the cloud, I can just revert that application password. So this is a great thing to use when testing API requests. And then in the body, you click on raw, switch that to JSON and then passing your JSON object of your data. And now if we save this and we hit send, there we go, it's created the request for us. There is the slug, the publish, the title, all of those things are done. Let's validate it's real, it's actually been created. And funny side note when I was preparing for this workshop, I discovered that my WordPress site that I was working on was not connected to the right database. It was actually storing things in the wrong place. So I had to refresh my entire site. But if we go to the post table, there is my postman post, there is the content, there is the URL, it's all working. So every single one of these requests, creation, updating, updating, updating, deleting, deleting, listing, you can do all of that from postman. It's a great way to test your API endpoints. When you are creating custom endpoints, which we definitely will do in a future session, it's a great way to test those as well before writing about your JavaScript code. Make sure it does what you expect it to do. Make sure you can pass the right data, you can retrieve the right data. If you're working with a REST API or any REST API in any way, I highly recommend trying out a postman. It's a very cool tool to use. Okay, that is my bit for today. I hope that you have enjoyed that. Are there any questions before we wrap up? Because otherwise I think we can call it a day. There don't seem to be any questions. Hopefully I haven't bombarded you with lots of information. In a future session, we're going to be looking at creating custom endpoints. So endpoints that aren't specific to data. We're going to be, for how to say that auth used is only the basic one. For how do you mean in this example or just in general? I'm not quite sure what you mean. Wow, Stefan, that's early. I appreciate this one. Yes, I'm just using basic auth now. I'm planning separate sessions on how one could use auth, how one can use. So Jose says, are there videos for Oauth 2? So I haven't found any good videos out there for using Oauth 2 yet, which is why I'm planning out. Oauth 2 is in my experience as a developer. It's one of those things that it's kind of like the joke, not the joke, but the line from the matrix you have to experience it yourself. So one of my goals this year is to actually do a tutorial and a workshop on just focusing on Oauth 2 and how you would set that up and how it would work or Oauth 1 or whatever the options are. To give you an idea, the plan is I'm going to be continuing down for the next few weeks at least on using the Backbone.js client and the sort of default authentication. So you're building something that works in the dashboard. And then somebody gave me an idea on social media recently to say what would be really interesting to see how you would do the same thing using React. So in other words, maybe building something that is separate from your WordPress site that needs to be able to authenticate. So when we do that, then I would probably look at the authentication methods and during the course of those series. Now, when that's going to happen, I can't say because it all just depends on the information that people are looking for and that kind of thing. So when that's going to happen, I can't say unfortunately there's only me. If there are any developers out there watching this who want to join me in the training team and join me in making these virtual videos, please do reach out because I've got loads of ideas and there's just one of me. But in the dashboard, in the dashboard in Backbone. No, no, if you're asking about React, what I mean is actually building it separately for the dashboard. Fahad says, I am in, I'm a WordPress developer. Also, Fahad, if you are keen, please go to the make WordPress.org training site, which is the training team site. In the welcome box, there's information on how to join the team, how to join us in Slack. You're welcome to join and help me make this content. I would love to get more of me out there. So, so let me know. So just as I've been interacting with API, creating custom post types with PHP, yes, pretty, so you can use the HTTP API for that. So yeah, there's all kinds of ways of doing this, but for the moment I'm focusing on the rest API because I see a lot of folks talking about how to use the rest API, how to authenticate the rest API. So I'm going to be focused on that probably a few more weeks. The other plan I have is WordPress 6.2 coming out soon. There's going to be some content around that. I'm going to have to create something. I'm going to have to take a break from rest API things and focus on that for a bit. But yes, I do plan on getting there. I do plan on setting up tutorials and workshops on this. So there's information around how that works. Cool. Right, that's my bits. So thank you all for joining me. If there are any follow-up questions that you might have, please do post them on that GitHub issue, which I will find and share with you now because I do gather those thoughts in my notes for future sessions. So if you have ideas of things you would like to see covered, please let me know and I'll do my best to cover them. Thank you all for joining me. I will do my best the next week to not have any bugs in my code that you have to keep up. Enjoy the rest of your day, the rest of your week and I will see you all next week.