 Welcome back to the channel in today's video. I'm going to show you how to use the WordPress stressed API using it with Ajax in JavaScript and making sure that we're getting dynamic content on the pages or in whatever location of WordPress we want to do that. Now we'll be doing that in a plugin and we shall be able to see what I do and maybe you can do something different or modify it and make your own application. Now one of the things that uses the rest API in WordPress is the block editor and you can see from here that there are different blocks that you can actually pick. You can do different things with them. You can edit them and this is a little bit complex in terms of nature. So actually the new editor uses things like React, JavaScript, the rest API and so many other things that are wrapped around each other to have these complex kinds of workings in it. So what we are going to do is we're going to use what we call a shortcode. So I'm going to come to this page here and what I'll do is I'll look for shortcode block. So we're going to have a shortcode which we're going to call rest dash Ajax. On saving this and publishing we should be able to go and view this page on our website and you'll see that we have this rest Ajax as a shortcode but it does nothing. So let me copy this right here. I'm going to go to my editor. I'll go in the plugins section of my site. So basically I've just dragged and dropped my public folder in my editor and I'm going to open a new folder here which I'll call is rest Ajax and in here I'll open a new file which I'll call rest dash Ajax dot PHP and that will allow us to start our plugin. So I'm going to write some PHP here and I'll write the expected comments from WordPress to start our plugin. I'm using a code snippet from my editor and it allows me to do this. So I'm going to have this as rest Ajax working together and then I'll change these other things and I'm going to first forward this video just to make sure that we finish writing this plugin. So after starting up our plugin I'm going to do some basic security in here and we're going to look for the abs path. So when WordPress plugins run normally they usually define the abs path and then if that's not defined that means we're not running the plugin normally. So we should say unauthorized access and the first thing that I will come to do I'm going to first close my integrated terminal right here. I'm going to come here and then I'm going to write the shortcode. So I'll say shortcode for rest Ajax. So the first thing we do is use the action hook of add shortcode and inside here it expects a tag and a callback function. So the tag that we're going to have is going to be similar to what we put in our shortcode on the front end. So we put rest Ajax in the brackets here and then we're going to write a function which I'll just call take your press rest Ajax. So take your press underscore rest Ajax shortcode and that will allow me to have a unique function. So I'll put it here and then write the word function before it and then put our brackets that are necessary to write our function. And the first thing I want to do here is say I'm going to echo and what I want to echo here is say initial shortcode text and that's what we're going to have. I'll add a semicolon at the end to make sure we don't have any failures and I'm going to come back in my admin area. I'll go to the plugins section and in the plugins I'll activate our rest Ajax that's working together and if I come back and reload this page you're going to see that we have this initial shortcode text. Now we have this running outside here because it doesn't have any particular html to it. So when I highlight this and go and preview it you'll see it just has this yet all these other pieces have paragraphs and so on. So let me wrap this in a paragraph and then I'll close it off. Save this let's go and preview our text again and you'll see we have this properly indented and it's in the right place. So the next thing we're going to do is we are going to create a rest API endpoint and that endpoint is going to provide us all the information that we need to throw right here on our page. So I'll come back here and I'm going to use an action so it's an add action. So in here we use the hook that says rest API init. So when the rest API is initialized we should have a function in here that should run at that point and I'm just going to copy this right here and say take your press rest Ajax and I'll say endpoint. Now with this I'm going to write a new function and give it that name and of course add our brackets and here I'll just scroll this up so that we have more state and in here we're going to use the register rest route and that's the function that we have here and it expects to have a name space. It expects to have a route and any other arguments that you might pass in here. The first thing we'll have our name space the name space I'm going to call take a press and then after our name space going to add a route which I'll call rest Ajax I'll add a comma here and right here we're going to have our arguments which is an array of stuff and the first thing we're going to do is register the method that we're going to use on the rest API and we're basically going to use a get because we want to get information. If we wanted to send information to that endpoint we would use the post method. We now need to write the permissions and say permission callback should actually be mapped to return true so we have two double underscores then we have return underscore true and we'll add a comma at the end and then after that we're going to have our callback function just remove the extra b and then of course here we can pass in our callback that we want to have and I'll just copy this take a press rest Ajax and I'm going to add the word callback at the end just to make it stand out. I'll copy this and then we can have that function here of course with the brackets being opened up and I just need to add a semicolon right here and I'll move this into space so that it matches the alignment with all the other methods. Now of course this does not add any particular thing to your code because PHP ignores the spaces but it allows you to make your code a little more readable. Now I'm going to save this and then we're going to go to the take a press endpoint and we're going to look at the rest Ajax endpoint. Now the way we see that on our WordPress site is we get our URL which is this I'm going to put it here I'll type wp-json and then at the end we're going to have the take a press namespace and we're going to look for the rest-ajax here and when I hit enter you'll see that we have some errors on line 35 which we need to fix so line 35 has this but we did not close with a semicolon at this point so I need to fix that with this method then if I come back and reload you'll see that we don't have anything on this point and it says nothing was found so that means it's an error in our code if I come back and look at the namespace it's right we have the right endpoint method is supposed to be methods right here permission callback is correct it's returning true and the callback should be a double L and once we have this double L and our name here working properly if we save this and come back and reload here you will now see that this is showing and we don't have anything in here so what I'm going to do is come back to our code here and I'm going to echo a simple word and I'll say take a press was here and instead of echoing I am just going to return this and save this and that will mean this callback is going to return one thing if I come back here and reload you'll see that we have take a press showing up here and that's the correct endpoint so we are going to be calling this rest endpoint and we're going to call that data to show up actually right here so I'll come back to my code in here and I'm going to do some stuff with Ajax but before that let me just comment out this URL and also comment our code so we'll have create a short code for the rest Ajax endpoint then we shall create a new endpoint create new endpoint to provide data these comments are really good if you want to make sure that your code is readable in the near future and then after doing that this is a callback so this is the rest endpoint information and now we are going to start writing our Ajax so here we say write Ajax to show the information in the short code so the one thing that we are going to do is instead of actually making a new function and a new hook I'm going to just cut all of this and then I'm going to bring it here in our short code and we shall have this only running when this short code has been added and what we're going to do here is we're going to use two WordPress methods one is the wp enqueue and we're going to enqueue the script that's what we're going to do at this point so this method will actually allow us to enqueue our JavaScript and have a JavaScript file here so the one thing that we need in here is a handle and we'll say this is the rest Ajax and we'll say JavaScript or script and after adding a handle which is more like an ID we need to add the source of our JavaScript so I'll say plugin and we're going to look for the plugins URL which is a default WordPress function and in here we're going to pass in a path so we shall create a new directory called assets and in here we'll have JavaScript and we're going to have our script in here.js so that's what I need to create here in this plugin I'll create a new folder called assets in assets I'll create a new folder called js and inside that I'm going to create a new file which I'll call script.js and we shall write all our JavaScript here now after doing this I'm going to get this URL that we have here cut it save this and I'm going to come back to this location and just paste that comment right here now if we are going to use Ajax we'll actually need to be tapping inside an event because that's the way JavaScript works it works with events and that means we need to go back to this code and we should give this an ID and so the only way we shall identify that html is if we actually have something here to identify it and we're going to say that is the techie press text that will be our ID right here and then what I'm going to do here instead of echoing this I'm going to escape PHP and then just have my html and then I'll open up PHP right again here I'll tap that and I'll save this if I come back to our front end and reload nothing is going to change but we shall be able to have this paragraph with that ID so I'll come back to our JavaScript because that's where we're going to focus most of the time but before I go there I need to make sure that this code that I've enqueued I actually add some dependencies to it so in here we're going to use jQuery and remember jQuery comes by default in wordpress so we'll use jQuery because we want to use Ajax that comes from jQuery as a package and we're going to say let this have a version of 0.1.0 because that's the same as our initial plugin we can always update that whenever we have a new version of our script or a new version of our plugin and I will say here let this be true because we want to load this script in the footer of our webpage and that is simply because that will allow our pages to load faster and it will allow us to tap into the JavaScript when the whole DOM has been loaded so after doing that I'm going to come back in here and we'll know we'll be getting this techiepress.txt which is going to be an ID that we'll use I'll comment it out for a later use and I'm going to start writing some jQuery so I'll say let's have our jQuery in our jQuery the first thing we'll do is say let's find out if the document is actually ready so if the document is ready then we shall perform the particular code that's going to be in here now inside this we shall have a function and in this function we're going to assign the dollar sign so that it takes this jQuery and represents it so in the function we're going to come down here and we shall say our jQuery right now we're going to do some Ajax calls that's what we shall say of course I'm going to add this and inside this Ajax we're going to use some Kali brackets and in these Kali brackets we are going to pass in the URL now the URL that we need is actually this statement right here but I'm not going to quote the beginning part of our domain I'm just going to get the WPJ from here copy it and then I'm going to pass it inside strings because we don't want to have any issues with our JavaScript now this basically tells Ajax go to this URL that you see here and then you're going to get some information so after this has been done and this is a method in jQuery what we want to do at that point is we want to console.log whatever information we've got from that endpoint and we want to just have it here so I'm going to console.log the data right here so I'll save this let's come back to our particular URL I'm going to reload this and I'll open up the console and you will see that there's a bit of some issues that we have and the reason is our plugin is actually not passing in the right URL for the JavaScript so I'll come back here and I'm going to go to the plugins URL this function actually requires two arguments so I'll add a comma here and I'm going to add this file to say hey plugins URL function do you want to get the file make sure the plugin that you're working with is the one that this file this very file that we're working in is after getting that plugin folder then you can attach these different pieces of information to it so I'll save this come back here and I'll reload and you will see that we have some issues now in our jQuery which is good so we see that this is going to the sample page and then it's going to the wpj zone and that's not what we expect so I'm going to come back to our script right here and I'm going to put a slash to basically say on that default URL then go to the wpj zone then take a press then rest ajax I'll come back reload this and you'll see that it's telling us data is not actually defined so what I'm going to do instead of just console logging this data I'm going to write a function here and then I'll pass in the data first and foremost then we can actually be able to use this data so I'll push this console log in here to log the data and then I'll reduce this spacing just to make this look right I'll save this come back here and reload and you will see that we get the take you press was actually here that's the information on our endpoint so we are using the rest api and ajax to get our information in real time now you might be asking yourself why do you keep on making bugs and making errors because that's the way coding is you try different things you mess up even when you remember particular things coders are not superhuman and definitely I'm not one but I also allow these errors to occur so that when you get to that place where you're also having those errors you can be able to troubleshoot and know how to fix some of those errors so now that we have our data showing up here we're going to be able to actually push it back to our html right here so in here instead of console logging the data I'm going to just come here and say we're going to use ajax and ajax is going to find for us something it is going to find for us the id that has this take you press text so I'll put in here I'll add our pound sign to basically say find the id that has take you press text then you're going to say the text of that is actually going to equal to the data that we have here so I'll copy this and put in the data right here I'll come back here and I'll reload and you will see that our text actually changes coming from the rest api and it replaces the original text that we had here so that's how you can actually use the rest api and ajax to have good content I'm going to use the json tpcode api and this is basically a fake json api and I'll just go to it and we're going to use some of the URLs that are actually open for us to do so for example when you run the to dos here you will see that you actually get back this one to do right here if you want to run so many you have these other resources available so you can be able to get posts albums photos to dos users and so on so for now I'm actually going to just go and get some posts and we shall get all these posts that are coming from here and we shall throw them inside our particular page so the first thing that I will do is edit this page because I don't want us to have all the other information that comes after we're just only going to leave our shortcode so I'll remove this remove this block and then I'll update this and after updating this we should be able to go and view our url and you will see we just have take a press was here so we're going to do a little bit of stuff in here I want to try out something with you let's just go and call this API and then just get back that data and throw it on our endpoint here and the way we do that is we're going to come back to our php right here and inside this php in our callback function we're going to have something called data and this data on the onset is going to just equal to something that's empty and we're going to use the wp remote get function which is the way we ping particular apis now when we use the remote get we want to get information when we use the remote post we want to send information to a url you can also use the wp remote request which allows you to use either the get method or the post method but for now we're just going to use the get method in here and we're going to pass in the url so I'm going to pass in this url like this and after passing in the url I can pass in some other arguments that I need to have so let's say we have args here I'll describe our args up right here I'll say args is actually going to equal to an array of data and inside here we're just going to say let's pass the methods and the method is actually going to be the get method we need to wrap this in some strings and then add a comma we'll save this and what we're going to be say let's get our response right here after getting our response we'll say it's equal to that and then we are going to return the response instead of this text so I'll copy and paste this right here but I need a semicolon here so that my editor stops screaming at me then I'll save this and say we're returning the response if I come back here and reload this you will see that it's going to throw an object right here that means it's getting a lot of information from this endpoint which is basically the user the id the title the body and that's coming back as an object so I'll open up our scripts again because that's where we're getting the data and then I just want to console log that data and add a semicolon here so that we can see it when we come here so I'll reload this we see we have our object object there I'll inspect this go to our console and you're going to see that we have our headers and we have a body in here so the way we retrieve the body and the header in our php is this way so we can go and say our response is actually going to equal to the wp remote retrieve and we want to retrieve the body at this point and the body we want to retrieve is what we get from the response here so I'll paste that in add a semicolon save this let's come back here see what we get and you'll see that now we are getting this data coming back right here and you'll see that we actually have a json script in here we have json being returned right here so what we need to do in the first case is we need to actually decode what we get here so I'll say our response is going to equal to json dash decode and that's basically saying we want to get our json that we get from the response and we want to decode it so that we can use it in the ordinary php way so I'll remove all those spaces in there and then I'm going to come back here I'll reload this page you'll see that we're getting different objects coming back so we have an array of objects so we can actually look through each one of those objects if we need to so after getting our array with all these objects here we can actually tap off the id the user id and the title if we need to so the way we do that is we shall go through the array and for the first array I'm just going to get the first array and after getting the first array I just want to get the title from that particular object so let's go and check our console log and reload this page and you'll see that we get only this item showing up here and we can actually pass that information inside this location right here let's move on I'm going to comment this out right here and I'm going to use it for each segment so for each of our data items we're going to have a block that is returned and for each one of those blocks we're just going to say let's have a paragraph so I'll open some quotations here and I'm going to say let's have a paragraph and inside that paragraph of course we need to close it we're going to open up our JavaScript and we shall use the plus symbols to say we are pending some JavaScript work and we shall say for the block let's go and get the title of the block so since we're inside this loop we're going to take advantage of what we already have here so I'm going to say on this take a press dot text I want us to append and what we want to append is a paragraph with a block title over there and we're going to add a semicolon at the end right here and then I'll remove this extra stuff we don't need so I'm going to save this let's come back here I'll reload this page and you're going to see that we have our initial short code text then we have paragraphs and titles that are following here after so we can do more stuff if we need to this so I'm going to inspect this you'll see that this paragraph actually has nothing to it so I'm going to come back here and I'm going to use what we have right in here I'll copy it I'm going to paste it in here and I'm going to change the title to our ID we just wanted to have an ID so I'll say ID is equal to this and then I'm going to add another quotation right here so this so that we can actually have the right stuff so we now have the proper text showing up here with an ID of one ID of two ID of three right here ID of four and so on so you can do so much more with the REST API you can also use it to ping and call actual data then you can use your Ajax to have all that content in real time so if you actually have seen this and this is something you wanted to use you can actually attach a button to make that call so that you're not just calling the Ajax right here you're triggering it on a button that's how you can do this you can have your REST API bringing in all the data doing all the PHP stuff for you and then sending that down to your JavaScript and then adding it inside your particular HTML and you can have WordPress doing amazing things for you now you might ask me why didn't you do everything inside Ajax itself why did you have to use an endpoint to have PHP running the rest of your calls right here and I would say the reason why we use the REST API first and foremost it is secure you're not having issues that come from Ajax and so on adding privileges and also non-privileges and so on the REST API you've instructed it to have the stuff that needs to be done you've given it the permissions that need to be given everything is straight out of the box and ready for you there is a security layer that has been added to your application so I would advise you from now on instead of using the pure Ajax to do all that use a REST endpoint work like the way Gutenberg is working and then you can use your JavaScript to just add some of those interactive nature kind of things like the button clicks like the spinning and waiting for the data to come in and then you put your code as HTML on your front end or even in your back end so if you enjoyed this video don't forget to give it a thumbs up share it with your friends and leave me a comment or a question down below make sure you've tried this try to optimize it to your own use case then we can have a conversation about it otherwise enjoy whatever you're developing and don't stop