explaingit

postlight/headless-wp-starter

★ 4,558JavaScriptAudience · developerComplexity · 3/5Setup · moderate

TLDR

A starter kit that connects WordPress as a content backend to a React front end, letting editors use the familiar WordPress admin while developers build the public site in modern JavaScript using either the REST API or GraphQL.

Mindmap

mindmap
  root((Headless WP))
    What it does
      WordPress as backend
      React as frontend
      REST and GraphQL APIs
    Pre-installed plugins
      Advanced Custom Fields
      Custom Post Type UI
      JWT Authentication
    Setup
      Docker required
      Four containers
    Who it is for
      Web developers
      Content teams
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Spin up a headless WordPress site where editors manage content in wp-admin and the public-facing pages are rendered by a React app.

USE CASE 2

Evaluate the REST API vs GraphQL approach to WordPress data fetching by running both included example frontends side by side.

USE CASE 3

Migrate content from an existing WordPress site into this headless setup using the included content-import tooling.

Tech stack

JavaScriptReactWordPressPHPGraphQLDockerMySQL

Getting it running

Difficulty · moderate Time to first run · 30min

Requires Docker and Docker Compose, one command brings up four containers including WordPress, MySQL, and two React frontends.

License details are not described in the explanation, check the repository directly.

In plain English

Headless WordPress Starter is a toolkit created by Postlight that combines WordPress as a content backend with React as the front-end display layer. The idea is to let editors manage content in the familiar WordPress admin interface while the public-facing website is built with modern JavaScript tools instead of traditional WordPress themes. The term "headless" means WordPress is used only for storing and managing content, while its usual visual output is replaced by a completely separate React application. The two are connected via APIs: WordPress exposes its data through its built-in REST API and through GraphQL (a different style of data query language). The starter kit includes both options so a developer can choose which approach fits their project. Setting it up requires Docker, a tool that packages software into isolated containers so it runs the same way on any machine. Running one command brings up four containers: the WordPress backend, a MySQL database, and two sample React frontends (one for each API style). The WordPress admin interface is then available at a local address, and both frontend examples are available at separate local ports for comparison. The starter kit bundles several WordPress plugins pre-configured: Advanced Custom Fields and Custom Post Type UI for adding structured data beyond standard posts, and JWT authentication plugins so users can log in through the React frontend rather than the WordPress login page. It also includes tooling for importing content from an existing WordPress site. Developers can extend both the REST and GraphQL APIs from within the included WordPress theme, or build out the React frontends however they choose. The README includes linting setup instructions for both the PHP backend code and the JavaScript frontend code. This project is a starting point, not a finished product. It is intended for developers building content-driven websites who want WordPress for content management but prefer to write the front end in React.

Copy-paste prompts

Prompt 1
I want to set up a headless WordPress site where editors use wp-admin and the front end is a React app. Walk me through running the postlight/headless-wp-starter with Docker and accessing both the WordPress admin and the React frontend locally.
Prompt 2
Show me how to query WordPress posts in a React component using the GraphQL API from this starter kit, filtering by a custom post type I've added with Custom Post Type UI.
Prompt 3
I have an existing WordPress site and want to import its posts and pages into this headless WordPress starter. How does the included import tooling work?
Prompt 4
Explain how JWT authentication is wired up in this starter kit so users can log in through the React frontend and receive a token that authenticates subsequent API calls.
Open on GitHub → Explain another repo

← postlight on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.