Moving off OceanWP
OceanWP to Next.js: The Theme Is Light, the Extras Are Not
Of the big multipurpose themes, OceanWP is among the easier ones to leave. The theme stores very little inside your pages. The real work hides next door, in Ocean Extra, the premium extensions and whichever page builder did the actual building.
October 8, 2026 · 9 min read
The short answer
To migrate OceanWP to Next.js, start with the page builder: Elementor or block editor content holds the words and images. Then list what Ocean Extra and the extensions add: per-page metabox settings, My Library templates, custom headers, sticky bars and popups. Rebuild those as code components, keep or redirect every URL, and move editing to a CMS.
On this page
- Three layers, and only one of them is the theme
- First, find out which builder made the pages
- Ocean Extra and the extensions, sorted by what they leave behind
- Eight header types collapse into one component
- Moving the site, from snapshot to switchover
- OceanWP's shop features are behavior, not data
- The addresses Google already knows
- Why OceanWP sites are often quicker to quote
Three layers, and only one of them is the theme
An OceanWP site is built in layers that come from different places, and a migration treats each one differently. The first is the theme: a free, classic WordPress theme configured in the Customizer, with 400,000+ active installs on WordPress.org and version 4.2.7 released on October 6, 2026. It holds global choices such as header type, colors, typography and blog layout. Those are settings, not content, and they become design decisions in the new build.
The second layer is Ocean Extra, the free companion plugin with 500,000+ active installs of its own. Its WordPress.org listing says it adds the per-page metabox settings, My Library templates for headers and footers, extra widgets, shortcodes including [oceanwp_library], locally hosted Google fonts and Adobe Fonts, and Customizer import and export. The third layer, on many sites, is the Pro Bundle: 14 premium extensions on paid plans, plus free extensions such as Ocean Stick Anything and Ocean Modal Window.
The pages themselves were built with something else. The theme's own listing calls it the best friend of Elementor and names Beaver Builder, Brizy, Visual Composer, Divi and SiteOrigin as compatible. Which one built your pages decides more about this migration than OceanWP does.
First, find out which builder made the pages
Open a few key pages in the editor. If Elementor opens, the layout is stored as JSON in post metadata, and the post content holds a fallback copy at best. If the block editor opens with blocks, the content is already close to clean. If the classic editor shows a jumble of tags, a builder that uses shortcodes was involved. Each needs a different extraction path.
| How the content is stored | What the extraction involves | |
|---|---|---|
| Elementor | Layout as JSON in post metadata, widget by widget | Read the JSON, keep text, images and links, drop widget styling |
| Block editor | Block markup inside post content | Parse blocks into clean fields; the lightest job of the four |
| Divi Builder plugin | Divi shortcodes or Divi 5 block data | The same parsing work as a site on the Divi theme |
| Other builders | Each builder's own format | A reader written for that format, checked page by page |
OceanWP is most often paired with Elementor, as its own listing hints, and that is where the effort concentrates. The Elementor-specific detail, including Pro widgets and theme templates, is on Elementor to Next.js, and the way OceanWP and Elementor share the work is covered in OceanWP with Elementor. A Divi Builder site follows the plan on Divi to Next.js.
Ocean Extra and the extensions, sorted by what they leave behind
The extensions are where OceanWP sites quietly accumulate features. Some leave content in the database that must be moved. Others are pure behavior, a sticky bar or a popup, which is rebuilt in code and needs nothing exported. Here is how we sort them.
| What it adds to the site | How it moves | |
|---|---|---|
| OceanWP Settings metabox | Per-page overrides: layout, sidebar, header and title display | Recorded per page, then expressed as page templates or fields |
| My Library | Reusable templates for headers, footers and inserted sections | Template content extracted; becomes shared components |
| [oceanwp_library] shortcode | Drops a My Library template into a page or widget | Each placement found and replaced with the component |
| Ocean Sticky Header and Sticky Footer | Bars that stay in view on scroll | Rebuilt in CSS and a little code; nothing to export |
| Ocean Stick Anything | Makes any chosen element sticky | Each sticky element listed and rebuilt where it still earns its place |
| Ocean Popup Login | A login and registration popup | Replaced by the new site's own sign-in, if one is needed |
| Ocean Modal Window | Popups with their own content | Popup text exported; rebuilt as an accessible dialog or a page |
| Ocean Side Panel | A slide-out panel of widgets | Panel contents moved into the navigation component or footer |
| Ocean Hooks | Content injected at theme hook points | Each hook's content mapped to a fixed spot in the layout |
| Ocean Portfolio | Portfolio items and grids | Items exported as structured entries into a portfolio collection |
| Ocean Cookie Notice | A consent banner | Replaced with a consent setup that matches your actual scripts |
| Ocean Extra widgets | About Me, Contact Info, Recent Posts, Social Icons | Their content becomes footer or sidebar fields |
Hooks and My Library deserve the most care. Content placed through them does not show up when you read a page's own content, so a script that exports pages alone will miss a banner that appears site-wide. We crawl the rendered site as well as the database, and compare the two, to catch anything injected from elsewhere.
Eight header types collapse into one component
OceanWP's Customizer offers eight header types: Minimal, Transparent, Top Menu, Full Screen, Center, Medium, Vertical, and a Custom Header drawn from a My Library template. The mobile menu has three more styles of its own: Sidebar, Dropdown and Full Screen, each with configurable breakpoints. Add per-page header overrides from the metabox and the Sticky Header extension, and a single site can show several header behaviors.
On the Next.js side, the header is one component with the variations you actually use, written down and tested. A transparent header over a hero on the homepage and a solid one elsewhere is a small, deliberate rule in code. The mobile menu is built once and tested on real devices, which retires a class of trouble OceanWP owners know well. On August 12, 2026, OceanWP staff acknowledged on WordPress.org that the mobile menu stops working with SiteGround Speed Optimizer's Combine JS setting. See OceanWP mobile menu not working and, for a header that vanishes outright, OceanWP header not showing.
A theme that offers eight headers is generous. A site that needs one is easier to keep.
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.
- PicassoImages
- ApolloSite analysis
- AresCompetitor watch
- PrometheusContent holes
- AtlasPage depth and structure
- DelphiAI search visibility
and 12 more agents. Two come with Athena; the rest are monthly add-ons.
Moving the site, from snapshot to switchover
- 1
Take a complete copy
Back up the database and uploads, and export the Customizer settings with Ocean Extra's import and export tool so the current design choices are on record.
- 2
Identify the builder and the add-ons
Confirm which page builder built each page, and list every active Ocean extension, every My Library template and every Ocean Hooks placement.
- 3
Crawl the live site
Record every URL with its title, description, canonical and status, and capture the rendered pages so site-wide inserts from hooks and templates are visible.
- 4
Extract content by builder
Read Elementor JSON, block markup or other builder data into clean fields. Pull My Library and modal content separately and attach it where it appears.
- 5
Rebuild the theme layer as code
Header, mobile menu, footer, sidebars, sticky elements and popups become Next.js components that match the design you approved.
- 6
Move the store, if there is one
Products, categories and customer data follow a separate plan, and OceanWP's shop features are rebuilt as part of the new product pages.
- 7
Compare, redirect and switch
Check every page type against the original on a preview address, add permanent redirects for changed URLs, move DNS and watch Search Console in the weeks after.
OceanWP's shop features are behavior, not data
OceanWP's WooCommerce support is a real strength, and owners should know what they are giving up. Without any builder, the vendor lists off-canvas filters, product quick view, a multi-step checkout, mini cart styles, a Floating Bar for sticky add to cart, drag-and-drop ordering of product page content, three product tab styles and a dedicated shop sidebar. Ocean eCommerce Pro is a separate paid plugin on top.
None of that is content. Products, prices, variations, categories, orders and customers live in WooCommerce, and those move under their own plan, described at WooCommerce to Next.js. The OceanWP features are rebuilt in the new storefront, and it is a good moment to ask which ones customers used. A quick view nobody opens is just code on every product page. If the shop layout is already fighting you, OceanWP WooCommerce layout broken explains the usual causes.
The addresses Google already knows
OceanWP does not change how WordPress builds its permalinks, so the URL plan starts from a simple rule: keep every indexed address exactly as it is. Pages, posts, categories, tags, products and any portfolio items from Ocean Portfolio all go on the crawl list. If an address must change, it gets one permanent redirect to its exact new home, written into the Next.js config. The thinking behind those choices is in URL structure after a migration and redirects for a Next.js move.
Titles and descriptions usually come from an SEO plugin and are exported and checked against the crawl. Images are pulled from the media library at full size and resized by next/image, with alt text carried over; see moving WordPress images. The rest of the checklist is at migrating without losing SEO.
Why OceanWP sites are often quicker to quote
Because the theme keeps so little in the pages, an OceanWP site with block editor content can be one of the simpler moves we price. Elementor raises the effort, as does a long list of extensions, heavy use of Ocean Hooks, or a large store. Quotes are fixed after a free site audit. How quotes are built is in migration cost, phases in the timeline guide, and website financing is there if it helps.
After launch, the site runs on Athena CMS. Editors work in plain fields with a real preview, every version is kept, and there is no Customizer, metabox or extension license to renew. Argus watches for broken links and failing forms, Aegis checks daily for intrusions, and Picasso keeps every image described and sized. The handover is laid out in switching from WordPress.
Staying is a fair choice for a small brochure site or simple shop where the free theme and Elementor already do the job; the OceanWP speed guide and the OceanWP repair hub will keep it in shape. If leads, speed or custom features matter more, weigh OceanWP vs Next.js, browse the WordPress to Next.js guides, and talk to our Next.js development team.
Questions people ask before they call
Usually not. OceanWP keeps its settings in the Customizer and the per-page metabox, not in your page content, so the words and images sit wherever your page builder put them. The effort comes from that builder (often Elementor), from Ocean Hooks and My Library templates inserted across the site, and from any WooCommerce store. A block editor site on OceanWP is a light migration.
They are recorded, not migrated. Per-page metabox choices, header overrides and Customizer settings describe how the site looks, so we capture them in an export and a crawl, then build those decisions into the new design. Content inside My Library templates, modals and widgets is extracted and placed where it appeared. Nothing from Ocean Extra needs to run on the new site.
No, unless you want to. Sticky headers, sticky footers, side panels and modal windows are rebuilt as part of the Next.js design, built only into the pages that actually use them. It is a good time to review them: a login popup on a site without customer accounts, or a sticky bar that covers content on small phones, can simply be dropped.
Both, in different places. Elementor holds your page content, so the extraction follows Elementor to Next.js. OceanWP and its extensions hold the header, footer, sidebars and site-wide inserts, which this page covers. In practice, we treat them as one inventory and one build.
It can be. If the site is a simple brochure or small shop and the free theme, Ocean Extra and a builder cover it, staying is cheap and sensible. Paid Pro Bundle plans start at $42 a year as of October 2026, with lifetime options. The case for moving is about what the site needs to earn, not the theme price. See OceanWP pricing for the full list.
Keep reading
- Free tier showdownOceanWP vs Astra: Two Free Themes, Two Ways to Charge for the RestOceanWP vs Astra: what each free theme includes, what the paid bundles cost as of October 2026, how their mobile menus behave, and who should pick which.
- Where OceanWP keeps your CSSOceanWP CSS Not Updating? Follow Your Styles From the Customizer to the BrowserOceanWP CSS not updating after you publish? Check Styling Options Location, the custom-style.css file, Ocean Extra and every cache, in the right order.
- OceanWP performance guideOceanWP Speed: A Light Theme, and Everything You Stacked on ItOceanWP speed, setting by setting: the Customizer Performance panel, local Google Fonts, Ocean Extra components, extensions and the Combine JS menu lesson.
- Free theme, honest auditOceanWP Review (2026): What the Free Theme Does Well, and What You End Up Paying ForOceanWP review for 2026: who runs it now, what the free theme covers, Pro Bundle tiers, WooCommerce features, the mobile-menu bug and who should pick it.
- The free theme, priced outOceanWP vs Next.js: When a Free Theme Stops Being the Cheap OptionOceanWP vs Next.js compared: the free theme, Ocean Extra, Pro Bundle tiers, the SiteGround mobile-menu bug and what a move to Next.js really involves.
- Free theme, paid extrasOceanWP Pro Bundle Pricing (2026): Eight Tiers, Permanent-Looking Discounts and the Renewal FootnoteOceanWP Pro Bundle pricing as of October 2026: yearly and lifetime tiers, struck-through prices, the renewal footnote, the 14-day refund and a shop's bill.
- Everything in WordPress to Next.jsSee the section
Find out what OceanWP is holding on your site
Tell us about your OceanWP site and its builder. We will list the extensions, templates and pages involved and send a fixed quote, or tell you plainly if staying makes more sense.
Which of these sounds like you? (pick any)
Rather talk now? Call (210) 346-0848.