Skip to content
DeWP

DeWP

Use your WordPress data in Astro projects

Features

This project contains several tools for using your WordPress data in Astro projects. You can use them to build headless WordPress sites with Astro or even migrate your data away from WordPress to Astro entirely.

Content Loaders

dewp/loaders loads your content using the WordPress REST API so you can use it with Astro’s content collection API.

Starter Template

Use DeWP’s blog template to get started with an Astro project using headless WordPress data.

More coming soon!

Create a new project

The easiest way to get started is to create a new Astro project using the DeWP blog template.

  1. Run the following command in your terminal and follow the instructions in the Astro install wizard.

    Terminal window
    npm create astro -- --template delucis/dewp/examples/blog-starter

  2. Update the endpoint option in src/content/config.ts to the URL of your WordPress REST API. Most commonly this is the URL of your website with /wp-json/ at the end.

    src/content/config.ts
    import { wpCollections } from 'dewp/loaders';
    

    export const collections = wpCollections({
      endpoint: 'https://example.com/wp-json/',
    });

  3. You can now start the Astro dev server and see a live preview of your project while you build.

The template shows links to all the pages in the linked WordPress site on the homepage and links to the 10 most recent blog posts at /blog.

Add to an existing project

If you prefer to add the DeWP content loaders to an existing Astro project, follow these steps.

  1. Install DeWP by running the following command in your project directory.

    Terminal window
    npm i dewp

  2. Add the DeWP content loaders to src/content/config.ts, setting endpoint to the URL of your WordPress REST API.

    src/content/config.ts
    import { z, defineCollection } from 'astro:content';
    import { wpCollections } from 'dewp/loaders';
    

    export const collections = {
      // existing collections ...
      ...wpCollections({ endpoint: 'https://example.com/wp-json/' }),
    };

  3. You can now use Astro’s content collection APIs to get your WordPress data in your components.

    In the following example, the posts collection is loaded in order to display each post’s title:

    example.astro
    ---
    import { getCollection } from 'astro:content';
    const posts = await getCollection('posts');
    ---
    {posts.map((post) => <p>{post.data.title}</p>)}