Display Queried External API data on the WordPress Front-end using Shortcodes
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2023/12/1703497851_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: Display Queried External API data on the WordPress Front-end using Shortcodes
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.
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
VERY WELL DONE!!
I know this video was done some time ago.. but I'm wondering if pulling data from API like this is faster than pulling data from the DB (query loop)?
How to add external api data like
: {"data":[{"name":"Adlam","script":"Adlm","family":"African","type":"alphabet","direction":"rtl"},
You are a life saver. After wasting many hours looking for this solution, I bumped into your video, very helpful indeed 👏
Great video! I have a question. If I use a external api (showcase vimeo in thi s contest in order to display all videos from a specific showcase), how can I display a determinate number of videos and integrate a WordPress pagination?…the json result are not posts, If I would want use the Wp_Query, because displaying 20 and more videos in one single page is a Bad Ux.
How can I handle this? Ive just followed this video and used your code and this work, but form my purpose, How I can solve this?
how to add images too?
thank you so much for the video , i want to retrieve data from an external API and display it in a variation dropdown of a variable product after that to post an order to my API . thank you so much
Is it also possible to customize the table with css?
Would you be interested for paid projects? Please share your mail
Your Video Looks Good, and How to add Query Parameters? That means filter faction
Hi there how can I get a hold of you for assistance?
Hello TechiePress! I want to ask, if I use this, can the content be crawled by google as SEO?
after url if i have auth token then how to code that ?
exactly what i needed!! thank you so much 🙂
Is this playlist/video still current for today's up to date wordpress? anyone know?
My man, I had been stuck at this for 2 days. Finally found this tutorial, Thanks.
Very nice content @TechiePress thank you much for this. I have a question, please can you explain how to use a custom PHP file as a template that will render the $html variable you used in your tutorial?
how can i pass another url and consume it on the same code?
How to pass authorization token
my friend great job !!! congratulations !!!!, file in video is not put on github on repo YTTechiePress
/
query-apis
Thanks man!
Thank you so much friend, this helped a lot to learn. one question how do I change this to search by user input keyword?
im using windows 10, where can I edit the code?
the best tutorial, saved lifes!
Excellent tutorial! Thank a lot. This will help so much!