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 from the WordPress admin dashboard, activate it, and obtain your Webflow Site ID from the Webflow project settings.
  • Connect Webflow with WordPress by entering the Site ID in the Webflow Pages plugin settings, and publish a page from Webflow by assigning it to a WordPress URL path through the plugin.

To connect a Webflow project to your existing self-hosted WordPress site and publish a page using the Webflow Pages plugin, follow these steps:

​

1. Install the Webflow Pages Plugin

  • Go to your WordPress admin dashboard.
  • Navigate to Plugins > Add New.
  • Search for "Webflow Pages" in the plugin search bar.
  • Click Install Now next to the Webflow Pages plugin.
  • Once installed, activate the plugin.

​

2. Obtain Your Webflow Site ID

  • Go to your Webflow project dashboard.
  • Click on Settings for the specific project you want to connect.
  • Navigate to the Integrations tab.
  • Find the Webflow Pages Plugin section, and note the Site ID provided.

​

3. Connect Webflow with WordPress

  • Return to your WordPress admin dashboard.
  • Navigate to Webflow Pages plugin settings.
  • Enter the Webflow Site ID obtained from your Webflow project.
  • Save the settings to establish the connection.

​

4. Publish a Page from Webflow to WordPress

  • Go to your Webflow Designer.
  • Create or select the page you want to publish on your WordPress site.
  • Ensure the page is set up correctly with a name and configured settings.
  • In the Webflow Designer, publish the project to ensure the most recent changes are live.

​

5. Add the Webflow Page to WordPress

  • Return to WordPress and navigate to Webflow Pages plugin settings.
  • Select Add New Page and choose the Webflow page you want to include.
  • Assign the Webflow page to a specific WordPress URL path.
  • Save the settings to finalize the addition.

​

Summary

By installing the Webflow Pages plugin, connecting it with your site's Webflow Site ID, and publishing pages from Webflow, you can integrate Webflow content into your WordPress site seamlessly. Be sure to keep both platforms updated for best performance.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I embed a custom Snazzy Maps map into my Webflow website if the map is not appearing and I am receiving a "Oops! Something went wrong" error message?
How can I add the scroll bounce effect to my Webflow website?
What is the best way to add Schema to clients' websites using Webflow, without having to export the files and manually add them to the code each time there is an update to the website?
Is there an option to zoom in and out for an overview of a design in Webflow, as well as the ability to adjust grid overlay and utilize guides in the design process?
How can I create a smooth scroll Back to Top Button in Webflow for long pages or for when I want to add a modern feature that only appears once the visitor has scrolled down a bit? Can you provide an example?
How can I install the Webflow API package using NPM or YARN in a Node.js environment?
How can I change the hover color of a button in Webflow's Slate design? I've already updated the basic color to green, but it still shows orange on hover.
How can I add a meta noindex to unfinished CMS pages in Webflow?
How can I create an e-learning website using Webflow and integrate badges upon course completion like I did with WordPress? Any insight would be appreciated.
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 create shareable links for the pop-ups I created on Webflow, so that clicking on the links will open the pop-ups directly, without the need to click on the buttons?
Will Webflow still support the use of the <code>&lt;meta name="keywords" /&gt;</code> tag for search engine rankings?
Is it safe to store sensitive data on Webflow's CMS?
Why am I experiencing issues sending a form with file uploads, custom code for date pickers, and countries on Webflow? I was able to send it once but now I'm getting an error message stating "Access to XMLHttpRequest at '' from origin '' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."
How can I copy a perfectly designed section from one page to another in Webflow?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
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?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?