 Alright, welcome back to the channel. Today, I'm going to show you how to pick your data from an external API and throw it on the front end like this table we have here that's showing the ID name, username, email, full address, a street name that we are picking from this API that's located at this URL. Now, from the last time we were just getting the information and dumping it inside our admin, I'm going to change this admin hook that we have here. I'm going to add call it to use a new hook which is called add short code here. And what we're going to do is that it requires a tag and a function call back name. So we'll just maintain this call back name. But we're going to change this and call this external data as our short code. So this tag is the one that we shall copy and go into our posts. And inside our posts, we're going to add two brackets and then inside it, we shall test our short code which is external data. Now, if I upload the update this and then go to view the page or the post for that matter, we'll see that it actually just throws nothing on the front end. We have nothing shared on the front end here. So what I'm going to do is that with this function, I'm just going to turn a short string of information and say call is working and save this. All I need to do is command reload here and we'll see that we have our call is working here. What we're going to do at this point is we're going to need an HTML table. And it's the one that I'm going to first have here. And I'll start off by saying our HTML table, let it equal to an empty string. So when I start duplicating here, I'll say now let's add a table tag and then I'll duplicate this to close off the table. And then inside our table, let's have a table row that will have all our headings close this off. And then I'll duplicate this and just move them up a level up and then just add a TD here and TD here. So let's just go to our information on our API and see what we're getting back. So in our table data, we have an ID, we have a name, we have user name, we have an email, and then I'll go for the address that has a couple of information that goes levels deep. So with this right here, we're able to come back when we reload this. We'll see nothing has changed because I did not change a couple of things. So from this point onwards, I'm going to just append the HTML cannot equal to we have to add. And so I need to add a dot to that. And then at the end of the day, I'm going to return this call and say I'm returning our HTML. So I'll save this. And then when I reload, you'll see that we have our ID, user name and email showing up here. So the next piece of information that we're going to do is that we're going to be having another table row. But this time around, it's going to be with dynamic data. So I'll just duplicate this here, move it down here. And then I'm going to start making our information available. So I'm going to just basically move everything that was up here in the callback function, and then move it down here. So we'll start and commenting it out. If we find that our response has an error, let us echo out and return that our error, we have an error. So just return this and say something went wrong and then give back our response error. So this needs to be response because we're picking it from here. We don't have to have we don't want to have any issues arising from that. We are going to, for the first time, let us verdam the information that we get back from our API. So I'll use the WordPress function of WP remote retrieve body. And with this, we shall be able to see what we get back as the body from our API calls. So I'll reload this. So when we reload, we actually see our data comes back. And it's a string of information, meaning that it's come back, it's coming back in a JSON format. So we'll have to decode that from JSON into objects that we have. But we'll see that each object that we have will have a name, a username, email and address. So first things first, let us convert our data into an object. So I'll call these results. So we'll save our response inside a variable called results. And now what we're going to do is we're going to JSON decode our body information and save that in our results. What's going to happen is that this will be turned into an object. So if I just verdam this, see when I reload here, we have an PHP object that has a number of items that are being looped through. So we'll get, we'll now start doing a for each loop. And the part where we want to do the for each loop is right here because that's where we want to have the information repetitive. So we're going to use for each, for each object piece that we get, I'll move this. So we'll say as for each results as results. So for each result, let us return one object result. And in here, we're going to start picking off the results. And then we shall append, use the dash, and then the greater than sign, try to concatenate all of this to get our ID. And so we're going to do this for all the other pieces of information that we need. So at this point, I'll just duplicate. So for we'll get the result ID, and we'll get the name, come back here, change the name, we'll need to get the username as well, because it's the next item here, then we'll get the email and next we shall get the address. So duplicate this, add the email, duplicate this, add the address. Now, remember that our address is also levels deep, it has its own object. So we have a street, we have a suit, we have a city and a zip code. So we'll just add that street, suit, and city. So we'll have address, street, and at this point, we're going to add a space. So we need to concatenate a space here. And then we shall add on the next piece of information. So instead of this street, we are going to add on a suite. And then I'll make this wrap up. Now, on the part of the suite, we need to add some space and duplicate this. So pass this in here, add the space that we need here. Then after the suite, we shall add on the city. So probably at this point, we want to add a comma. At this point, we want to add a comma before that, maybe we want to add a comma also on the suite. On the suite, we'll add a comma. And then after the city, we need to add a zip code. So copy this zip code and then just pass it here at the end of the day. So I'll just copy this again, the comma here. So we have that right. So I'll save this. And this will not just be address, it will be a full address. Let's stop dumping this information here and reload. And when we reload, we actually have our ID name, username, email, we have our address in its full entirety. And that works all the way through our post. The beauty of using the short code is that I can actually just copy this short code, go to the widgets, and then say, let me add a new text and the widget, I'll move it up here so that it's prominent. And then I'll add our external short code in here. So when I save this, come back to our front page, reload, we'll see that in our footer, we actually have the same table showing up. So this is well done. This is how we can show our information on the front page. Feel free if you want to turn this into a block to make it easy for you to also edit on the back end. But this is how we easily throw things off on our front end. So we might want to title this table and say, let it have an HTML. Now we're going to add a header one or a header two for this case. And so I'll close off our header two and say this is the title and save this. So when we come back and reload here, the little change we have is duplicating the titles because we put this in the wrong place. It shouldn't be in the for each statement. So I'll move this up here. I'll move it way above the table and then save that. And then when I reload, we have our title here. But I don't want it to just be saying title, I would like for my client or the user of the site to be able to edit that title way easier. So the short codes have something that is so beautiful about them is that they allow a set of arguments to be passed inside them. And we call those the attributes. So what do I mean by that? So for example, if we have external data in our post here, I want someone to be able to add title equals two quotes and say, this is my new title. And then when they update, this should show on the front end. So the title is not showing up on our front end, but that's easy because I add short code here when we just add short code and tag. It actually passes some attributes inside our call back function here by default. So I'm going to add at short for attributes. And now this is accessible to all our function that we do have here. So what I'm going to do is I'm going to first add a default, for example, so we'll have defaults because we don't want it to just end up like that. We want our customer to be able to know or our user to know that we actually have some options in there. So we'll add an array and say the first piece of information we want to have is the title and that title is just going to be a table title right here. So that is our default. Now, inside our acts that has been passed, we need to actually arrange this and make this we need to get this and add the individual information. So we're going to add some defaults, our defaults will be passed into the ads. And then inside the ads itself, we are going to get those attributes that have been passed through into our function. And then we're going to add on the tag of our short code. So we'll get this tag and add this here. So meaning that we now have our attributes ready, we've added our defaults, we've modified what we have and we've passed it on onto the right tag. So the next thing that we need to do is come back to our title here, we're going to write some PHP. So we need to escape these two pieces and then add two dots to concatenate. And in here, what we're going to do is that we're going to add our ads for attributes. And then we're going to look for one particular piece of information, which is our title because we named our title to be here. So we're going to change it to be this. Let me reload this after adding ads title here. I realized and made an error here. So I need to make this a short code ads, which will allow us to add the defaults that we've added the attributes and then passing also the short code. So we'll just delete all of this and then change this into a closing curve bracket. So once we save this here, we are now ready to go. Our title will be showing up above our table. So I'll reload this here and we'll see that this is my new title is actually showing up here. If I use ad, they don't add a title attributes to this short code, we would have our defaults showing up and it will be table title. So that's how we actually add our content on the front end. So I hope this was helpful for you. I would advise that since in most cases, this data is not changing every 10, 5 minutes, that you can save this into a transient or you can actually save this information in a custom database, like the videos that are listed into inside the descriptions right below. So you can learn how to do that and then just basically throw this information on the front end. So I hope this was very helpful to you. Let me know in the comments, give a thumbs up if you like the video and subscribe to the channel. If you haven't yet, thumbs up.