Ollie Theme to Next.js: Moving a Block Theme Site the Clean Way

Block markup is a migration's best friend

Open any page of an Ollie site in the code editor and you will see ordinary HTML wrapped in HTML comments that start with wp:, as in wp:heading or wp:columns. Those comments name the block and carry its settings as JSON. A parser reads them the same way WordPress does, and out comes a tidy tree: this is a heading, this is a group with a background color, this is a two-column layout holding an image and a paragraph. No vendor decoder ring is required.

Compare that with the sites we usually inherit. Builder themes store layouts in their own formats, often as a JSON blob in post meta that only the builder can render, or as nested shortcodes that print as gibberish the moment the builder is switched off. Ollie's makers chose WordPress core blocks and the Site Editor, with no page builder in the stack. The Ollie review credits that choice as a design virtue. In a migration, it is also a budget virtue.

An Ollie site is the rare WordPress site that was tidy before anyone asked it to move.

Three drawers where an Ollie site keeps its design

The catch with block themes is that the design is split between files and the database. The theme folder holds the defaults. The Site Editor saves your changes as records in WordPress. A migration that reads only the theme folder rebuilds the site as Ollie shipped it, not as you edited it. So we read all three drawers before deciding anything.

That last row matters to anyone paying for Ollie Pro, which runs $89, $149 or $299 a year for one, ten or 100 sites as of October 2026. Ollie's pricing page says patterns already in use keep working if the subscription lapses, because once inserted they are just blocks. The migration treats them the same way.

theme.json, translated into design tokens

theme.json is the closest thing WordPress has to a design system file, and Ollie fills it carefully: a color palette with named slugs, font families and sizes, spacing steps and layout widths. Next.js projects keep the same information as design tokens, usually CSS custom properties or a styling config. The translation is close to mechanical, with one wrinkle: the values on the live site are theme.json plus whatever the Site Editor's global styles changed, and whichever of the five style variations (Agency, Creator, eCommerce, Startup or Studio) is active.

• Colors. Each palette slug becomes a token. Keep the slugs, because your content references them in classes built from them, in the has-(slug)-color and has-(slug)-background-color pattern.
• Typography. Font families move to next/font, which self-hosts them; sizes keep their slugs so the has-(slug)-font-size classes in your content still mean something.
• Spacing and layout. Spacing presets and the content and wide widths become layout tokens, so alignwide and alignfull blocks land where they did.
• Preset variables. WordPress prints values as --wp--preset--color and similar variables. Mapping those names once lets imported markup render without editing every page.

Fonts deserve a check before you start. If the live site already struggles with them, our guide to Ollie fonts not loading shows how to see which files the theme is actually serving, and the Ollie speed page explains how its per-block CSS loading works today.

From 115 pattern files to the dozen components you use

Ollie ships far more patterns than any one site uses, which is the point of a pattern library. The migration does not port the library. It counts which blocks and pattern layouts actually appear in your content, then builds components for those: a hero, a feature grid, a pricing table, a testimonial row, a call to action, a footer. A typical small business site uses far fewer layouts than the theme offers, so the component list stays short and every item on it is something a visitor really sees.

Navigation is the one place where moving off blocks is a relief. Ollie's header holds the core Navigation block, often paired with the free Ollie Menu Designer plugin for dropdown, mega and mobile menus. When WordPress 7.1 changed how that block marked submenus, mobile menus on Ollie sites opened fully expanded until Ollie 1.6.3 shipped a fix. In Next.js the menu is your own component, and a core release cannot rearrange it. Until you move, the Ollie mobile menu guide covers the fix.

How to move an Ollie site, from export to launch

1. 1

   Copy the site somewhere safe

   Take a full backup and a staging copy, so every export runs against a site nobody is editing.

2. 2

   Export the Site Editor records

   Pull edited templates, template parts, global styles and navigation menus from the database alongside the theme folder, and note the active style variation.

3. 3

   Count the blocks in use

   Parse every page and post, tally block types and recurring pattern layouts, and flag anything from a third-party block plugin.

4. 4

   Build tokens from theme.json

   Merge theme.json with saved global styles, then write colors, fonts, sizes and spacing as tokens with the original slugs kept.

5. 5

   Build the components

   One component per block type and recurring pattern, plus header, footer and navigation, styled from the tokens.

6. 6

   Convert the content

   Turn block trees into structured fields where the content repeats, such as services or team members, and clean HTML where it is prose.

7. 7

   Move images and media

   Copy originals from the uploads folder, carry alt text across, and let next/image produce sizes and modern formats.

8. 8

   Map URLs and write redirects

   Keep every permalink you can and redirect the rest one to one, including category, tag and paginated archives.

9. 9

   Compare page by page, then launch

   Review the new site beside the old one on a preview address, then switch DNS and watch Search Console for crawl errors.

The steps are the same for every WordPress theme. What changes with Ollie is how little time the content conversion takes, which is usually the longest step elsewhere. For the general picture, see how long a migration takes and what drives the cost.

The third option

Athena CMS, with AI agents on staff.

Not a theme and not a blank Next.js repo. The content system we put behind every custom site: plain fields, a real preview, every version kept, and AI agents that handle the chores a plugin only nags you about.

• PPicassoImages
• AApolloSite analysis
• AAresCompetitor watch
• PPrometheusContent holes
• AAtlasPage depth and structure
• DDelphiAI search visibility

ZDAOAand 12 more agents. Two come with Athena; the rest are monthly add-ons.

Meet the agentsTake the Athena tour

PPicassoWeekly · ImagesAApolloWeekly · Site analysis

The bits that still need a human

Easy is not the same as automatic. A few kinds of content always need judgment, and an honest quote names them up front.

• Third-party blocks. Forms, sliders and tables from block plugins store their own attributes, and a form plugin's entries and email settings must be rebuilt. Forminator users on Ollie have already met one styling clash on its consent checkbox.
• Query Loop blocks. They store a question, not content: show the latest three posts in this category. Each becomes a data query in code.
• Custom HTML blocks and embeds. Scripts pasted into pages get reviewed one by one, since some are trackers nobody remembers adding.
• WooCommerce pages. Ollie ships block templates for product archive, single product, cart, checkout and order confirmation. Those layouts are easy; the store data behind them follows the WooCommerce migration process.
• Hand-edited templates. A template changed in the Site Editor years ago may hold a one-off layout nobody documented.

If the live site has quirks you have been living with, the Ollie layout broken guide helps separate a real design decision from a CSS accident, so the new build does not faithfully recreate a bug.

Keeping every ranking on a small, tidy site

Ollie sites tend to be compact: a homepage, service or product pages, a blog. That makes SEO protection quick but not optional. Next.js puts routes, redirects and metadata in code, so the new site can reproduce your permalink structure exactly, carry over the titles and descriptions your SEO plugin stored, and output schema written for each page type. Archive pages are the usual leftovers: category, tag, author and /page/2/ listings either get rebuilt or redirected to their nearest equivalent.

The full checklists are in WordPress to Next.js redirects, choosing a URL structure and migrating without losing SEO. Image handling, including the resized copies WordPress generated with dimensions in their filenames, is covered in moving WordPress images to Next.js.

Is an Ollie site worth moving at all?

Often, no. Ollie is one of the better-built themes in the directory, rated 100 out of 100 from 36 reviews when we checked in October 2026, and updated three times between July and September. A brochure site that a small team edits happily in the Site Editor should probably stay, and our Ollie vs Next.js comparison says so in more detail.

Move when the site has outgrown pages: lead forms tied to a CRM, hundreds of location or service pages generated from data, a member area, or traffic where speed decides revenue. Keeping WordPress only as the editor behind a Next.js front end, described in keeping WordPress as the CMS, is possible, but it throws away the Site Editor's visual editing, which is the main reason people chose Ollie. A full move is usually cleaner. Our Next.js development team quotes it at a fixed price after a free site audit.

Life after the Site Editor, inside Athena

Ollie owners liked editing close to the page, so the replacement has to respect that. Athena CMS gives each page plain fields and a real preview of how it will publish, and it keeps every version, so any earlier draft of a page is a click away. Layout changes stay with a developer, which is exactly why a stray click cannot rearrange the header.

The upkeep a block theme leaves to plugins moves to agents. Iris writes search titles, descriptions and social cards. Atlas flags orphan and thin pages. Picasso keeps images described and sized. Harmonia handles Spanish versions and accessibility checks. How the switch works is set out in switching from WordPress, and the rest of our move guides sit in the WordPress to Next.js section. When you are ready, a WordPress to Next.js rebuild starts with a conversation, not a contract.