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 our information and dumping it inside our admin. I'm going to change this admin
hook that we have here and 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 post we're
going to add two brackets and then inside it we shall paste our short code
which is external data. Now if I 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 come and
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 we'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 these 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, you'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 can not equal to, we have
to add, 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 username 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 call back function, and then move it down here.
So we'll start uncommenting it out, if we find that our response has an error,
let us echo out and return that we have an error.
So I'll 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 want to have any issues arising from that. We are
going to do for the first time let us var_dump 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
call. 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 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 this 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 a 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
var_dump this, see when I reload here we have a PHP object that has a number
of items that are being looped through. So we'll now start doing a for
each loop and the path will 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 remove this, so we'll say as for each
results as result, so for each result let us return one object result, and in here
we're going to start picking off the result, 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 we'll get the result ID,
then we'll get the name, come back here change the name, we'll need to get the user
name 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 suite, we have a city and a zip
code. So just add that street, suite and city. So we'll have address street and at
this point we are 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 add a comma also on the suite, on the
suite we add comma, and then after the city we need to add our 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 coma here, so we have that right. So I'll save this, and this will
not just be address it to be a full address, let's stop var_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 as
a widget, I'll move it up here so that it's prominent, and then I'll add our
external shortcode 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 on HTML, now
we're going to add a header 1 or a header 2 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 add shortcode here, when we register our short code tag it actually
passes some attributes inside our callback function here by default. So I'm
going to add atts 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 default, 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 will add an array and say
the first piece of information I want to have is the title, and that title is just
going to be table title right here. So that is our default. Now inside our
atts 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 atts, and then inside the atts
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 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 on to the right tag. So the next thing that we
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 atts for attributes, and then we
are 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 atts title here I realized I made an error here
so I need to make this shortcode atts, which will allow us to add the defaults
that we've added, the attributes and then pass in also the shortcode. So we'll just
delete all of this and then change this into our 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 a user did not add a title attribute
to this shortcode, 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
changed 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 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 liked the video, and subscribe to the channel
if you haven't yet.
