wp-playground
WordPress Playground
When to use
- Spin up a disposable WordPress to test a plugin/theme without full stack setup
- Run or iterate on Playground Blueprints (JSON) locally
- Build a reproducible snapshot for sharing or CI
- Switch WP/PHP versions quickly to reproduce issues
- Debug plugin/theme code with Xdebug in isolation
Inputs required
- Node.js 20.18+ (
node -v) - Project path to mount
- Desired WP version/PHP version (optional)
- Blueprint location if using one
- Port preference (default 9400)
Procedure
1) Quick local spin-up
cd /path/to/your-plugin-or-theme
npx @wp-playground/cli@latest server --auto-mount
Opens on http://localhost:9400. Auto-detects and installs plugin/theme.
Common options:
# Specify WP version
npx @wp-playground/cli@latest server --auto-mount --wp=6.9
# Specify PHP version
npx @wp-playground/cli@latest server --auto-mount --php=8.2
# Change port
npx @wp-playground/cli@latest server --auto-mount --port=9500
2) Manual mounts
For complex setups:
npx @wp-playground/cli@latest server \
--mount=/path/to/plugin:/wordpress/wp-content/plugins/my-plugin \
--mount=/path/to/theme:/wordpress/wp-content/themes/my-theme
3) Run a Blueprint
Blueprints define site setup in JSON:
# Run from local file
npx @wp-playground/cli@latest run-blueprint --blueprint=./my-blueprint.json
# Run from URL
npx @wp-playground/cli@latest run-blueprint --blueprint=https://example.com/blueprint.json
Example blueprint.json:
{
"landingPage": "/wp-admin/",
"preferredVersions": {
"php": "8.2",
"wp": "6.9"
},
"steps": [
{
"step": "login",
"username": "admin",
"password": "password"
},
{
"step": "installPlugin",
"pluginZipFile": {
"resource": "url",
"url": "https://downloads.wordpress.org/plugin/query-monitor.zip"
}
},
{
"step": "activatePlugin",
"pluginPath": "query-monitor/query-monitor.php"
}
]
}
4) Build a snapshot
Create shareable ZIP:
npx @wp-playground/cli@latest build-snapshot \
--blueprint=./setup.json \
--outfile=./my-site.zip
5) Debug with Xdebug
npx @wp-playground/cli@latest server --auto-mount --xdebug
Connect your IDE (VS Code/PhpStorm) to the port shown in output.
6) Browser-only workflows
No CLI needed:
- Quick preview:
https://playground.wordpress.net/ - With blueprint:
https://playground.wordpress.net/?blueprint-url=YOUR_JSON_URL - Blueprint editor: Use the live editor at playground.wordpress.net
7) Version testing matrix
Test across versions:
# Test on WP 6.8
npx @wp-playground/cli@latest server --auto-mount --wp=6.8
# Test on WP 6.9
npx @wp-playground/cli@latest server --auto-mount --wp=6.9
# Test on PHP 8.1
npx @wp-playground/cli@latest server --auto-mount --php=8.1
Verification
- Plugin/theme appears in admin and is active
- For blueprints: re-run with
--verbosity=debugto confirm steps executed - Test the specific functionality you're debugging
Failure modes / debugging
CLI exits complaining about Node:
- Upgrade to Node.js 20.18+
Mount not applied:
- Use absolute paths
- Add
--verbosity=debug
Blueprint cannot read local assets:
- Add
--blueprint-may-read-adjacent-files
Port already used:
- Change with
--port=9500
Slow/locked UI:
- Try disabling or enabling
--experimental-multi-worker
Limitations
Playground uses WebAssembly + SQLite, so:
- No MySQL (uses SQLite)
- Some PHP extensions may not work
- Not suitable for production data
Escalation
If PHP extensions or native DB access are required:
- Fall back to wp-env, Docker, or Local
Consult:
More from vapvarun/claude-backup
php
Modern PHP development best practices including PHP 8.x features, OOP patterns, error handling, security, testing, and performance optimization. Use when writing PHP code, reviewing PHP projects, debugging PHP issues, or implementing PHP features outside of WordPress/Laravel specific contexts.
45marketing
Create comprehensive marketing content for themes, plugins, and web products. Generates organized folder structure with product descriptions, feature highlights, social media posts, email campaigns, video scripts, sales materials, and brand assets. Use when creating promotional content, announcements, or sales copy.
11seo-optimization
Optimize websites for search engines including on-page SEO, technical SEO, meta tags, schema markup, Core Web Vitals, and keyword optimization. Use when improving search rankings, auditing SEO, or optimizing content for Google.
11frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
11wp-theme-development
WordPress theme development best practices and standards. Use when building new themes, creating custom templates, implementing theme features, working with template hierarchy, customizer options, or FSE block themes, or when user mentions "theme development", "child theme", "template hierarchy", "theme.json", "customizer", "template parts", "block theme", "classic theme", or "theme standards".
10css-styling
Write modern, maintainable CSS using best practices for layouts, responsive design, animations, and CSS architecture. Use when styling websites, fixing CSS issues, or implementing designs.
10