Webflow to WordPress.

Despite the stark differences in their web-building methodologies, transitioning from Webflow to WordPress is less daunting than it appears. The migration involves exporting content from Webflow, setting up a WordPress site, and importing the content, along with a few additional setup steps.

This tutorial will walk you through the migration process step by step, ensuring a smooth transition from Webflow to a fully functional WordPress website.

Key Takeaways

  • Before you can migrate your site from Webflow to WordPress, you need to purchase a hosting plan that can house a WordPress site.
  • You can export your Webflow site’s content as a CSV file, which you can then import to WordPress.
  • Don’t forget to update your DNS settings when you make the move so that your new WordPress website can use the original domain name of your old Webflow site.

Pre-migration steps

Before you start migrating your website, there are two things you need to do:

Here’s how to complete these two important steps… 💡

Purchase a hosting plan for your WordPress website 💰

You will need to select a hosting provider and purchase a hosting plan.

When choosing a hosting provider, it’s important to have clarity on one’s own needs and then look for hosting companies that can fulfill those needs. Case in point, a small portfolio website can choose shared hosting because it’s cheap, but a site drawing thousands of users needs more resources and would require dedicated, managed, or VPS hosting.

To discover some great options, check out our full roundup of the best WordPress hosting companies.

We generally recommend SiteGround or Bluehost if you’re on a tight budget or Rocket if you’re willing to spend $25+ per month.

Your web host should automatically install a free SSL certificate for you. If it doesn’t, you can purchase a certificate from them and install it on your website.

Back up your Webflow website 💾

Before you start migrating, you’ll also want to take a backup of your site to ensure that you have a clean copy of your data.

While you’re unlikely to experience issues if you follow these steps, it’s always better to be careful. Having a backup and not needing it is a lot better than needing a backup and not having it!

Webflow automatically creates backups, but it’s best to initiate a manual backup by following these steps:

  1. Open your Designer.
  2. Press Command + Shift + S on Mac or Control + Shift + S on Windows.
  3. Hit the Save button to save your backup.
saving webflow site backup.

After you have the backup in place, it’s time to start the process of migrating your website.

Webflow to WordPress migration step-by-step

Step 1: Install WordPress on your hosting 🧑‍💻

In the previous section, we spoke of purchasing a hosting plan. During the purchase, you must have had to create an account with your hosting provider. Now, you need to access your hosting account to be able to install WordPress.

👉 Different hosting providers offer different methods for installing WordPress:

  • One-click installers: Users can easily install WordPress with a single click with the help of tools like Softaculous, Fantastico, QuickInstall, etc.
  • Manual installation: Users can download WordPress from its official site and manually upload it to the hosting server via FTP
  • Command line: Advanced users can install WordPress using command-line tools like WP-CLI
  • Managed WordPress hosting: Specialized hosting plans where installation of WordPress is done for you

If you’re not sure how to install WordPress on your host, you can always reach out to their support for help or read their documentation.

Usually, it’s as simple as clicking a few buttons, so don’t stress.

After you’ve installed the WordPress software, visit the login page (i.e., your-temp-domain.com/wp-login.php*) and use the username and password from the install process to log in to your site’s dashboard.

⚠️ *Note – most WordPress hosts will give your WordPress site a temporary staging URL to start, which you can use to log in and perform the migration. This is important because your actual domain name will still point to your Webflow site until you change it to point to WordPress later in this guide.

Step 2: Export content from Webflow 📤

To export content from your Webflow website, open your Webflow Designer and go to CMS Collections. It contains all your site files stored on the Webflow server.

webflow site cms collection.

Select the collection you want to export and then click on the Export button located at the top of the page to export that specific collection.

webflow export content.

The collection will be downloaded to your local computer in a CSV file.

In this way, you can download most components of your Webflow website except for a few components like custom CSS, images, etc. that cannot be automatically exported.

You will need to add or upload these components manually or by using a plugin to your WordPress website.

Step 3: Import content from Webflow to WordPress 📥

To import Webflow content into WordPress, log into your WordPress dashboard using the login URL and the username and password you saved in step 1.

Next, you will need to install a migration plugin called WP All Import to import Webflow .csv files into your WordPress website.

Install the plugin into your site and an option called WP All Import will appear on your WordPress menu.

Select that and you will be taken to the plugin’s page where you need to upload the Webflow file using the Upload a file button.

Next, select the type of data you are importing from the dropdown menu under New Items.

Hit the Continue button to proceed with the upload process.

WP All Import new import.

Next, use the drag-and-drop tool to match the Webflow file data with the appropriate fields of the website.

drag and drop interface WP All Import.

👉 Let’s say you are importing blog posts from Webflow to WordPress. You will need to map your Webflow content with the following data fields:

  • Title & body
  • Images
  • Custom fields
  • Taxonomies, categories, tags
  • Other post options (post status, date, comments)
  • Function editor

Title & body

You need to drag the title and body of the post (from the right) to the appropriate fields (on the left).

WP All Import name and content mapping.

👉 There are two things worth noting here:

  1. Whatever data you map using the drag-and-drop tool will be added to all the imported posts, and
  2. To use the function field or to import images and custom fields from the Webflow file, you need the premium version of the WP All Import plugin. That said, the migration plugin does offer you options to add images, custom fields, and code snippets manually. But know that the same images, custom fields, or code snippets will be added to all the posts.

So when mapping data or adding data manually, we recommend that you add only the data that you want to include in all the imported posts.

WP All Import image fields.

Before moving on to the next step, let’s take a quick look at each data field.

Images

In this section, you can add images by inserting the URL and uploading it to your Media Library. You can choose to set the first images as Featured and add metadata like titles, captions, alt text, and description.

However, we recommend that you avoid adding images manually because there’s a plugin that’ll help you directly import images from your Webflow site to WordPress. More on this in step 4.

image mapping WP All Import.

Custom fields

Custom fields allow you to add extra information to your posts.

Let’s say you write about an upcoming event on your WordPress website. The custom fields can be used to store event-specific information such as date, time, location, ticket price, or a link to purchase tickets.

custom fields mapping WP All Import.

Categories & tags

Categories are broad, hierarchical classifications used to structure content, and tags are specific, non-hierarchical classifications used to connect related content.

For instance, an article can be categorized as “news” and tagged as “football.” Or it can be categorized as “technology” and tagged as “artificial intelligence.”

Other post options

These options allow you to set post status, dates, comments, trackbacks and pingbacks, post author, slug, and choose display post templates, among other things.

other post options WP All Import.

After mapping and adding Webflow data in the plugin fields, it’s time to hit the Continue button located at the end of the page.

Next, you will be asked to define unique identifiers for your posts, for which you will select the Auto-Detect button and then hit the Confirm & Run Import button to finish off the import process.

wp all import import complete - webflow to wordpress.

After the import is complete, check whether the import was done properly.

Go to PostsAll Posts and then to PagesAll Pages to examine the blog posts and pages we just imported on our website.

webflow to wordpress imported posts.

Notice something off? URLs of images are showing instead of the images?

WordPress does not import images automatically, but don’t worry, you don’t need to manually upload all your images. There is a plugin for that. More on this in the next section.

Step 4: Import images into WordPress 📷

To import images into your WordPress website, you need to install and activate a plugin called Auto Upload Images.

Immediately after activation, the plugin will automatically search for image URLs on your posts and pages, download the images, and then replace the image URL with the actual images.

Setting up permalinks is an important step to ensure proper URL structure and maintain SEO rankings.

If you decide to change the structure later, it will mess up your website and negatively affect your search engine rankings.

To set your URL structure, go to Settings → Permalinks and select the URL structure that best suits your website.

For most sites, the Post name is the ideal and recommended URL structure.

post name permalink structure - webflow to wordpress.

Besides setting up your permalinks, you also need to set up URL redirects.

  • Let’s say you had a page on your Webflow site with the URL: https://www.example.com/post/best-dog-food/
  • After migrating to WordPress, the equivalent page URL is: https://www.example.com/best-dog-food/

You need to redirect the Webflow page to the new WordPress URL.

Redirection can be implemented using dedicated redirection plugins (like Redirection and 301 Redirects) or SEO plugins (Yoast and RankMath).

Powerful SEO plugins like RankMath often auto-redirect pages (e.g., “post/best-dog-food/” to “best-dog-food/”) so you might not have to manually implement redirection. We recommend checking your posts and pages before installing a redirection plugin.

👨‍🎓 Use this dedicated guide to learn how to implement redirections.

While you are implementing redirection, consider redirecting “404 not found” pages to your home page, blog, or custom landing page. It will ensure that visitors who encounter broken links or unavailable content are seamlessly guided to a page and encouraged to explore the website.

Step 6: Update the DNS settings ⚙️

After the migration, you need to ensure that your domain name or URL is pointing to the new hosting server and not the old Webflow server.

To point your domain name to the correct server, you need to update your DNS settings.

nameservers namecheap hosting - webflow to wordpress.

👉 Changing the DNS setting involves:

  • Finding the nameservers of your current hosting server
  • Modifying the nameservers on your domain registrar account
  • And waiting for up to 24 hours for the modification to be properly implemented

We recommend reaching out to the support team of your hosting provider and domain registrar to help update your DNS settings.

Step 7: Install WordPress themes & plugins 🖱️

In this final step, you will be installing a theme and plugins on your WordPress website.

Themes help shape the design or look of the website. So if you want to replicate the look of your previous Webflow website then search for a visually similar theme in the WordPress repository. Alternatively, you can install one of the popular WordPress themes.

Plugins help add new functionalities to your website. So for instance, if you want visitors to subscribe to your newsletter, you can install a newsletter subscription plugin.

👨‍🎓 Use the following guides to install plugins and themes:

That’s it, folks!

Conclusion 🧐

Moving your website from Webflow to WordPress is time-consuming but it isn’t a very difficult task. Since it’s a long process, we recommend setting aside significant time to avoid missteps.

🍎 Once you’ve purchased web hosting, the migration process involves these seven steps:

  1. 🧑‍💻 Install WordPress into the hosting server
  2. 📤 Export content from Webflow
  3. 📥 Import content into the WordPress site
  4. 📷 Import images into the WordPress site
  5. 🔗 Configure permalinks and implement redirection
  6. ⚙️ Update DNS settings
  7. 🖱️ Install plugins and themes

We have covered how to implement all these steps in the article and we hope that the migration went smoothly.

If you have any questions about how to migrate your website from Webflow to WordPress, leave us a comment below.

Yay! 🎉 You made it to the end of the article!

0 Comments
Inline Feedbacks
View all comments

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!