# How do I convert an existing WordPress site into Framer?

> You convert a WordPress site into Framer by extracting its content, media, metadata and URLs and rebuilding the structure in Framer, not by copy-pasting page by page. Framer has no native WordPress importer, so the reliable path is to export the WordPress content into an import-ready data file, recreate the layout in Framer, and connect the content to Framer's CMS collections, keeping URLs and metadata intact. WPBuildAI scans the live WordPress site and produces that import-ready export plus a redirect map, so the rebuild is assembly rather than retyping.

Source: https://wpbuildai.com/convert-website-to-framer-template/
By lawrence-arya · 2026-06-10

---
You convert an existing WordPress site into Framer by extracting its content and rebuilding the structure, not by copy-pasting page by page. Framer is a design-first platform with its own CMS, and it has no native WordPress importer, so the content has to come out of WordPress in a usable form and be connected to Framer's collections. The reliable path is to export the content, media, metadata, and URLs first, recreate the layout in Framer, and map the content onto its CMS, keeping the URLs and on-page signals intact so rankings survive. WPBuildAI scans the live WordPress site and produces that import-ready export plus a redirect map, which turns the rebuild into assembly instead of retyping.

Capture images at source rather than as served, since sizing logic is changing underneath: WordPress [7.1, due 19 August 2026](https://make.wordpress.org/core/2026/06/19/roadmap-to-7-1/), ships Enhanced Responsive Images to compute more accurate sizes values, so what the browser downloads is not necessarily the asset you want in the template.

## What "convert to a Framer template" really means

The phrase covers two separate things, and separating them clarifies the work. One is the design: recreating the layout, type, and interactions as a Framer project, which is hand-built in Framer's canvas and is where its strength lies. The other is the content: getting your pages, posts, and their data into Framer so the design has something to display. Converting a site is doing both, and the content half is the part people underestimate because the design half is visible and satisfying. A Framer template without your content is an empty shell; the conversion is finished only when the content is in and connected.

## Why copy-pasting from WordPress does not scale

Copy-pasting works for five pages and collapses for fifty. Each page pasted by hand loses its metadata unless you re-enter that too, drops its alt text, and risks inconsistencies that are hard to audit later. For a real site, manual transfer is slow, error-prone, and almost guarantees some pages or fields get missed. The alternative is to pull the content programmatically, either by reading the rendered pages or through the [WordPress REST API](https://developer.wordpress.org/rest-api/), into a structured file you can import. That gives you every page with its fields intact, in one pass, which is both faster and more complete than the copy-paste approach Framer beginners often start with.

## What transfers and what gets rebuilt

It helps to know which half is data and which is craft. What transfers as data: the text, the images, the metadata, the URLs, and the content structure (which posts, which fields). What gets rebuilt by hand in Framer: the layout, the styling, the responsive behaviour, and the interactions. The WordPress theme itself does not convert, because it is PHP and Framer is a different system entirely, the same wall behind [why a WordPress XML export fails](/why-wordpress-xml-export-fails/) to carry a site to a non-WordPress platform. So you are extracting the content and recreating the presentation, which is the normal shape of any move to a design-led no-code tool.

## Getting content out of WordPress in an import-ready form

The export is the step that decides how smooth the rest is. The goal is a clean, structured file, CSV or JSON, where each item has its fields separated: title, body, slug, date, author, categories, and the image references. That maps directly onto a Framer collection. This is the same discipline as [exporting WordPress posts to a CMS import format](/export-wordpress-posts-to-webflow-cms-format/) or [extracting content for import elsewhere](/extract-wordpress-website-content-for-notion-import/): the cleaner and more structured the export, the less manual fixing you do on the Framer side. Images are handled alongside, with alt text preserved, so the rebuilt pages keep their image SEO.

## Framer's CMS and how content maps onto it

Framer organises dynamic content into CMS collections, where you define the fields and Framer generates pages from a template you design once. Converting a WordPress blog, for example, means creating a posts collection with fields matching your export, title, body, date, slug, featured image, importing the items, and designing one post template that Framer applies to all of them. Static pages are built individually. Per-page SEO settings, the title and description, are set from your metadata export. Mapping the WordPress content onto this model is the core of the conversion, and a well-structured export makes it close to a direct import rather than a reshaping exercise.

## Keeping URLs and rankings through the switch

A design change should not be a ranking change, and it will not be if the URLs survive. Keep the same paths in Framer wherever you can, so most pages do not move, and set a single-hop 301 for any URL that changes shape under Framer's structure, following Google's [site move guidance](https://developers.google.com/search/docs/crawling-indexing/site-move-with-url-changes) and its [redirects guidance](https://developers.google.com/search/docs/crawling-indexing/301-redirects). Carry the titles and descriptions across so the on-page signals come with the content. The 2024 [Web Almanac](https://almanac.httparchive.org/en/2024/) is a reminder of how much sits on WordPress and therefore how much URL history a typical site carries; preserving it is what keeps the conversion invisible to search engines.

## A step-by-step conversion

1. **Inventory every URL** from the sitemap, internal links, and Search Console.
2. **Export content, media, and metadata** into a structured, import-ready file.
3. **Recreate the design** in Framer as your template.
4. **Create Framer CMS collections** with fields matching the export, and import.
5. **Set per-page SEO** from the metadata and align slugs with old paths.
6. **Set single-hop 301s** for any URL that changes.
7. **Publish, resubmit the sitemap,** and watch Search Console for 404s.

## A worked example

A 60-page WordPress site with a 40-post blog converted to Framer. The team crawled first and exported the content to a structured file: the 40 posts with their fields and the 20 static pages, plus images with alt text. In Framer they designed the page templates, created a posts collection matching the export, and imported the 40 posts so they generated from one template. Static pages were built individually, with titles and descriptions set from the export. Slugs matched the old paths, so only a few URLs changed and got 301s. After publishing they resubmitted the sitemap. The conversion took days, not weeks, because the content arrived as a clean import rather than 60 pages of copy-paste, and rankings held because the URLs and metadata came across.

## Common mistakes converting to Framer

- Copy-pasting content by hand instead of exporting it in one structured pass.
- Building the Framer design but forgetting to export the WordPress metadata and URLs.
- Letting Framer's structure change slugs without setting redirects.
- Dropping image alt text during the move, which thins image SEO.
- Treating the design as the whole job and leaving the content half half-finished.

## Key points to remember

Converting an existing WordPress site into Framer is an extract-and-rebuild: pull the content, media, metadata, and URLs out of WordPress and recreate the presentation in Framer, because there is no WordPress importer. Export to a clean, structured file so the content maps onto Framer's CMS collections, keep URLs the same where you can, carry the metadata, and 301 anything that changes. Done that way the design improves without the rankings moving. Copy-pasting is what makes the job slow and lossy; a structured export is what makes it fast. WPBuildAI scans the live WordPress site and produces the import-ready export and redirect map. Send your site URL for a free migration assessment.

Not affiliated with WordPress, Lovable, Webflow, Shopify, Wix, or Squarespace.