From a826525ec93e7738acae946039d8c7a757ee928a Mon Sep 17 00:00:00 2001 From: karthick-murugan Date: Thu, 17 Apr 2025 18:14:26 +0530 Subject: [PATCH 1/2] how to create a theme using playground --- .../how-to-create-a-theme-using-playground.md | 164 ++++++++++++++++++ packages/docs/site/sidebars.js | 1 + 2 files changed, 165 insertions(+) create mode 100644 packages/docs/site/docs/main/how-to-create-a-theme-using-playground.md diff --git a/packages/docs/site/docs/main/how-to-create-a-theme-using-playground.md b/packages/docs/site/docs/main/how-to-create-a-theme-using-playground.md new file mode 100644 index 0000000000..899507cd7f --- /dev/null +++ b/packages/docs/site/docs/main/how-to-create-a-theme-using-playground.md @@ -0,0 +1,164 @@ +--- +title: Build a WordPress Theme +slug: /how-to-create-a-theme-using-playground +--- + +import ThisIsQueryApi from '@site/docs/\_fragments/\_this_is_query_api.md'; + +# How to Build a WordPress Theme in WordPress Playground + +WordPress Playground is a powerful tool that lets you build, preview, and export WordPress themesβ€”all in your browser or locally via `wp-now`. + +This guide walks you through the process step-by-step. + +--- + +## πŸš€ 1. Creating a New Site + +### In the Browser + +1. Go to [https://playground.wordpress.net](https://playground.wordpress.net) +2. Click **"Create New Site"** +3. Choose WordPress and PHP versions if needed +4. Click **"Launch"** + +### Locally with `wp-now` + +1. Install `wp-now`: + + ```bash + npm create wp-now@latest + ``` + +2. Navigate to your theme folder and run: + + ```bash + wp-now + ``` + +3. Access the local site at: + + ``` + http://localhost:8888 + ``` + +--- + +## 🧰 2. Preinstall Theme-Building Tools + +Install the following plugins for theme development: + +- [Create Block Theme](https://wordpress.org/plugins/create-block-theme/) +- [Gutenberg](https://wordpress.org/plugins/gutenberg/) +- [Theme Check](https://wordpress.org/plugins/theme-check/) + +### Install via WP Admin + +Navigate to: + +**Plugins > Add New > Search > Install > Activate** + +### Or install via WP-CLI + +```bash +wp plugin install create-block-theme gutenberg theme-check --activate +``` + +## 🎨 3. Install a Starter Theme + +Starter themes give you a foundation to begin building your WordPress theme. There are several ways to load a starter theme in Playground: + +### 🧩 Option 1: Install from GitHub + +You can load a GitHub-hosted theme directly in WordPress Playground using a URL parameter. + +**Format:** + +?theme=https://github.com/username/repository/archive/refs/heads/main.zip + +**Example:** + +https://playground.wordpress.net/?theme=https://github.com/WordPress/block-canvas/archive/refs/heads/trunk.zip + +This loads the [Block Canvas](https://github.com/WordPress/block-canvas) theme directly into Playground for development and customization. + +### πŸ“¦ Option 2: Upload from ZIP + +You can also upload a ZIP file of your starter theme manually: + +1. Go to **Appearance > Themes > Add New > Upload Theme** +2. Click **Choose File** and select your `.zip` theme file +3. Click **Install Now** +4. Once installed, click **Activate** + +--- + +## πŸ§ͺ 4. Import Demo Content + +To design and test your theme effectively, you may want to load demo content such as pages, posts, and media. + +1. Navigate to **Tools > Import** +2. Select the **WordPress** importer +3. Upload a `.xml` export file containing demo content (e.g., from [wpexport.lxml](https://wordpress.org/plugins/wordpress-importer/)) +4. Follow the prompts to assign authors and import attachments + +--- + +## πŸ”§ 5. Build and Customize the Theme + +Once your starter theme and demo content are loaded: + +- Use **Site Editor** to modify templates and template parts (Appearance > Editor) +- Create or customize blocks using the **Block Editor** +- Activate plugins like: + - [Create Block Theme](https://wordpress.org/plugins/create-block-theme/) + - [Gutenberg](https://wordpress.org/plugins/gutenberg/) + - [Theme Check](https://wordpress.org/plugins/theme-check/) + +These tools help you iterate and ensure theme standards. + +--- + +## πŸ“€ 6. Export Your Theme + +Once your theme is ready, you can export it: + +### πŸ—œοΈ Export as ZIP + +1. Use the **Create Block Theme** plugin +2. Go to **Appearance > Create Block Theme** +3. Select **Export** and download the `.zip` of your custom theme + +### πŸ”— Export to GitHub + +For advanced workflows: + +1. Use the Playground query API to clone from a GitHub repo and push back changes +2. Or export the theme zip and upload to your GitHub repository manually + +--- + +## βœ… 7. Review and Adjust the Theme + +You can import your saved or exported theme back into Playground anytime: + +- Use the `?theme=URL_TO_ZIP` parameter +- Or manually upload from **Appearance > Themes** + +This allows for peer reviews or continued development. + +--- + +## πŸ“₯ 8. Import from a GitHub Pull Request + +You can even test themes from a specific pull request: + +**Format:** + +?theme=https://github.com/username/repository/compare/feature-branch.zip + +Or use GitHub actions to create a ZIP from a PR and link it in Playground. + +--- + +With these steps, you can fully design, test, and share WordPress themes within WordPress Playground β€” without needing a local development environment. diff --git a/packages/docs/site/sidebars.js b/packages/docs/site/sidebars.js index bbd6943856..49a956b87f 100644 --- a/packages/docs/site/sidebars.js +++ b/packages/docs/site/sidebars.js @@ -23,6 +23,7 @@ const sidebars = { items: [ 'main/quick-start-guide', 'main/web-instance', + 'main/how-to-create-a-theme-using-playground', { type: 'category', label: 'About Playground', From 5554f702e889863d9b09c61fbe47ad7bf8cad4ed Mon Sep 17 00:00:00 2001 From: karthickmurugan2911 Date: Wed, 7 May 2025 15:56:00 +0530 Subject: [PATCH 2/2] Feedback updates --- .../how-to-create-a-theme-using-playground.md | 30 ++++++++----------- 1 file changed, 13 insertions(+), 17 deletions(-) diff --git a/packages/docs/site/docs/main/how-to-create-a-theme-using-playground.md b/packages/docs/site/docs/main/how-to-create-a-theme-using-playground.md index 899507cd7f..3a8b6611c6 100644 --- a/packages/docs/site/docs/main/how-to-create-a-theme-using-playground.md +++ b/packages/docs/site/docs/main/how-to-create-a-theme-using-playground.md @@ -52,6 +52,8 @@ Install the following plugins for theme development: - [Gutenberg](https://wordpress.org/plugins/gutenberg/) - [Theme Check](https://wordpress.org/plugins/theme-check/) +Directly use playground links to load plugins: https://playground.wordpress.net/#%7B%22plugins%22:%5B%22hello-dolly%22,%22gutenberg%22%5D,%20%22login%22:%20true,%20%22landingPage%22:%20%22/wp-admin/plugins.php%22%20%7D + ### Install via WP Admin Navigate to: @@ -72,15 +74,10 @@ Starter themes give you a foundation to begin building your WordPress theme. The You can load a GitHub-hosted theme directly in WordPress Playground using a URL parameter. -**Format:** - -?theme=https://github.com/username/repository/archive/refs/heads/main.zip - **Example:** -https://playground.wordpress.net/?theme=https://github.com/WordPress/block-canvas/archive/refs/heads/trunk.zip +https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/blueprints/refs/heads/trunk/blueprints/install-activate-setup-theme-from-gh-repo/blueprint.json -This loads the [Block Canvas](https://github.com/WordPress/block-canvas) theme directly into Playground for development and customization. ### πŸ“¦ Option 2: Upload from ZIP @@ -138,26 +135,25 @@ For advanced workflows: --- -## βœ… 7. Review and Adjust the Theme +## πŸ“₯ 7. Import from a GitHub Pull Request -You can import your saved or exported theme back into Playground anytime: +You can even test themes from a specific pull request: + +**Format:** -- Use the `?theme=URL_TO_ZIP` parameter -- Or manually upload from **Appearance > Themes** +?theme=https://github.com/username/repository/compare/feature-branch.zip -This allows for peer reviews or continued development. +Or use GitHub actions to create a ZIP from a PR and link it in Playground. --- -## πŸ“₯ 8. Import from a GitHub Pull Request +## πŸ”· Blueprint URL for Creating a Block Theme -You can even test themes from a specific pull request: +You can quickly create a block theme in Playground by using a blueprint URL. For example, opening the URL below automatically loads the blueprint for a block theme: -**Format:** +https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/blueprints/refs/heads/trunk/blueprints/create-block-theme/blueprint.json -?theme=https://github.com/username/repository/compare/feature-branch.zip - -Or use GitHub actions to create a ZIP from a PR and link it in Playground. +Simply paste this URL into your browser or use it when launching a new site in Playground to get started with a preconfigured block theme setup. ---