How to display data coming from an API on the WordPress frontend

Introduction

If you’re a developer looking to show data from an API on the frontend of your WordPress site, you’ve come to the right place. In this blog post, I’ll be providing you with a step-by-step guide to help you achieve just that.

Using an API for User Details

Firstly, we’ll be using an API that contains user details. You can find the complete code for this script on our website, as well as a video tutorial link to guide you through the process. Once you have the code, we’ll move onto creating a shortcode.

Creating a shortcode

A shortcode is a simple way to insert custom code into WordPress pages and posts without having to write HTML or CSS. We’ll be creating a shortcode that can be used to fetch data from API and we will show in form of table on the WordPress frontend.

This will be the output of this tutorial.

We will use this API:

https://jsonplaceholder.typicode.com/users

Step-By-Step Guide to Display API Data on WordPress Frontend

We will create a script in function.php.

Step 1: Firstly, we will use the function add_shortcode(‘api-data’,’api_calling’);

This function add_shortcode is used to add a shortcode, and it will take two parameters. The first is the name of the shortcode, and the second is the name of the function that will be used for API calls.

Step 2: Secondly, We will create a function called “api_calling.” Here we will make a call to the API. Here we will use the GET method for an HTTP request.

We will use the wp_remote_get() method to perform an HTTP request. This method will accept two parameters: one is the API’s url, and the other is an array of arguments.

Then we will get a response and check for errors with the help of get_error_message().

If there is an error, it will be displayed. Otherwise, we will proceed.

Then we will pass this response to a function

wp_remote_retrieve_body($response)

This method will retrieve the body of the response, which we will decode with the help of json_decode(wp_remote_retrieve_body($response)) and store in a variable called $result.

Step 3: Next, we will create an HTML table, which we will display on the front end. First, we will create a static row like below.

Step 4: Then we will use a foreach loop to display multiple rows with data below this row

Step 5: In last, we will return this $html.

Step 6: You can use this shortcode, ‘api-data’, to display data on the frontend.

And finally this will be the output

You Can Find Script Here

We have also prepared a YouTube tutorial. You can follow that tutorial if you still have any doubt.

In conclusion, displaying data from an API on your WordPress site may seem daunting, but with the right tools and guidance, it can be a simple process. By following this step-by-step guide and using the provided code, you’ll be able to easily display data from any API on your WordPress frontend.

I hope this WordPress frontend tutorial is helpful for you. If you need any help with WordPress development, reach out to me. Also, if you have any project ideas, Get a free consultation with me!