Connect to API's using WordPress, without writing code!

A quick tutorial on how to connect your WordPress website to an API using the WPGetAPI plugin. The tutorial shows you how easy it is to connect an API to WordPress, without writing any code.

==== Transcript ====

In this video we will show you how to connect to an API and how to display the data using both the shortcode and the template tag.

We will connect to the Quotable API which will return us a random quote that we can display on our website.

Let's copy the API's URL and head back to our setup screen to add the details of the API. We will name it 'quotable' and will give it a unique ID of 'quotable' also. We can call it anything, but quotable makes sense.

Now add the base url that we copied from the quotable page, ensuring that we have the https added there as well.

Now we just hit the save button and a new tab will be created for the Quotable API.

This new tab is where we can add all of the details for the endpoints that we want to use. 

So let's go back and have a look at the quotable website and get the details of the endpoint that we want. We want a random quote, so this looks good. Simply copy the endpoint and we can also see next to it the word get. This means that we will need to use the get method.

Back in our endpoint screen, paste in the endpoint and add a unique ID which we will call random. 

We leave the method as GET, as this is what it said on the quotable page and we will leave the results format as JSON string for this example

The other fields are not required for this simple API, so we can save the endpoint and it's as easy as that.

With the endpoint settings saved, we can run a quick test using the 'test endpoint' button. It will take a couple of seconds to connect to the endpoint and then it returns whatever data the API sends us, which should be our random quote. 

The data looks strange as we have set it to JSON string format, but that is exactly what the API returns, so we will just leave it for now and show you how to add the shortcode.

At the top of the endpoint you will see the template tag and the shortcode. Simply highlight the shortcode and copy this.

Now we will add a new page. Just name it test API. Paste in our shortcode. Looks good. Now publish the page.

Opening the test page we should see a random quote in JSON format. There it is, a random quote from doctor seuss as easy as that.

Now let's look at using the template tag but we will get rid of the ugly JSON string format.

So we will head back to the endpoint settings screen and the first thing we want to do is change the results format to php array data. Hit save and then we will copy the template tag.

To use the template tag without modifying our theme files, we have installed the code snippets plugin which allows us to run code anywhere easily.

So let's add a new snippet.

Now hit the content tab and just add a title for the snippet.

Now we need to write a little code.

Start with an opening PHP tag and then we'll paste in our template tag.

We want to store our returned data in a variable so we add a variable named data. Easy so far.

Next, this little function will simply output the data variable so we can test if it works or not. Add the closing PHP tag and we hit save.

This gives us a shortcode that will hopefully now output the data from the endpoint.

Copy this shortcode and we will go and add another page for this one.

We'll name it test snippet and then paste in our shortcode.

We hit publish and then view the page.

As you can see, the data looks very similar and all messy again. But this is array data and we can work with this more easily now. We can see a key in there named content so lets go ahead and output just the data from the content key.

We'll get rid of this function and we will echo our content key.

Let's just check we have this right.

Yep, looks good.

We hit save on the snippet and we go back and reload the page.

Success.

We have successfully output the content key of the API.

Lets go a little further and we will add a break tag and we will follow this with echoing the author of the quote as well.

Hit save again.

Now back to the page and reload.

We have a new random quote with the author displayed as well.

And that is it. 2 simple methods to connect to an API and display some data.

[ThomasBui]

It's a privilege to meet you all. I hope your families experience excellent health, prosperity, and plenty of good fortune.

[alcantaraallan]

More videos and tutorials like this please. thank you

[womio.travel]

The title says "without writing code" but I need to 🤔

[jameskhouri]

Hi I notice you have the base URL for ATDW stored, do you have any demo information for connecting to this API? I am currently working with this API and am experiencing a few difficulties. Thanks

[Rodkidesings]

I follow these steps. but when I use the echo to display or output content it goes blank without data.. any help?

[keywordniches]

you have a video if you want to do this for a payment gateway?it needs to check if the payment is done.

[burner]

Thanks for the video. Would love to see more videos like this.

[FeelingLike]

I'm using LocalWP and it gives me an error when I try to echo 'content'. Any idea why guys ?
The website is not hosted, just a safe environment to create the basics and try new things, so i wonder if it's because of that

[galactic_tales]

I did the same steps . everything was working fine but at the end when I give the command "echo $data['content']; it gives no output on the screen. if i give echo '<br>', It shows one line brake only. Anyone can explain please???

[AnkitTrickerET]

shortcode option not showing in snippet now

[AlexisLuigi]

Hello, thanks for the video but, i have a problem, i capied exactly what u did and when i click on test button, nothing happens (i mean i dont have any error message but i dont have any result to) someone of u have a solution ?

[getitleslie]

How to apply your plugin to contact From? I want to send data submit on my landingpage to another website:
1. My landing page with submit form
2. Adcombo network have already API

[ebdfkcu]

Integrate the Coupomated coupon Rest API on your website, app or any custom platform.

[BestQuotableQuest]

hi, which plugin do you use? It sound good.

[eddier.]

Hi, thanks for the video. I've been trying to make this work for a while, now I copied exactly what you did and I keep get the warning: array to string conversion in the code snippets plugin. Any thoughts?

[cerexho]

Hello! this solution looks good, but i have a question, does this plug in hide the api key on you browser?

[hurbangash]

how to integrate it into wordpress widgets?

[truthseeker]

For some reason I put that shortcode in the Elemntor Short code widget and getting all of the raw code string...Hmm

[campusconnecttv]

Will this work for any kind of api integration? Like payments integration and the likes

[ocaradosfiltrosoficial]

How do I make it so that when I register a user on Wordpress, they consult an API and make a comparison, if the fields are ok? If he is, let him register, if not, he won't let him!