WordPress Integration with Webflow Pages Extension

Build pages visually with the power of code in Webflow, then serve them right on your WordPress site.

Note: The existing version of this extension is no longer being supported. It is accessible only to users who had downloaded it previously. Moreover, our support team cannot offer direct assistance for troubleshooting the extension, as it is outside the scope of our support policy.

Looking to operate your website on WordPress but prefer designing in Webflow? You have the option to utilize Webflow’s WordPress extension to visually create your site layout in Webflow and then display one or more of those pages directly on your WordPress website.

How this simplifies your work:

  • Full control over design, without coding. Avoid diving into a customized WordPress development project to alter a theme — simply craft your pages (or your entire site) visually in Webflow, without compromising your distinct design. Discover more about designing in Webflow versus WordPress.
  • Rapid creation of new pages. Need to swiftly create a promotional landing page or append something to an existing WordPress site? Design it in Webflow, integrate it into your WordPress site, and be assured that you don’t have to piece together a tailored page in WordPress.
  • Efficient page updates. After deploying your Webflow pages on your WordPress site, applying updates or adding new segments can be done in Webflow, followed by a seamless live publishing with just one click.

In this tutorial, you’ll understand:

  1. How to fetch and enable the extension
  2. How to produce and adjust your API key
  3. How to arrange your pages configuration
  4. Frequently asked questions and tips for troubleshooting

How to fetch and enable the extension

To commence working with theWebflow Pages extension, download and install it from the WordPress Plugin Directory.

Access the Plugin menu in your WordPress admin panel and locate “Webflow Pages” using the search feature on the top right corner.

The Webflow Pages plugin appears in the WordPress plugin menu when “webflow” is entered in the search bar.

Locate the Webflow Pages extension card and click Install now.

Then proceed to click on Activate.

Upon completion of activation, you will spot the Webflow Pages Extension on the left sidebar. Click on the “Welcome” link. Here, you’ll discover a brief overview and some useful hyperlinks.

Note: The Webflow Pages extension for WordPress is not compatible with Webflow Ecommerce.
The Webflow Pages extension overview page provides links to a how-to guide and extension settings.

Generating and Configuring Your API key

To commence working with the extension, head to the Settings section.

The extension necessitates your Webflow API key (sometimes referred to as an “API token” or “access token”). To retrieve your Webflow API token, go to Site settings > Apps & integrations tab > API access and click on Generate legacy API token. Hit Copy to copy the token to your clipboard.

Note: You must utilize a legacy API token to use the Webflow Pages extension for WordPress.

Note: It’s crucial to store your API token securely. The API token is treated as sensitive personal information and should be handled like a password. After initial creation, it won’t be viewable in your Dashboard again. If you suspect your API token has been compromised, go to Site settings > Apps & integrations tab > API access, click on Generate legacy API token to create a new token, and replace the compromised token in any third-party connections.

Next, publish your site and return to the WordPress admin panel. Paste your API token and click on Add Webflow API key.

Configuring Your Pages Setup

You will be directed to the extension’s Pages area. Here, you must choose the Webflow-created page instead of a WordPress page (selecting the WordPress Path for your website). You are free to integrate as many pages as desired, with no restrictions. 

If you have Webflow Collection pages, they will be visible in the adjacent section on this page. You can also add them to your WordPress site.

Advanced settings from the Settings menu can be managed to control how your site loads your Webflow Pages. For the most part, there should be no need to interfere with them. You have the choice to:

  • Select the cache duration (specify how long your site caches your Webflow pages)
  • Disable cache (erase your WordPress site caches which can assist in debugging)
  • Preload static page cache (helping pages load quicker)
  • Disconnect your Webflow site by selecting Reset to include a new site

A cover of your Webflow site will be shown on the right side.

Commonly Asked Questions and Problem-solving Strategies 

How can I eliminate the Webflow badge? 

To remove the Webflow badge on published sites, a paid Site plan or Growth or Enterprise Workspace is required. On Growth or Enterprise Workspaces, the Webflow badge can be hidden when publishing to the Webflow staging subdomain but not when attempting to use the Webflow staging subdomain for websites outside of Webflow (such as a WordPress website).

Using the Webflow staging subdomain (e.g., yoursite.webflow.io) in the Pages plugin will cause the Webflow badge to appear on your site, even if Display Made in Webflow badge is switched “off” in Site settings. This behavior is intentional.

To remove the Webflow badge from your site while utilizing the Pages plugin, a site plan must be purchased, a custom domain or subdomain added to your site, and that custom domain used in your plugin setup.

Why is my API key failing? 

Ensure that the WordPress plugin has been updated to the most recent version and that you have unpublished and republished your Webflow site. Then, create a new legacy API key in Site settings > Apps & integrations tab > API access and utilize the new API key in WordPress. Make sure that you have generated a legacy API key.

If problems persist with the Webflow Pages plugin for WordPress, kindly reach out to our customer support team

Ewan Mak
Latest posts by Ewan Mak (see all)