Webflow sync, pageviews & more.
NEW

What is the process for connecting a Webflow project to an existing self-hosted WordPress site and publishing a page using the Webflow Pages plugin?

TL;DR
  • Install the Webflow Pages plugin on your WordPress site and activate it.
  • Generate and copy your Webflow API token, then connect your Webflow account via the plugin.
  • Select a Webflow project and static page, assign it a WordPress URL slug, and click publish to display it on your site.
  • Re-publish and re-sync to update pages when changes are made in Webflow.

To use Webflow to design pages and publish them to an existing self-hosted WordPress site, follow these steps using the Webflow Pages plugin.

1. Install the Webflow Pages Plugin on WordPress

  • Log in to your self-hosted WordPress admin panel.
  • Go to Plugins > Add New, then search for Webflow Pages.
  • Click Install, then Activate the plugin.
  • A new Webflow menu item will appear in the WordPress dashboard sidebar.

2. Get Your Webflow API Key

  • In Webflow, go to Account Settings > Integrations.
  • Scroll down to API Access, then click Generate New API Token (or use an existing one if applicable).
  • Copy the Personal Access Token.

3. Connect WordPress to Your Webflow Project

  • In the WordPress dashboard, go to the Webflow menu.
  • Paste the API Token you got from Webflow.
  • Click Connect Account.
  • After connection, select your Webflow site from the dropdown list.

4. Select and Publish a Webflow Page

  • After selecting your Webflow site, the plugin will display a list of your static pages from that project.
  • Choose the Webflow page you want to publish in WordPress.
  • Assign a WordPress permalink URL slug (e.g., /about, /promo-page).
  • Click Publish Page.

The selected Webflow page is fetched from your Webflow project and served at the assigned URL within your WordPress site.

5. Manage or Update the Page

  • If you make changes to the page in Webflow, re-publish the Webflow project normally.
  • Then in the WordPress plugin settings, refresh or re-sync to pull in the updated content.
  • You can update or remove the integration for any published page from the plugin dashboard.

Summary

To publish Webflow pages to a self-hosted WordPress site, install the Webflow Pages plugin, connect your Webflow account via an API token, choose the target Webflow project and page, and set a WordPress URL path. The plugin fetches and displays the Webflow page as part of your WordPress site.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I hide the scrollbar line that appears on my Webflow site when I have a horizontal scroll with Auto on mobile?
How can I display a cms collection of articles on a single page in Webflow and have the subsequent article displayed on the same page when clicked?
How can I enlarge the horizontal outline of a divider in Webflow when hovered over?
What should I do if I am having trouble updating my case studies in Webflow using a template that is designed with CMS?
How can Webflow users set up paginated collections using the jquery-pjax library to create a smoother browsing experience?
Can Webflow be used to redo a 200-page ecommerce site, even if most sites built with Webflow are smaller and lack template features?
What is the most effective method for SEO practitioners to obtain sitelinks in Google using Webflow?
How can I center text inside a block in Webflow? I find the tool difficult to understand and not intuitive.
What are the required fields and completion URL in Webflow for enabling Google Analytics e-commerce sales tracking with Tag Manager?
Can I automatically change the color of a Webflow template to match the colors of my app without manually updating each element? Also, how can I remove "www" from my website's URL? Lastly, is it possible to change the color of the small circles on the home page of my Webflow website?
How can I fix the bug in Webflow where a CMS content item is missing from a product accordion?
Need help with custom code, embed code, or other integrations in Webflow? Get assistance by sharing your project's Read-Only link, live site's Published link, third-party plugin link, screenshots or videos, a description, and a working example of what you're trying to achieve. Don't forget to include any browser console errors. Tag forum users by using the @ symbol followed by their username.
How can I troubleshoot the issue of 4 incorrect pages found in the sitemap.xml of my Webflow project, which is being reported by SEMRush?
Is it possible to highlight the link to the current page in the Navbar/Menu in Webflow?
What could be causing a pop-up form to be cropped at the top on iPhones and Safari, despite working properly on Chrome Desktop and Mobile?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I dynamically redirect to a CMS created after form submission in Webflow?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?