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

No code method

The simplest (and no code) method for creating an HTML table from your API data is to use the wpDataTables plugin. We have an article on how to create tables from API data using wpDataTables.

Code method

If you’d like to code up a simple table yourself, then read on.

This article will show you how to format your API data and display it within a HTML table.
The examples we use in this article are real world examples so you can actually set this up on your own site and test it out. We are using the Quotable API which can be found here.

Add the API

The first step is to add a new API within the Setup page.

Add the endpoint

We are using the ‘quotes’ endpoint which returns a big list of quotes – https://github.com/lukePeavey/quotable#list-quotes

When setting up your endpoint, the main thing to be sure of is that the Results Format setting is set to PHP array data as this will return the data in an array format that can be used easily in our page template.

We have also set the limit to 5 which tells the API to only get us 5 quotes. We have also set the cache time to 60 seconds just to avoid hitting the API too often.

Writing the code

The code to fetch our data and display it in a table is fairly straightforward:

  • Copy the template tag from the endpoint (as shown above)
  • Store the results in the $data variable
  • Loop through the results and put the results into a table
$data = wpgetapi_endpoint( 'quotable', 'quotes', array('debug' => false) );

// prints out our raw data
// delete or comment this out when not required
wpgetapi_pp($data); ?>

<table class="table table-bordered">
    <thead>
        <tr>
            <th scope="col">Author</th>
            <th scope="col">Quote</th>
            <th scope="col">Length</th>
        </tr>
    </thead>
    <tbody>

    <?php 
    // ensure we have the correct data
    if( isset( $data['results'] ) && is_array( $data['results'] ) ) {

        // loop through each item in the results array
        foreach ( $data['results'] as $i => $item ) : ?>
            
            <tr>
                <td><?php esc_html_e( $item['author'] ); ?></td>
                <td><?php esc_html_e( $item['content'] ); ?></td>
                <td><?php esc_html_e( $item['length'] ); ?></td>
            </tr>
            
        <?php endforeach;

        } else { ?>

            <tr>
                <td colspan="4">No quotes were found.</td>
            </tr>

        <?php } ?>

    </tbody>
</table>

Where to put the code

The code snippet can be added in a couple of different ways.

  • Easiest: Use a code snippets plugin
  • Advanced: Create a page template and add the code directly within the template

Using a code snippet plugin

The best snippet plugin we have found is this one – https://wordpress.org/plugins/code-snippets/

This plugin allows you to create a code snippet and then you can insert this snippet into your page as a shortcode, essentially turning any PHP code into a shortcode. We aren’t affiliated with this plugin in any way, but we have tested it and it works great as a way to insert PHP code.

Creating a page template

  1. Create a new page within WordPress called Testing
  2. Create a PHP file using a text editor and name it page-testing.php and copy the code below into this file (note that the code below includes the get_header and get_footer functions which is required for the page template)
  3. Upload this page-testing.php file to your current WordPress theme. It should sit in the root folder of the theme
  4. You should now see a table with the countries when viewing the new Testing page
<?php get_header();

$data = wpgetapi_endpoint( 'quotable', 'quotes', array('debug' => false) );

// prints out our raw data
// delete or comment this out when not required
wpgetapi_pp($data); ?>

<table class="table table-bordered">
    <thead>
        <tr>
            <th scope="col">Author</th>
            <th scope="col">Quote</th>
            <th scope="col">Length</th>
        </tr>
    </thead>
    <tbody>

    <?php 
    // ensure we have the correct data
    if( isset( $data['results'] ) && is_array( $data['results'] ) ) {

        // loop through each item in the results array
        foreach ( $data['results'] as $i => $item ) : ?>
            
            <tr>
                <td><?php esc_html_e( $item['author'] ); ?></td>
                <td><?php esc_html_e( $item['content'] ); ?></td>
                <td><?php esc_html_e( $item['length'] ); ?></td>
            </tr>
            
        <?php endforeach;

        } else { ?>

            <tr>
                <td colspan="4">No quotes were found.</td>
            </tr>

        <?php } ?>

    </tbody>
</table>

<?php get_footer();
On this page
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.