ThisCalculator

Everyday

Add Airtable to WordPress: 5 Practical Methods

Updated · Standard formula, shown below

Add Airtable to WordPress: 5 Practical Methods

This guide shows you five practical ways to embed Airtable bases, grids, or forms directly into your WordPress site—whether you want to display a public database, let visitors submit entries, or sync data automatically. You’ll learn the strengths and limits of each method, from simple iframe embeds to no-code plugins and REST API integration. No coding experience is required for the first four methods; the fifth assumes basic PHP familiarity.

What You’ll Need

  • A WordPress site (self-hosted or WordPress.com with plugin support) with admin access.
  • An Airtable account (free tier works for basic embeds) and a base you want to display or connect.
  • For the API method: an Airtable personal access token (free) and a way to edit your theme’s functions.php file or use a code snippet plugin.

Step-by-Step

Method 1: Embed an Airtable View with an iframe

  1. Open your Airtable base and select the view (Grid, Gallery, etc.) you want to embed.
  2. Click the “Share� button in the top-right corner.
  3. Toggle on “Share view publicly� to generate a public link.
  4. Copy the embed code from the “Embed this view� section—it will look like an iframe snippet.
  5. In WordPress, edit the page or post where you want the table to appear.
  6. Add a “Custom HTML� block (Gutenberg) or switch to the Text/HTML editor (Classic).
  7. Paste the iframe code and update the page. The view will display and update automatically when you change your Airtable data.

Method 2: Use Airtable’s Official WordPress Plugin

  1. In your WordPress admin, go to Plugins → Add New.
  2. Search for “Airtable� and install the plugin published by Airtable (look for the Airtable logo).
  3. Activate the plugin, then go to Airtable → Settings in your WordPress dashboard.
  4. Connect your Airtable account by clicking “Connect to Airtable� and granting permission.
  5. Create a new page/post and add the Airtable block from the block editor.
  6. Select the base and table you want to display, choose a view, and adjust the display options (such as number of records).
  7. Publish the page. The plugin handles the embed and updates automatically.

Method 3: Embed a Single Record or Form with a Shortcode (Using a Third-Party Plugin)

  1. Install a plugin like “Embed Airtable� or “Airtable Embedder� from the WordPress repository (search “Airtable�).
  2. Activate the plugin and go to its settings page.
  3. Paste your Airtable share URL (from the Share dialog) or your API URL into the plugin’s field.
  4. Copy the shortcode generated by the plugin, e.g., [airtable url="https://airtable.com/..."].
  5. Paste the shortcode into any post, page, or widget area.
  6. Preview the page to confirm the embed loads correctly.

Method 4: Display Airtable Data Using a No-Code Embed Service

  1. Go to a third-party service like Softr, Glide, or a similar no-code tool that offers Airtable integration.
  2. Create a free account and connect your Airtable base.
  3. Build a simple web app or data page using that service, then copy the public URL of your generated page.
  4. In WordPress, add an iframe block or a Custom HTML block and paste that URL as an iframe.
  5. Adjust the iframe height and width to fit your layout. This method is useful when you want custom styling or interactive features beyond a simple table.

Method 5: Pull Airtable Data with the REST API (Custom PHP)

  1. Get your Airtable API key: log in to Airtable, go to your account settings, and create a personal access token with read permissions to your base.
  2. Find your Base ID: in Airtable, go to the API documentation (Help → API documentation) and copy the Base ID from the URL.
  3. In WordPress, install a code snippet plugin (like “Code Snippets�) or edit your child theme’s functions.php.
  4. Add a PHP function that uses wp_remote_get() to fetch data from https://api.airtable.com/v0/{BaseID}/{TableName} with the header Authorization: Bearer YOUR_TOKEN.
  5. Parse the JSON response and loop through the records to output a custom HTML table.
  6. Create a shortcode that calls that function, then use the shortcode on any page.
  7. Add caching (e.g., with transients) to avoid hitting API rate limits.

Common Mistakes

  • Using the wrong share link: Copy the embed code or public view link, not the regular edit link (which requires login).
  • Forgetting to make the view public: If your Airtable base is private, the iframe will show an error or blank box.
  • Ignoring responsive design: A fixed iframe height can cause scrolling or cut-off content on mobile. Use a height of at least 500px and consider a plugin that adds responsive resizing.
  • Storing API keys in plain code: If you hardcode your token in functions.php, it’s visible to anyone with file access. Use environment variables or a constant defined in wp-config.php.
  • Not caching API calls: Fetching Airtable data on every page load slows your site and may hit rate limits.

Tips

  • For public data, always use the “Share view publiclyâ€� option—it’s the simplest and doesn’t require an API token.
  • If you need to embed a form (for data entry), use Airtable’s “Share formâ€� link and embed that URL in an iframe.
  • Use a page builder like Elementor or Gutenberg’s cover block to wrap the iframe in a styled container for better appearance.
  • For the API method, limit the number of records returned using the maxRecords parameter to keep the page fast.
  • Test on a staging site first, especially when using plugins or custom code, to avoid breaking your live site.
  • Keep your Airtable base organized with clear table names and views; this makes embedding and API calls easier.

Troubleshooting

  • Iframe shows “You need accessâ€� or a login prompt: Make sure the view is shared publicly. In Airtable, click Share → enable “Share view publiclyâ€� and copy the new link.
  • Embed is too tall or too short: Adjust the iframe’s height attribute in the HTML. For dynamic content, use a plugin like “Airtable Embedâ€� that auto-resizes, or set a generous height (e.g., 800px) and let the page scroll.
  • Plugin doesn’t appear in the block editor: Some plugins only add a shortcode, not a block. Use a Shortcode block instead.
  • API returns 401 Unauthorized: Your token is invalid or lacks access to the base. Regenerate the token and ensure it has the necessary scopes (read data).
  • API returns 404 Not Found: Double-check your Base ID and table name. The table name is case-sensitive; use the exact name from Airtable (e.g., “Table 1â€�).
  • Data doesn’t update on WordPress: If you used the API method without caching, it should update on each page load. If you used an iframe, it updates automatically. If you used a third-party service, check its sync settings.

Frequently Asked Questions

Do I need a paid Airtable plan to embed views?

No. The free plan allows public sharing of views and forms. Some API features (like writing data) may require a paid plan, but reading data for display works on free.

Can visitors edit the embedded Airtable data?

By default, a shared view is read-only. To let visitors add or edit records, you need to embed a form (via the “Share form� link) or build a custom interface using the API with proper permissions.

Will the embedded table update automatically when I change Airtable?

Yes. Both iframe embeds and the official plugin pull live data from Airtable. Changes you make in Airtable appear on your WordPress site almost immediately.

Which method is best for performance?

The iframe embed is the lightest because it loads content in a separate frame. The API method can be slower if you fetch many records, but you can optimize with caching and pagination.

Can I embed an Airtable base in a WordPress sidebar or footer?

Yes. Use a “Custom HTML� widget or a shortcode in a widget area. For the API method, you can create a shortcode and place it in any widget that supports shortcodes.

Is it safe to expose my Airtable API key in the frontend?

No. Never put your API key in JavaScript or in an iframe URL. Use the PHP method (server-side) so the key stays hidden. For iframes, you don’t need an API key at all.

Related

Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.