How to Build a WordPress Theme in WordPress Playground

[karthick-murugan]

Fixes #1257

This PR adds a new documentation page that explains how to build a WordPress theme using WordPress Playground. The guide is aimed at theme developers and contributors looking for a fast, browser-based workflow to build, test, and share themes without needing a local setup.

✅ What’s Included

• How to create a new Playground site (locally or in the browser)
• How to preinstall development tools like Create Block Theme, Gutenberg, and Theme Check
• Detailed steps to:
  • 🚀 Install a starter theme (via GitHub or ZIP)
  • 📥 Import demo content
  • 🔧 Build and customize using block tools
  • 📤 Export themes (ZIP & GitHub)
  • 🔁 Re-import/export for review and iteration
  • 🌐 Load themes from GitHub pull requests

[bgrgicak]

Let's use Playground CLI in examples because that's the tool we are focused on.

[bgrgicak]

How does this docs page fit in with the existing theme development section?

[karthick-murugan]

How does this docs page fit in with the existing theme development section?

@bgrgicak May be we can enhance the theme development section with our new page content? More insights will be helpful

[bgrgicak]

This could become a Block theme development using the Playground Website section on the existing page.

Regarding the content you created, you were precise in explaining how to configure Playground, which is nice and makes it clear for the user. With Playground, we can take it a step further and replace these setup instructions with a Playground link that contains a Blueprint, so users can have a Playground ready to go in one click. 🙂

[karthick-murugan]

This could become a Block theme development using the Playground Website section on the existing page.

Regarding the content you created, you were precise in explaining how to configure Playground, which is nice and makes it clear for the user. With Playground, we can take it a step further and replace these setup instructions with a Playground link that contains a Blueprint, so users can have a Playground ready to go in one click. 🙂

Out of the 8 steps which I have added, what are all the points that can be removed and replaced?

Also adding this json link ( https://playground.wordpress.net/?blueprint=https%3A%2F%2Fgithub.com%2Fwordpress%2Fblueprints%2Fblob%2Ftrunk%2Fblueprints%2Fcreate-block-theme%2Fblueprint.json ) to playground does not activate the "create block theme" in playground. What mistake i am doing here?

cc @bph

[bph]

Also adding this json link ( https://playground.wordpress.net/?blueprint=https%3A%2F%2Fgithub.com%2Fwordpress%2Fblueprints%2Fblob%2Ftrunk%2Fblueprints%2Fcreate-block-theme%2Fblueprint.json ) to playground does not activate the "create block theme" in playground. What mistake i am doing here?

@karthick-murugan two things:

• The query parameter is blueprint-url
• you need to use raw.gihubusercontent.com to reference a blueprint.json file on GitHub (see CORS Error when using ?blueprint-url reference to github.com #2148)

https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/blueprints/refs/heads/trunk/blueprints/create-block-theme/blueprint.json

Will work. Try it