Webflow Pages WordPress plugin

Need to run your site on WordPress, but prefer to build your sites in Webflow? Fear not: now you can use Webflow’s WordPress plugin to build your site visually in Webflow, then serve one or more of those pages directly on your WordPress site.

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
Webflow Pages WordPress plugin

Overview

Need to run your site on WordPress, but prefer to build your sites in Webflow? Fear not: now you can use Webflow’s WordPress plugin to build your site visually in Webflow, then serve one or more of those pages directly on your WordPress site.

How this helps you

How this makes your life easier:

  • Complete design control, without code. No need to plunge into a custom WordPress development project to modify a theme — simply build your pages (or your entire site) visually in Webflow, without sacrificing on your unique design. (More about building in Webflow vs. WordPress).
  • Build new pages faster. Need to spin up a promotional landing page or add something on top of an existing WordPress site? Build it in Webflow, serve it on your WordPress site, and rest easy knowing you don’t have to hack together a custom page in WordPress.
  • Update pages faster. Once you’ve got your Webflow pages up on your WordPress site, pushing updates or adding new sections can be done in Webflow, then published live in a click.

How it works

Here’s a basic overview of how you use this plugin to serve Webflow pages on your site:

  1. Download and activate this plugin
  2. Paste your Webflow project’s API key into the plugin settings
  3. Define which Webflow pages you want to serve on your WordPress pages

For a closer look at each step, check out the detailed instructions below.

Step 1: Download and activate plugin

To start working with the Webflow Pages Plugin you have to download and install it from the WordPress Plugin Directory.

Click on the Plugin Menu on your WordPress admin panel and search for “Webflow Pages” on the top right search bar.

You will find the Webflow plugin card. Click on the “Install now” button.



Then click on Activate.

Once the activation is complete, you will find the Webflow Pages Plugin on the left sidebar. Click on the “Welcome” link. In this page you’ll find a quick overview and some utility links.


Step 2: Paste Webflow project API key

To start working with the plugin go to the Settings menu.

The plugin requires your Webflow API Key website. To find them go to your Webflow Dashboard and click on “Project Setting → Integrations”.

Then click on “Generate new API Token”. Click on the “Copy” button.

Don’t forget to publish your Webflow website.

Jump back to the WordPress admin panel and paste the API Token you’ve copied before. Click on the “Add Webflow API Key” button.

Step 3: Configure pages setup

You’ll be redirected to the Plugin Pages section. From here you only have to select the made-in-Webflow page in place of a WordPress page (choosing the WordPress Path of your website). You can add all the pages you want, without any limit. If you have Webflow Collection pages they will appear on the right section of this page. You can add them to your WordPress site too.

From the settings menu you can manage some advanced settings to control how your site loads your Webflow Pages. From the most part you shouldn’t need to mess with them. You can:

  1. Choose the cache duration (define how long your site caches your Webflow pages);
  2. Invalidate cache (delete your WordPress site caches which can be helpful with debugging);
  3. Preload static page cache (that helps pages load faster)
  4. Disconnect your Webflow site by clicking on the Reset button to add a new project.

On the right you’ll see a cover of your Webflow project.

Browser support

Can I Use ? Data on support for the feature across the major browsers from caniuse.com.

Was this helpful?
OR

Thanks for the feedback! If you can, please add additional feedback below.

Oops! Something went wrong while submitting the form

Thank you! Your feedback has been received!

Oops! Something went wrong while submitting the form