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

Introduction

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.

Content

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 we'll 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 out of 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 end point 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 in 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 Dr 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 return data in a variable.

So we add a variable name, 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 short code 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 their named content.

So let's 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.

Let's 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 two simple methods to connect to an API and display some data be sure to check out our documentation for more in-depth, tutorials and info on how to format data thanks for watching.