Headless WordPress & Astro
Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.
WordPress is a content management system that includes its own frontend, but can also be used as a headless CMS to provide content to your Astro project.
Integrating with AstroSection titled Integrating with Astro
PrerequisitesSection titled Prerequisites
To get started, you will need to have the following:
- An Astro project - If you don’t have an Astro project yet, our Installation guide will get you up and running in no time.
- A WordPress site - Your site’s REST API is
[YOUR_SITE]/wp-json/wp/v2/and is available by default with any WordPress site. It is also possible to set up WordPress on a local environment.
Setting up CredentialsSection titled Setting up Credentials
Your WordPress REST API is available to external requests for data fetching without authentication by default. This does not allow users to modify your data or site settings and allows you to use your data in your Astro project without any credentials.
You may choose to require authentication if necessary.
Fetching DataSection titled Fetching Data
Fetch your WordPress data through your site’s unique REST API URL and the route for your content. (For a blog, this will commonly be
posts.) Then, you can render your data properties using Astro’s
For example, to display a list of post titles and their content:
The WordPress REST API includes global parameters such as
A large quantity of data is available to you via this API, so you may wish to only fetch certain fields. You can restrict your response by adding the
_fields parameter to the API URL, for example:
The API can also return content related to your post, such as a link to the parent post, or to comments on the post. You can add the
_embed parameter to the API URL (e.g.
[YOUR-SITE]/wp/v2/posts?_embed) to indicate to the server that the response should include these embedded resources.
Building a blog with WordPress and AstroSection titled Building a blog with WordPress and Astro
This example fetches data from the public WordPress API of https://norian.studio/dinosaurs/. This WordPress site stores information about individual dinosaurs under the
dinos route, just as a blog would store individual blog posts under the
This example shows how to reproduce this site structure in Astro: an index page that lists dinosaurs with links to dynamically-generated individual dinosaur pages.
Displaying a list of WordPress postsSection titled Displaying a list of WordPress posts
src/pages/index.astro lists each dinosaur, with a description and link to its own page.
Fetching via the API returns an object that includes the properties:
title.rendered- Contains the HTML rendering of the title of the post.
content.rendered- Contains the HTML rendering of the content of the post.
slug- Contains the slug of the post. (This provides the link to the dynamically-generated individual dinosaur pages.)
Using the WordPress API to generate pagesSection titled Using the WordPress API to generate pages
src/pages/dinos/[slug].astro dynamically generates a page for each dinosaur.
Returning embedded resourcesSection titled Returning embedded resources
_embed query parameter instructs the server to return related (embedded) resources.
_embedded['wp:featuredmedia']['0'].media_details.sizes.medium.source_url property is returned, and can be used to display the featured image on each dinosuar page. (Replace
medium with your desired image size.)
Publishing your siteSection titled Publishing your site
To deploy your site visit our deployment guides and follow the instructions for your preferred hosting provider.
Community ResourcesSection titled Community Resources
- Building An Astro Website With WordPress As A Headless CMS by Chris Bongers.
- Building with Astro x WordPress on Ben Holmes’s stream.
- Building a Headless WordPress Site with Astro by Jeff Everhart.
- Astro and WordPress as an API by Darko Bozhinovski.
Production SitesSection titled Production Sites
The following sites use Astro + WordPress in production:
- Soft Hard System by Rafid Muhymin Wafi — source code on GitHub
- Dinos! by Anindo Neel Dutta — source code on GitHub