How to Fetch and Display Airtable Data in WordPress Using the Airtable API

Home
Blog
How to Fetch and Display...

TL;DR

Learn how to connect Airtable to WordPress using its official API with no plugins required.
Generate your Airtable Access Token, Base ID, and Table Name to authenticate securely.
Add a custom PHP shortcode in your theme’s functions.php to fetch and display Airtable data dynamically.
Use the shortcode [airtable_contacts] inside the Block Editor (Gutenberg) to render live data on any post or page.
Perfect for developers or creators who want a lightweight, API-based integration without syncing or exporting data manually.

Introduction

Airtable is a flexible, user-friendly database that many creators and teams use to manage structured data from product inventories to contact lists. But what if you want to display that data on your WordPress site automatically?

In this blog, I’ll show you how to connect Airtable to WordPress using its API and display your data dynamically using a shortcode. Whether you’re building a mini CRM, a product table, or an event listing this method gives you full control without syncing or exporting anything manually.

If you’re planning to go beyond basic integrations and build a fully customized, scalable website, partnering with a WordPress Development Company can help you design powerful solutions that seamlessly connect with tools like Airtable.

How WordPress Reads Airtable Data — Step-by-Step Guide

Assuming your Airtable sheet (table + fields) is already set up and filled with data, here’s how you can fetch and display that content inside your WordPress site.

Step 1: Generate Your Airtable Access Token

Go to https://airtable.com/account
Under the “Go to Developer Hub,” click on “Create token” -> “Create New Token”

Give it a name (e.g. “WordPress site”)

Set access to “read” for your base and click on “Create Token”
Copy the token that starts with pat…

Step 2: Get Your Base ID and Table Name

Visit https://airtable.com/api
Select your base

Look at the URL:
https://airtable.com/appXXXXXXXXXXXXXX/api/docs
appXXXXXXXXXXXXXX → This is your Base ID
Your Table Name is shown at https://airtable.com/appXXXXXXXXXXXXXX/ in the tab (usually like “Contacts” or “Tasks”)

Step 3: Add a Custom Shortcode to Your Theme

Open your WordPress theme’s functions.php file (or your child theme’s file if you’re using one).
Paste the following code:

function airtable_contacts_shortcode() {
    $base_id    = 'your_base_id'; // e.g. appXXXXXXXXXXXXXX
    $table_name = 'YourTableName'; // e.g. Contacts
    $token      = 'your_airtable_token'; // starts with pat...

    $url = "https://api.airtable.com/v0/{$base_id}/{$table_name}";
    $args = array(
        'headers' => array(
            'Authorization' => 'Bearer ' . $token,
        )
    );

    $response = wp_remote_get( $url, $args );

    if ( is_wp_error( $response ) ) {
        return 'Unable to fetch data.';
    }

    $body = json_decode( wp_remote_retrieve_body( $response ), true );
    if ( empty( $body['records'] ) ) {
        return 'No records found.';
    }

    // Build HTML table
    $output = '<table><tr>';
    $first_record = $body['records'][0]['fields'];
    foreach ( $first_record as $key => $value ) {
        $output .= '<th>' . esc_html( $key ) . '</th>';
    }
    $output .= '</tr>';

    foreach ( $body['records'] as $record ) {
        $output .= '<tr>';
        foreach ( $first_record as $key => $value ) {
            $output .= '<td>' . esc_html( $record['fields'][ $key ] ?? '' ) . '</td>';
        }
        $output .= '</tr>';
    }

    $output .= '</table>';
    return $output;
}
add_shortcode( 'airtable_contacts', 'airtable_contacts_shortcode' );

Step 4: Use the Shortcode in the Block Editor

Open any post or page
Click the “+” to add a block
Search for “Shortcode”
Add ‘[airtable_contacts]’

Save or Publish the post or page

Below is output:

Conclusion

Connecting Airtable to WordPress might sound technical at first, but with just a few lines of code and your access credentials, you can easily fetch live data from Airtable and display it on any page or post using a simple shortcode.

This method gives you full control over how your content appears. No plugins, no bloat — just a lightweight, API-based integration that works seamlessly with the WordPress block editor.

Whether you’re managing a contact list, showcasing a project tracker, or pulling in dynamic data for your portfolio, this approach makes it easy to bridge Airtable and WordPress in a clean and flexible way. And if you’re looking to build more advanced customizations or automate complex workflows, it’s worth collaborating with experienced WordPress developers who can help you implement secure, scalable integrations tailored to your site’s needs.

FAQs

1. Is it safe to use my Airtable token in WordPress?

Yes, but make sure you never expose the token publicly. Store it securely in your theme’s functions.php or, even better, in wp-config.php if you’re using it across different files.

2. Can I use this without a plugin?

Absolutely. This method is designed to be lightweight and plugin-free. It uses WordPress’s built-in HTTP functions (wp_remote_get) to communicate with Airtable.

3. Can I display only specific columns from Airtable?

Yes, in the PHP code where the table is built, you can manually specify which fields to show. Just modify the loop to include only the desired keys.

4. What if my table has many rows?

By default, Airtable returns a limited number of records (usually 100). You can extend the functionality by using Airtable’s pagination (offset) parameter in your API call to fetch more records.

5. Does this work with the WordPress block editor (Gutenberg)?

Yes. You can insert the shortcode using the “Shortcode” block in Gutenberg, and the data will display perfectly on the front end.

WordPress