Up next in 10
How To Connect Api With WordPress
2K views
Apr 17, 2024
"Unlock the power of API integration with WordPress in this comprehensive tutorial. Learn step-by-step how to seamlessly connect APIs to your WordPress website, enhancing its functionality and expanding its capabilities. From authentication to data retrieval and display, discover the essential techniques and plugins to effortlessly integrate APIs into your WordPress environment. Whether you're looking to pull in data from external sources, automate processes, or enhance user experiences, this tutorial provides the guidance you need to leverage the full potential of API integration with WordPress."
View Video Transcript
0:00
How to Connect API with WordPress
0:03
Hey guys, welcome back to the YouTube channel. Today I will be showing you how you can connect any kind of API to your WordPress platform or website
0:13
So let's get into it. Now to connect any kind of open API that you have
0:20
first off you actually have to go on ahead and install a plugin
0:24
Now this is a free plugin, so all you have to do is click on plugins on the bottom
0:29
left. Once you do that, click on Add New and just search for WP Get API. So just search for this and this is the
0:39
extension or plugin that you're going to use. Just click on Install Now. Once you click on Install
0:45
Now, just click on Activate and now you will be able to see it in your install plugins. So you can
0:52
just click on API Setup and now you will see the API on the left side of your toolbar. So once you have your
0:59
plugin added, you can start by adding your plugin to your WordPress site. Now, the first thing that you want to do is name your plugin
1:08
So the name of the API that you're adding, let's say I'm just adding codes. Then you have the unique ID
1:15
So this is something to make sure that you are able to link it properly like this
1:21
Now, after that, you have to enter the URL. So what the base URL basically means is that it is going to be the URL of your
1:29
So you guys can see this is like our little, you know, platform or this is the platform I'm getting my random API from
1:37
There are multiple different options you can choose from. We have search authors. We have response. You know, we have multiple different search codes. We have random codes. I'm going to go add random code. So I'm just going to find that over here
1:51
So get random code So I just going to copy this just like that And then I going to go back into WordPress Click on this and click on And click on add new API Now once your API has been added so you just want to move it like this
2:06
And once you have added your API, we're just going to make sure it is added properly
2:12
So just going back to our API page, I'm just going to copy this API server link
2:18
and then we're going to go back into WordPress and we can just add it as it is
2:23
So I've just copied that and added it over here. Now you're going to click on save
2:28
Once you click on save, you will see this on the top. You will be able to see your code or the API name that you entered
2:35
So once you can see your API name, you have the endpoint
2:39
So how do you actually want your entire API to appear on your show
2:46
So now what you have to do is you have to add the base URL of the API
2:52
and now we're going to go back into our API section and you have multiple different API references
2:58
so I want to add the random code so we have this now this is our endpoint screen and we want to
3:06
start adding our unique names or you know all the information so first off we're going to copy
3:11
the unique name or just add it like so so this is going to be unique to whatever you want it
3:18
Now after that you have the endpoint and this says the get method
3:22
So you have to make sure that according to what it says on your API website that you get it from the same method
3:29
So you are going to go on ahead and copy the endpoint and then you can paste it over here
3:37
Now after that you will be able to also see a response string
3:41
But now the other fields like you know the cache team the query string these are not required for the get method
3:47
Now what you're going to do is you can just leave, you know, all of these items as they are
3:53
Just make sure you adding the correct endpoints from the API website URL that you are copying from So now what you want to do is once you have completed the information you want to click on save Now it will give you a endpoint and it will give you a base
4:10
URL and the shortcode and your data might actually look very odd and you actually have to go on ahead
4:16
and you can use the testing endpoint method to test your endpoint as well. Now I'm just going to click
4:24
on test endpoint and now you guys will be able to see your data out
4:28
So our data output might look super weird to you right now because we have it set to JSON string format
4:36
But that is exactly what the API returns. So for now, you just leave it as it is and you can just go on up and copy your shortcode
4:45
So we're just going to copy our shortcode from over here. And now at the top of the endpoint, you will see a template tag and a short code
4:53
So you have, you know, multiple different result format. You can choose PHP but that depends on the kind of API that you have
5:01
But you want to go back into your endpoint settings and you want to change it to the PHP array data
5:10
And without modifying the rest of your theme files, you just want to go on ahead and add endpoint or save it
5:17
And then you want to click on test endpoint. And now your data have been returned from the API and this is what's going to look like now
5:27
all children and artists the problem is how we remain an artist once he grows up so now you can see that
5:33
our output is uh looking a lot better now we can just click on our site and enter our shortcode over there
5:41
so that's like a very easy way to do it so i have copied the short code previously and i'm going to go
5:47
into my pages i'm going to click on add new page and i can click on block on the right side of my
5:54
screen and I can just on the top left I'm going to click on over here then from here I'm
5:59
going to search for short code so you can enter your shortcode block over here and then you going to to paste the API shortcode block and you can click on publish and click on publishing like this you can click
6:12
on view page and we are going to change this back to jason string because our result format is not
6:18
being able to currently process our phtra data set so i'm going to go back into my setup go into
6:26
codes and change it back into JSON string. Click on Save. And now I can go back into my pages, like this
6:35
So once I'm in pages, I can click on view. And now you can obviously edit your short code and edit the appearance to do that
6:45
You have to get rid of the function and you will have to echo your content key
6:51
And that can be a little difficult, but this is array data and you can
6:56
work with it a lot easier now and you can just go on ahead and successfully have your output presented
7:04
to your WordPress website. So it can seem a little complicated at first but it's really not that
7:10
difficult once you have added your API and you have a code added you can go ahead and go into
7:17
codes and once you do that you can also encode the body so you can click on JSON encode
7:23
click on save and then we can click on test endpoint and see what our data output is currently looking like
7:31
and now you can even click on documentation to get further help in how you want to format your specific API
7:38
depending on the type of API you're going to have to um you know change it differently depending on the
7:44
API that you're copying from so i hope you guys found this video helpful and you are now able to
7:51
get started with connecting your own API with your WordPress site. Make sure to leave a like and subscribe to our YouTube channel
7:58
And if you have any questions or queries, leave those in the comment box down below
8:03
And I will catch you guys in the next video
#Programming
#Web Design & Development