Display data on WordPress using Shortcode.

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.


display data on wordpress using shortcode

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.

display data on wordpress using shortcode 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.

Download And Installation

  • You will require the Enterprise version of Custom API for WordPress plugin.
  • You will need an account with miniOrange.
  • You will also be needed to login to WordPress as administrator.
  • Login to WordPress as administrator.
  • Upload and activate the Enterprise version of Custom API for WordPress. You will see the following plugin dashboard.
  • display data on wordpress using shortcode -
  • Go to Connect to External API tab. Fill the required API details and Click on Save button. This will the save the configured external API and you can Test the connection by clicking the Execute button.
  • display data on wordpress using shortcode
  • If the connection is successful, you should see the the pop-up containing response table which wll show your API response. (Please make sure your browser pop-ups are enabled).
  • display data on wordpress using shortcode
  • To display data on WordPress frontend, close the pop-up and go to Saved External APIs tab and click on Edit button.
  • display data on wordpress using shortcode
  • Click on Advance Setting button.
  • display data on wordpress using shortcode
  • You will see the following screen where you can write your own HTML and CSS and JavaScript.
  • display data on wordpress using shortcode
  • Reference Key means where is the data located inside the API response which we can see from Step 5 (check screenshot of Step 5). We just need to replace the “.” with “->”. Also, enclose the variables in ## as you can see in the Step 8. Select the Looped option if the data is repeating or else Select Fixed if data is not repetitive.
  • After completing this step, you can save the configuration and go to any desired page and put the short code as following: [mo_custom_api_shortcode api="test"] where test is the name of Configured API. You need to change the API name as per what you have configured in the plugin
  • If everything is done correctly, you can visit the page and see the output. Below is the output for our test API.
  • display data on wordpress using shortcode

Congratulations, You have successfully configured Custom API for WordPress to connect to External API and display data on WordPress frontend.

Hello there!

Need Help? We are right here!

support
Contact miniOrange Support
success

Thanks for your inquiry.

If you dont hear from us within 24 hours, please feel free to send a follow up email to info@xecurify.com