Astro adapter for WordPress theme development
This adapter enables you to build WordPress themes using Astro.
It allows you to create WordPress template files using .php.astro components under the pages/ directory.
- Write WordPress themes using Astro's component syntax
- Hot-reload via proxying your local WordPress server during development
- Use
.php.astrofiles to generate WordPress template files
- A working local WordPress site (e.g., running at
http://localhost:8001)
-
Create a new Astro project
npm create astro@latest
-
Add the astro-wordpress adapter
npx astro add astro-wordpress
-
Update your
astro.config.mjs// @ts-check import { defineConfig, passthroughImageService } from "astro/config"; import wordpress from "astro-wordpress"; // https://astro.build/config export default defineConfig({ adapter: wordpress({ devProxyTarget: "http://localhost:8001", // Your local WordPress URL outDir: "../wp-path/wp-content/themes/my-theme", // Output theme directory }), image: { service: passthroughImageService(), }, });
-
Add a style.css file to your
public/directory, This is required by WordPress to recognize the theme/*! Theme Name: My Theme Version: 0.0.1 */
-
Create a php layout (e.g.,
src/layouts/Layout.astro)<!doctype html> <html lang="<?php echo get_bloginfo( 'language' ); ?>" dir="<?php echo is_rtl() ? 'rtl' : 'ltr'; ?>" > <head> <meta charset={`<?php bloginfo( 'charset' ); ?>`} /> <meta http-equiv="x-ua-compatible" content="ie=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <Fragment set:html={`<?php wp_head(); ?>`} /> </head> <body class="<?php echo implode( ' ', get_body_class() ); ?>"> <main> <slot /> </main> <Fragment set:html={`<?php wp_footer(); ?>`} /> </body> </html>
-
Add a index template
src/pages/index.php.astro--- import Layout from "../layouts/Layout.astro"; --- <Layout> <h1> <a href={`<?php echo get_home_url(); ?>`}> <Fragment set:html={`<?php bloginfo( 'name' ); ?>`} /> </a> </h1> <h2 set:html={`<?php bloginfo( 'description' ); ?>`} /> <Fragment set:html={`<?php if (have_posts()) : while (have_posts()) : the_post(); ?> <h3><a href="<?php echo get_permalink(); ?>"><?php the_title(); ?></a></h3> <?php the_content(); wp_link_pages(); endwhile; if (get_next_posts_link()) { next_posts_link(); } if (get_previous_posts_link()) { previous_posts_link(); }; else : ?> <p>No posts found. :(</p> <?php endif; ?>`} /> </Layout>
-
Start the dev server
npm run dev
-
Activate the theme in the WordPress admin panel
To generate your theme for production:
npm run buildThe output will be generated in the directory you configured in outDir. You can zip the contents and upload them as a theme in WordPress.
You can import raw .php files into Astro components.
---
import myPhpCode from '../php-codes/my-code.php';
---
<h2>My php code result:</h2>
{myPhpCode}