How to migrate from WordPress to Webflow

Every page, post, category and tag, and any address you have used in ads, emails or print. Put them in a spreadsheet with an empty column beside each for the new address. This list becomes the redirect map.

Your sitemap is one place to read them from. If you use WP-CLI, its wp post list command can print the address of every published post and page as a CSV file. url is one of the fields its documentation lists:

That file has no category or tag archives in it. Add those from the site itself.

In the WordPress dashboard go to Tools, then Export. Leave "All content" selected and click "Download Export File". WordPress saves one XML file, in a format it calls WXR. Its documentation says the file holds your posts, pages, custom post types, comments, custom fields, categories, tags, custom taxonomies and users.

Two things are not in it. WP-CLI's documentation of the same format says a WXR file does not include the site's settings "or the attachment files themselves". So the images stay on the WordPress site for now, and the export refers to them by address.

Keep this file whatever route you take next. It is the complete record of what the site said.

Create the site in your own Webflow Workspace. Until a domain is connected it is published to a webflow.io address, which Webflow describes as a staging environment.

To keep that address out of search engines, go to Site settings, then SEO, then the Indexing section, and set "Staging indexing" to off. Webflow says this needs a Site plan or a paid Workspace.

Webflow keeps repeating content in Collections. A Collection has one page template and one set of fields for all of its items.

• Posts become one Collection. Webflow offers a "Blog posts" template with fields already in it.
• Categories, tags and authors become Collections of their own if you want a page for each, or a field on the post if you do not. A post points at them with a reference field, or a multi-reference field for more than one.
• Custom post types, such as projects or team members, become a Collection each.

For each Collection, set the Collection URL when you create it. Webflow calls it "the slug for the folder that holds your Collection pages", and it decides every item's address. The section on redirects says what to choose.

This is the step with no button. WordPress's export screen makes XML, and its documentation describes no CSV export. Webflow's own guide says only that you "can use an XML to CSV converter". Its import article says a CSV exported from WordPress is "typically already structured in a way that's compatible with Webflow", which is true once you have one. There are four ways to get one.

• By hand. For a few dozen posts, skip the CSV. Create each item in Webflow, paste the text, and set the slug and the date to match.
• A spreadsheet. Build the file yourself: a column for each field, a row for each post. Webflow's import article suggests this for content that does not come from another system.
• A plugin. WordPress's documentation on importing content names one export plugin, WP All Export. Its listing in the WordPress.org plugin directory says it turns WordPress data into a CSV or XML file and lets you choose and rename the columns. Other plugins do the same job. Check what one exports before you rely on it.
• A script. Someone who writes code can read the XML file and write a CSV in the shape below. This suits a large blog, and posts whose categories and main images have to come across.

WP-CLI sits between the last two. Its wp post list command prints posts as CSV, and post_content is one of the fields its documentation lists:

Its list of fields has none for a post's categories, tags or main image, so those still need a plugin, a script or your own hands.

Whichever route you take, read the content column before you import it. The block editor stores a post as HTML with a comment around each block, and WordPress's documentation says a block that is drawn when the page is requested is stored as a comment alone. A shortcode, which the documentation calls "a WordPress-specific code", is stored as the code and not as what it showed on the page. Neither means anything to Webflow.

Webflow's import article has a table of what each kind of field accepts. These are the rows a blog needs.

A CSV file can be up to 4 MB. Split a larger one into several files.

Import the Collections that posts refer to first: categories, tags, authors. Then the posts.

In Webflow, open the CMS panel, choose the Collection and click "Import". Add the file and confirm that the first row is the header row. Then go through the columns. For each one, choose "Map to existing field", "Create new field" or "Do not import".

Map the slug column to the Slug field. Webflow says that if you do not map a column to the name and slug fields, "the CMS generates those for you automatically", and a generated slug is a changed address.

Webflow asks whether to make a backup of the site before the import. It also says to stay in the Designer until every item has finished. If items fail, it lists them with the reason for each.

Import a few rows first and open them before you send the rest.

Each WordPress page is made again as a static page in Webflow. Copy the text from the live site and give the page the slug it had. A WordPress page with a parent has the parent's slug first in its address. On Webflow a folder does that job.

Each Collection has one Collection page, which is the template for every item in it. Design it once and connect its elements to the Collection's fields. A blog index is a static page with a Collection list on it. Webflow shows up to 100 items in a list, and more with pagination.

There are three kinds, and each arrives differently.

• A post's main image. Give the Collection an image field and put each image's direct address in the CSV. Webflow says images imported this way get no responsive variants, so use images that are already sized, or upload them in Webflow instead.
• Images on static pages. Upload them to the Assets panel. It takes PNG, JPEG, GIF, SVG, WebP and AVIF files of up to 4 MB each.
• Images inside the text of a post. They arrive as part of the HTML in the rich text field. Webflow's import article does not say whether it copies them. Open an imported post on the webflow.io address and look at where an image in its text loads from. If the address is still your WordPress site's, the image goes when that hosting is canceled, so add it again in Webflow.

Documents such as PDFs go to the Assets panel too, up to 10 MB each. Webflow says uploading documents needs a paid Workspace or Site plan.

Work through the list you made.

• Forms. Add a Form block and rebuild each form. Webflow sends notifications to the email address of your account unless you change the recipients, and warns that a shared address such as info@ may have trouble receiving them. Send a test entry through each form.
• Search. Webflow's site search is available on Premium Site plans and above.
• Code a plugin added to every page, such as an analytics tag. Webflow has custom code sections in Site settings and Page settings, on a paid Site plan or a paid Workspace.
• Everything else. An outside service that you choose, or dropped.

On a static page, open the Pages panel, then Page settings, then "SEO settings". The two fields are "Title tag" and "Meta description".

On a Collection page the same settings are a pattern filled from the Collection's fields. If each post had its own description in WordPress, give the Collection a plain text field for it, bring it in as a CSV column, and use that field in the pattern.

Webflow recommends lowering the TTL of your DNS records to the lowest value your provider allows, at least one full TTL period before the change. You can put it back afterwards.

A custom domain needs a paid Site plan. Go to Site settings, then Publishing, then Production, and click "Add a custom domain". Webflow's quick connect option sets the DNS records for you, or you can choose "Manually add domain" and set them yourself.

Webflow asks for an A record for the root domain, a CNAME record for www and a TXT record named _webflow. Copy the values from Site settings, then Publishing, then Production: Webflow says the records can differ from site to site.

Webflow says to delete the A and CNAME records that pointed at the old host. Leave the MX records alone. Webflow does not host email, and its help says you can keep your current email service.

If your domain has CAA records, Webflow says they have to allow its certificate providers, or the SSL certificate may fail to be issued.

Back in Webflow, click "Verify domain". Next to the form of the domain your WordPress site used, with www or without, click "Make default". Then publish to the domain. Webflow sends the other form to the default.

Webflow says DNS changes can take up to 48 hours to reach everywhere, and usually take a few hours. It issues the SSL certificate once the records point to it, typically within a few minutes.