Migrate your data from Webflow to WordPress Part 1 - leija.io
  • @undefined- Dec 8

    Migrate your data from Webflow to WordPress Part 1

    In a previous article I wrote about my frustration on Weflow. But even more frustrating was that Webflow doesn’t offer a content data export option. I mean why would they, right? They want to keep their users longer. But not me, I did not want to stick around with this pre-mature CMS service.

    Luckily, Webflow provides a open API to folks who want to use the service as endpoint service.

    Webflow data export suggestion

    Webflow staff member data export suggestion.

    This article will get technical and if you’re not code savy, find someone who is and send them this article.

    Requirements

    • Basic PHP knowledge
    • Advance WordPress knowledge
    • PHP environment to test

    Okay let’s get started. Also any italics words means there’s a reference link at the bottom of the article.

    Steps to migrate data from Webflow to WordPress

    Step 1 – Setup a standard WordPress site

    I highly recommend this process, because it will let you visually see the posts as you refresh the browser. If you’re a pro, you can use WP-Cli [1]. But for the sake of meeting Google’s word count, I’ll show it the long way 🙂

    Make sure you have a LAMP environment. I typically use a Vagrant [2] box to setup a quick Linux, Apache, PHP, and MySQL server.

    What is Vagrant

    Why choose Vagrant?

    Vagrant is also nice because it’s compatible with Linux, Windows, and Mac operating systems.

    Vagrant does require a bit of manual work, so if you’re not in the mood to do that yet, you can download MAMP [3]. All it requires is a few clicks and you got a server up and running. It’s also available for Windows and Mac!

    MAMP interface

    Mac MAMP interface

    Once your LAMP environment is ready to go, download a copy of the latest version of WordPress code [4] and go through the installation process. You should see a sample post and feel free to delete that since we won’t need it.

    WordPress 2018 default theme

    WordPress 2018 default theme and post

    Get your Webflow API token

    To retrieve the token, all you have to do is log into your Webflow account.

    Go to the settings of the project, than click on the integration tab of the project.

    Project settings > integrations

    Scroll at the bottom of the page, and find the API access section. Once you’ve reached the section click on “Generate new API token” button.

    Webflow - Generate new API token section

    Webflow – Generate new API token section

    The code

    P.S. all the code images start from the beginning to the end. So just add the new code blocks right under the previous code block.

    The initial code

    Now let’s setup some initial code to start our Webflow data migration. The first step is to create a file named migrate.php in the root of the project.  Let’s start adding the initial code below.

    Webflow data migration initial code

    Webflow data migration initial code

    The initial code defines your Webflow API key, Site short name, Webflow API base URL, and a function that allows us to make calls to their servers.

    The site’s short name can be found in Webflow’s subdomain field.

    Subdomain equals short name

    Grab your site ID

    This is an important block of code because we will be using the site ID you’re targeting to get the site’s data.

    Grab Webflow site ID

    Grab Webflow site ID

    Wrap up

    Here’s what we’ve done so far:

    1. Setup a development environment
    2. Defined a few constants such as base url, Webflow api key, and your site’s shortname.
    3. Grabbed the site ID that you’re attempting to target.

    In the next article I will cover how we use the site id to fetch your site’s categories and content and structure the data so it’s ready to be inserted into WordPress.

    P.S. WordPress just released version 5, and let’s you create blocks like Webflow does. It might be worth transferring over and giving WordPress 5.0 a try.

    References:

    1. WP-Cli [1] – https://wp-cli.org/
    2. Vagrant [2] – https://www.vagrantup.com/
    3. MAMP [3] – https://www.mamp.info/en/
    4. WordPress code [4] – https://wordpress.org/download
    5. Webflow API Docs: https://developers.webflow.com