Lovable WordPress Theme: What's Inside, File by File

The shape of the folder

Block themes have a fixed structure, and a theme converted from Lovable follows it exactly. If you unzip the download, you see a handful of folders and two files at the root. WordPress reads them on activation.

Here is what each item is for.

Nothing here depends on the converter after installation. You can edit the files in a code editor, commit them to Git, or hand the folder to a developer.

style.css — the theme header block: name, version, text domain. Block themes keep almost no CSS here; the design lives in theme.json.
theme.json — colors, fonts, spacing and type scale, taken from your Tailwind config and the classes used in the project.
templates/ — HTML files with block markup: index.html, page.html, and others depending on the content found.
parts/ — header.html and footer.html, the template parts reused across every template.
patterns/ — one PHP pattern file per page of your Lovable site, holding the page's sections as blocks.
assets/ or an images folder — the image files referenced by your pages, copied out of the Lovable project.

theme.json: your Tailwind design tokens

theme.json is where a block theme stores design decisions. It is the closest WordPress equivalent to a Tailwind config, and it is the file that makes the converted site look like the original rather than like a default theme.

The converter reads the palette and the type scale out of the project and writes them as WordPress presets. Colors become named palette entries, so they appear in the color picker in the editor. Font sizes become a scale, so headings and body text keep their relationship. Google Fonts used in the project are registered as font families.

Because these are presets, changing one value updates everywhere it is used. If your brand blue changes, edit it once in theme.json or in Appearance → Editor → Styles, and every button and heading that used it follows.

Hover colors for buttons and links are carried over too. Anything that depended on a Tailwind class generated at runtime by React state will not be, because there is no React state in the theme.

Templates and template parts

Templates are the frames WordPress draws around content. They live in /templates as plain HTML files full of block comments, for example . You can open them in a text editor or in the Site Editor; both edit the same thing.

A converted theme ships at least index.html and page.html. If your Lovable project contained a blog-like data array, it also gets templates for the post list and the single post, with a query loop that pulls real WordPress posts.

/parts/header.html holds your site logo and the navigation from the Lovable header, as a WordPress navigation block. That means the menu is editable in the Site Editor and works with WordPress menu features. /parts/footer.html holds the footer rows.

Editing a template part changes every page at once. That is usually what you want for a header; it is the main structural difference from React, where a header is a component you import.

Templates define the page frame and where content is placed.
Template parts are the shared header and footer, used by every template.
Both are HTML with block markup, so they are diffable and version-controllable.

Patterns: one file per page

Each page of your Lovable site becomes one block pattern in /patterns. A hero, a feature grid, a pricing table and a footer call-to-action from src/pages/Home.tsx end up as a single home pattern made of group, columns, heading, paragraph, image and button blocks.

On activation, WordPress creates a page for each route and inserts the matching pattern as its content. The front page is set for you, so the site is not empty after you click Activate. Page titles and slugs follow the routes from your project.

Working at pattern level has a practical benefit: you can insert the same block of sections on another page from the inserter. It also means the page content is normal block content. An editor can rewrite the hero copy without touching code.

Sections, grids and flex rows map to group and columns blocks. Cards become columns with inner groups. Lists, quotes, accordions and images keep their structure. The full mapping is on supported features.

What the theme does not contain

A block theme is static markup plus design tokens. React behaviour has nowhere to live in it, so some things from your Lovable project do not arrive.

Custom React state and event handlers are gone. Tabs, modals and dropdowns are exported in their default state only. Animations land on their final state. Carousels become a static approximation, and fixed-height cropped boxes are approximated rather than reproduced pixel for pixel.

Absolutely positioned decorations, canvas, Lottie, iframes, and video or audio without a static src are left out. So are Supabase, authentication, dashboards, API calls and third-party widgets. Screens behind a login are reported, not converted.

Responsive behaviour is approximated: desktop values are used, and WordPress stacks columns on mobile by default. Check the breakpoints you care about after install.

For the interactive parts, the usual answer in WordPress is a plugin or a small custom block. Contact forms are handled for you: the converter targets Contact Form 7, and product listings and pages target WooCommerce.

SEO files and settings that travel with the theme

If your Lovable project uses TanStack Start, each route has a head() with a title, description and sometimes JSON-LD. Those values are written into the pages for Yoast, Rank Math or SEOPress, whichever you have installed. JSON-LD is carried into the theme markup.

Older React + Vite apps keep their per-page meta and Open Graph tags in client-side code, so those are not converted. You set titles and descriptions in your SEO plugin after install. Is Lovable good for SEO? explains why the two app types differ.

Redirects from public/_redirects are carried over, and the page language plus any hreflang values are set. Check the slugs under each page and the structure under Settings → Permalinks before you launch.

One setting that is not in the theme but matters: Settings → Reading has a checkbox called "Discourage search engines from indexing this site". Leave it checked while you are reviewing, and uncheck it on launch day.

Getting and installing the theme

You need the project code first. GitHub sync works on every Lovable plan; "Download codebase" as a ZIP needs a paid plan. How to export Lovable code covers both routes.

Our converter runs in the browser at iqdesk.com/app. It takes the ZIP or a GitHub repository and produces the theme described above. Conversion, review and the theme download are free, and every account includes two free AI-fix attempts. The review screen puts the converted site next to the original inside WordPress Playground, so you compare before you download.

Installing is the standard path.

Download the theme ZIP from the review screen.
Go to Appearance → Themes → Add New → Upload Theme in your WordPress admin.
Choose the ZIP and click Install, then Activate. Pages are created and the front page is set.
Install the plugins you need — an SEO plugin, Contact Form 7, WooCommerce — so the converted markup has something to hook into.
Open Appearance → Editor and check the header, footer and each page against the original.

FAQ

Is a Lovable WordPress theme a block theme or a classic theme?

It is a block theme. It uses theme.json for design tokens, HTML templates with block markup, and template parts for the header and footer. You edit it in the Site Editor under Appearance then Editor, and there is no PHP template hierarchy to learn.

Can I edit the theme files by hand after conversion?

Yes. The output is an ordinary WordPress block theme folder with no proprietary code. You can open the HTML templates, patterns and theme.json in any editor, keep the theme in Git, and hand it to a developer.

Where does the content of each page end up?

Each Lovable route becomes one block pattern in the patterns folder. On activation WordPress creates a page per route and inserts the matching pattern as its content. The front page is set automatically, so the site is not empty after you activate.

Do Tailwind colors and fonts carry over into the theme?

Yes. The palette, type scale and Google Fonts used in the project are written into theme.json as WordPress presets. They appear in the editor's color and typography controls, so changing a value updates every block that uses it.

What happens to interactive parts like modals and carousels?

A block theme holds static markup, so React state and event handlers are not converted. Tabs, modals and dropdowns come across in their default state, animations in their final state, and carousels as an approximation. For working interactivity you add a WordPress plugin or a custom block.

Convert a Lovable site to WordPress All guides