Guide · Updated August 2026

Astro to WordPress: Convert your Astro site to a theme

Astro ships fast static HTML, but WordPress is often where the content team lives. This guide shows how to take an Astro build — hydrated islands and all — and turn the rendered output into an installable WordPress theme in a couple of minutes, without rewriting a single component.

Do it yourself in about a minute

Install Themify and get your first conversion free — no credit card.

Chrome browser logoAdd to Chrome — free

Astro is a great way to build a marketing site: component-driven, almost zero JavaScript by default, and very fast. The friction usually appears later, when a client or content team asks for WordPress — an editor they already know, a plugin ecosystem, and a CMS that does not require a redeploy for every copy change. The good news is that Astro is one of the easiest stacks to move across, because its output is already static HTML and CSS.

Why Astro converts cleanly

Unlike page builders that generate obfuscated runtime markup, an Astro build produces readable HTML with your own class names, a compiled stylesheet, and only the JavaScript your islands actually need. When Themify captures the rendered page, it is capturing something very close to what you authored — which is why fidelity on Astro sites is typically pixel-perfect.

Step by step: Astro to WordPress theme

1. Build and preview a production version

Run npm run build followed by npm run preview, or open your deployed URL. Avoid astro dev: the dev server injects hot-reload scripts and unprocessed styles that would end up inside your theme.

2. Let islands hydrate

Components using client:load, client:visible or client:idle only render their final state once hydrated. Scroll the full page once so every client:visible island, lazy image and scroll animation has actually run before you capture.

3. Generate the theme

Click the Themify icon and press Generate theme. The extension snapshots the rendered DOM, resolves computed CSS (including Tailwind utilities and custom properties), downloads fonts and images, and writes a standards-compliant WordPress theme with style.css, template files and an assets folder. Everything runs locally in your browser.

4. Install in WordPress

In wp-admin open Appearance → Themes → Add New → Upload Theme, choose the .zip, install and activate. Your Astro design is now a WordPress theme you can edit and extend.

What carries over from an Astro build

  • Full page layout, grids and responsive breakpoints
  • Tailwind CSS utilities, design tokens and dark-mode variants
  • Rendered state of hydrated islands (React, Svelte, Vue, Solid)
  • CSS transitions, scroll-reveal and view-transition styling as rendered
  • Images, SVG icons, background video and favicons
  • Self-hosted and Google-hosted web fonts

Handling content collections

Astro content collections live as Markdown or MDX files in your repository. The theme covers presentation, so capture one representative post page to become the article template, then move the entries themselves into WordPress — either by pasting shorter sets manually or by importing the Markdown through a WordPress importer plugin. From then on the content team publishes in wp-admin while keeping your Astro design.

Multi-page Astro sites

Capture each route in turn — home, pricing, about, blog index, single post — and Themify folds them into the same theme, keeping internal links working so navigation behaves exactly as it did on the Astro build.

Convert only sites you own

Use Themify on your own Astro projects, or on client projects where the owner has authorized the migration.

Frequently asked questions

Can you convert an Astro site to WordPress?
Yes. Astro outputs plain HTML and CSS at build time, which makes it one of the cleanest sources to convert. Serve the built site (astro preview or your live URL), open it in Chrome and use Themify to package the rendered page as a WordPress theme .zip.
Do Astro islands and interactive components survive the conversion?
Client-side islands are captured in their hydrated, rendered state, together with the CSS and animations running at capture time. Components that fetch data at runtime should be replaced with WordPress-side content after installation.
Does Tailwind CSS carry over from Astro?
Yes. Themify reads the computed styles from the rendered page, so Tailwind utility classes, custom theme tokens and dark-mode variants render exactly as they did in the browser.
Should I capture the dev server or the production build?
Always capture a production build (astro build then astro preview, or the deployed URL). The dev server injects HMR scripts and unminified styles that do not belong in a shipped theme.
Can I turn Astro content collections into WordPress posts?
The theme handles design; content stays in WordPress. Convert a representative post page into the theme's article template, then import or re-create your Markdown collection entries as WordPress posts.

Try it in minutes — first conversion free

Themify is the fastest way to turn any live webpage into an installable WordPress theme (.zip). No coding, no rebuilding, no design handoff. Runs 100% locally in your browser.

No credit card required · 14-day money-back guarantee

Chrome browser logoAdd to Chrome — 1 free conversion