Display data on WordPress using Shortcode

Many a times we come through a situation where we need to connect third party APIs to our WordPress site and we need to display the data from the API on our WordPress site. WordPress out of the box doesn’t provide a feature to connect to external APIs and display the data on the frontend dynamically. But wait, we have a solution to overcome your problem.

Custom API for WordPress eases the task to show response from API on WordPress website in real time by getting data from external API and displaying directly on the WordPress site without storing it in your WordPress database. It comes with a thorough setup guide and a easy to use user interface.

We will see how data from an External API can be shown WordPress Frontend using shortcodes with the help of our CUSTOM API for WORDPRESS Plugin. Data is picked from an external third-party server and it is shown in an HTML table element using shortcodes dynamically. Without wasting time, let’s dive right into the usecase:

Suppose you have a WordPress site and you are getting data from an external API which you have to show on WordPress frontend. You can use CUSTOM API for WORDPRESS plugin because it provides a feature to DISPLAY DATA ON WORDPRESS FRONTEND using our Shortcode.

We also provide features to add custom HTML, CSS and JavaScript to style the incoming data according to your website style and choice.

Custom API for WordPress

By miniOrange

Custom API for WordPress plugin allows you to create WordPress APIs / custom endpoints / REST APIs. You can Fetch / Modify / Create / Delete data with an easy-to-use graphical interface.

Know More

Let’s take a look how you can use miniOrange Custom API for WordPress to show incoming data on your WordPress frontend.

Customer Query:

How can I make the data I receive to the frontend, and is it possible to run the API call every time a user loads the page the data is displayed.

Custom API For WordPress

By miniOrange

(11)

 Tested with 5.9.2

Get this plugin

1. Data display on WordPress frontend

• First you need to connect the API to your WordPress site. For a detailed guide, click here.
• Below is the response from the API

• Go to Advanced settings > Post API call actions > Display Data via Shortcode and click the Copy shortcode button:

• Once you have the shortcode, you can use it on your WordPress pages as required:

• If everything is done correctly, you can visit the page and see the output. Below is the output for our API.

• You can also add your custom styling using CSS and JS so that the table matches your website theme. For that go to Advanced settings > Shortcode Settings and add your custom HTML, CSS, and JavaScript.

Congratulations, you have successfully connected an external API to your WordPress site to display data on the WordPress frontend.

2. Advanced Settings

In the Advanced Settings section, you can

• Select Role based access to see the data
• Choose a dependent API to connect APIs with each other.
• Automatic data fetching.
• Store API data in WordPress tables