Skip to content
  • Why WPGetAPI?
  • Examples
  • Pricing
  • Plugins
    • PRO Plugin
    • API to Posts Plugin
    • OAuth 2.0 Plugin
  • Docs
  • Support
    • Frequently Asked Questions
    • Feature Request
    • Support Ticket
  • account_circle
PRO Plugin
Howdy! How can we help you?
  • Introduction

    • Quick Start
    • Frequently Asked Questions
    • Will this work with my API?
    • Understanding API docs
    • Step by Step Example
  • Setup

    • Setup Page
    • Endpoint Page
    • Parameters - Query String
    • Parameters - Headers
    • Parameters - Body POST
    • Shortcode
    • Template Tag
    • Gutenberg Block
  • Connecting your API

    • API Key in Headers
    • API Key in Query String
    • Authentication & Authorization
  • Output API Data

    • Format API to HTML
    • Format API to HTML Table
    • Format API to Image Gallery
    • Format JSON Data
  • Integrations

    • Send form data to API
    • WPForms to API
    • Gravity Forms to API
    • Contact Form 7 to API
    • WooCommerce to API
    • WooCommerce API Product Sync
    • wpDataTables to API
    • Connect WordPress to OpenAI
    • Connect RapidAPI to WordPress
    • Connect Zoho CRM to WordPress
    • Page Builders (Elementor, DIVI)
    • Formidable Forms to API
    • Elementor Form to API
    • JetFormBuilder to API
    • Fluent Forms to API
    • WS Form to API
    • Ninja Tables to API
    • Easy Digital Downloads(EDD) API Product Sync
    • Ultimate Member Forms to API
  • Tips & Tricks

    • Filters & Action Hooks
    • Code Snippets Plugin
    • Troubleshooting
    • Code Snippets
  • PRO Plugin

    • Installation
    • Actions
    • Tokens
    • Caching
    • Nested data
    • Chaining API calls
    • Dynamic Variables
    • Format API to HTML
    • Call API on user registration
    • Using AJAX to trigger API call
    • Base64 Encoding
    • Licensing
    • Filters & Action Hooks
  • OAuth 2.0 Plugin

    • Installation
    • How it works
    • Grant Type - Client Credentials
    • Grant Type - Authorization Code
    • Licensing
  • API to Posts Plugin

    • Installation
    • Getting Started
    • Multiple Endpoints
    • Mapping Fields
    • Filters & Action Hooks
    • Pagination
This feature is only available in the Pro Plugin.

WPGetAPI makes it incredibly simple to connect your website to any API.

Once you’re connected and your API is returning data, the next step is to display that data in a way that your users can read and that looks nice. Your website is using HTML, so it makes sense that the format of your API data should be in HTML also.

There are 2 ways that you can turn your API data into nice looking HTML.

  1. Free: use the built in WPGetAPI template tag. Requires PHP knowledge.
  2. Paid: use the PRO plugin which adds a format=’html’ attribute to the shortcode.
Note: whichever method you use, knowledge of HTML and CSS will be required to make your data look exactly the way you like.

The problem

JSON data is ugly

API data is usually returned in JSON string format, which is not very pretty at all and probably not how you want to display your API data.

PHP arrays are ugly

Your data may also be returned as PHP array data, which is also not pretty and likely not how you want your API data displayed.

If you know PHP and are comfortable working in theme files, then this data won’t be an issue. But if you don’t know how to work with this data, read on to find out how we can easily format this into a nice HTML format.


Format API data as HTML, easily

The PRO Plugin introduces a new parameter to the [wpgetapi_endpoint] shortcode (and the template tag) that will allow us to display API data as HTML on your page. We will look at the shortcode and see how easy it is.

We simply need to add the ‘format’ attribute to the shortcode and set it to ‘HTML’ as shown below.

[wpgetapi_endpoint api_id='quotable' endpoint_id='random' format='html']

The HTML output

The output will now look something like the below. It is still not perfect, but looks much better and we can now freely style it with some CSS.

When we look at the source code of our new HTML data, this is when we can start to see how this could be used to make things look a bit prettier. If you know CSS, then you can make this look basically any way you want to.

You will notice that CSS classes are automatically created by using the keys as the class names (prefixed with wpgetapi_). The HTML can now be easily styled using CSS.

There are two options to display the required data and hide unnecessary data.

1) We can use the ‘keys’ attribute, as shown in the example below.

[wpgetapi_endpoint api_id='quotable' endpoint_id='random' format='html' keys='{content},{author},{dateAdded}']

// If it is a multidimensional array then separate keys by "|"
[wpgetapi_endpoint api_id='wether' endpoint_id='weather' format="html" debug='false' keys='{location|city},{current_observation|temparature}']

2) Alternatively, we can show the required data by applying CSS. For example, if you want to display only the content, author, and date.

.wpgetapi_html div{
      display:none;
}
.wpgetapi_content, wpgetapi_author, wpgetapi_dateAdded{
      display:block;
}

Shortcode attributes

There are 12 additional HTML shortcode attributes that get added with the PRO Plugin. These attributes allow you to:

  1. Set the HTML tags that are generated – can be div, li or span tags
  2. Include labels on each item – takes the key and turns this into a label, wrapped in its own tag ie. Author: Will Rogers
  3. Select any field that has a URL
  4. Use the URL to link another field – such as adding a link to a Title
  5. Image attribute that let you turn an image URL into an actual image, rather than just displaying the URL
  6. Prepend the image URL – some API’s will return relative image URLs so this attribute allows us to prepend a full URL

Let’s look in detail at how each of these attributes works and how we can apply them to our shortcode.

html_tag

The html_tag attribute can take in 3 different options which will affect the output of our HTML. The 3 options available are div, li and span. Here is the result of setting this to html_tag='li'

html_labels

Setting the html_labels attribute to true html_labels='true' will add the keys as labels.

Each label will be wrapped within a span tag and will be output as shown in the image below. This option will also apply some formatting to the keys so that camelCaseKeys and also keys_with_underscores or keys-with-dashes will be formatted so that they look more like this: Correctly Formatted

html_url

If your API has a URL that you want to use as a link, you can set the html_url attribute to the key that contains the URL. For example if you have a URL value on the [Url] key, you would set it like: html_url='Url'

We then need to use the html_to_link attribute which selects the key/value pair that we want to add the link to.

html_to_link

If you have used the html_url attribute above, you now need an item to apply the link to. Consider that your API has a key called Title, you would simply add html_to_link='Title' which will now apply the link to the Title. So that when a user clicks on the Title they will be taken to the URL that you set within the html_url attribute.

[wpgetapi_endpoint api_id='quotable' endpoint_id='random' format='html' html_tag='div' html_labels='false' html_url='Url' html_to_link='Title']

img_key

To turn an image URL into an actual image, add the following attribute: img_key='MyImageUrl' with the key of ‘MyImageUrl’ being the key that contains your image URL. Only adding 1 image is supported.

img_prepend

To prepend the image URL, add the following attribute: img_prepend='https://someurl/images/' with ‘https://someurl/images/’ being the text that you want to prepend to the image URL.

img_link

To add a URL to an image, add the following attribute: img_link='websiteUrl' with the key of ‘websiteUrl’ being the key that contains the URL that you want the image link to be.

On this page

Unlock amazing features with the PRO Plugin

The PRO Plugin takes your API integrations to the next level.

  View Pro Plugin
contact_support

Still not sure?

APIs can be daunting and sometimes downright confusing.

But we are here to help! Our support is amazing and we can assist you with any setup required and ensure your API integrations are a success!

Ask Us Anything

Connect your WordPress website to external APIs without writing a single line of code. Send data from WordPress to your API or display data from your API within WordPress.

Support

  • Documentation
  • Support Ticket
  • Refund Policy
  • Contact Us
  • About Us
  • Affiliates

Articles

  • Quick Start Guide
  • WooCommerce Orders to API
  • WooCommerce API Products Sync
  • Contact Form 7 to API
  • WPForms to API
  • Gravity Forms to API
  • WordPress to RapidAPI

WordPress API Plugins

  • Free WPGetAPI Plugin
  • PRO Plugin
  • API to Posts Plugin Plugin
  • OAuth 2.0 Authorization Plugin

© 2025 WPGetAPI. All Rights Reserved.

"*" indicates required fields

Name*
This field is for validation purposes and should be left unchanged.