WordPress Development Without a Computer

You’re on the train, scrolling through your WordPress site on your phone, and you see an issue that you’d like to fix, for example improvement to the mobile view. Normally you’d make a (mental) note and deal with it when you’re back at your computer.

But what if you could just fix it right there?

With AI coding assistants that run in the browser—like Claude Code, OpenAI Codex, GitHub Copilot Workspace, or similar tools—combined with WordPress Playground for testing, you can now do WordPress plugin development without a computer.

What It Looks Like

AI: I’ve implemented the fix for you, committed and pushed it to Github. Use this link to Test it in WordPress Playground.

This link above just leads to a generic Playground but to give you an idea of the workflow: The AI helps you fix or implement what you asked for and makes the code available in a branch. You’ll then run/view it via Playground. Here’s how to set this up:

What You Need

  • Your plugin or theme in a GitHub repository,
  • A web AI coding assistant,
  • A way to tell the AI how to generate Playground test links that you can click.

The third part is where the Playground Step Library comes in.

Step 1: Create Your Blueprint

WordPress Playground uses blueprints: JSON configurations that describe what to install and how to set things up. You can install plugins, themes, configure settings, import content, and more. Writing these by hand is a little cumbersome, so I built the Step Library as a visual tool to assemble blueprints step by step.

The Step Library also provides more steps than Playground offers natively: that’s where the name comes from. It compiles these custom steps into the native steps that Playground understands. The native steps are powerful but require you to know how to combine them in clever ways; the Step Library’s custom steps make it easier. Examples include addProduct for WooCommerce, addTemplatePart for block themes, a debug step to enable common debug settings and plugins, or disableWelcomeGuides.

Use this special link to the Step Library to start with an “Install Plugin” step. Paste your HTTPS GitHub repository URL. If you want to test a specific branch, add /tree/branch-name to the URL—but for now, just use your main branch. We’ll make the branch dynamic later.

Add any other steps your testing environment needs: maybe WooCommerce if your plugin integrates with it, or some test content, or specific WordPress settings.

Step 2: Generate AI Instructions

Once your blueprint is ready, open the “Copy/Share” dropdown and select “Generate AI Instructions”. This creates a markdown snippet you can add to your project’s CLAUDE.md, .github/copilot-instructions.md, or similar AI instruction file:

The generated instructions tell the AI to include a Playground testing link at the end of its responses. The branch name in your URL gets replaced with a BRANCH_NAME placeholder, so the AI knows to substitute the actual branch it’s working on.

Step 3: Add to Your Repository

Copy the generated markdown and add it to your AI instruction file. Commit it to your repository. Now any AI assistant that reads these instructions will include Playground links when it makes changes to your code.

Bonus: you can also instruct your coding assistant to add such a file to your repo!

The Workflow

Here’s what this looks like in practice:

  1. Open your AI coding assistant on your phone (or desktop),
  2. Connect to your GitHub repository,
  3. Describe what you want to change or fix,
  4. The AI makes the changes and pushes a branch,
  5. Tap the Playground link in the response,
  6. Test the changes in Playground—if it’s a private repo, you’ll authenticate with GitHub here,
  7. If it works, create a PR and merge it—you got to test before even opening the PR.

It’s a complete development loop. The AI handles the code, GitHub handles version control, and Playground handles testing. Your phone is just the interface tying it all together.

Private Repositories

Until recently, this workflow only worked with public GitHub repositories. I submitted a PR to WordPress Playground that adds GitHub OAuth authentication. Now when you load a plugin from a private repository, Playground prompts you to authenticate, and then it works just like public repos.

Beyond Mobile: Preconfigured Test Environments

The mobile workflow is a fun demo, but the same setup is useful on desktop too. The real power is in the preconfigured Playground environments through blueprints (which you can easily create with the Step Library).

Say your plugin integrates with WooCommerce. You can create a blueprint that installs WooCommerce, sets up a test product, and installs your plugin from the current branch. Now every Playground link the AI generates loads an environment where you can actually test the integration—not just whether your plugin activates without errors.

Or you want to test across different configurations: multisite vs single site, classic editor vs block editor, different PHP versions. Create a blueprint for each scenario, generate AI instructions for each, and you have a test matrix that’s one click away.

GitHub Actions

You can take this further with a GitHub Action that posts a Playground link “Try it in Playground” as a comment on every PR. That way anyone reviewing the PR can test the changes without setting up a local environment.

The Step Library is available as an npm package, so you can integrate it into your own tooling and CI pipelines.

Let AI Create Blueprints for You

Something often overlooked: the Step Library is also useful for getting AI to help you create blueprints in the first place. The native Playground steps are low-level—things like writeFile and runPHP—so AI assistants often don’t grasp what’s actually possible with blueprints. The Step Library’s high-level steps are more intuitive, and with a JSON schema that describes them, AI can easily understand what’s available and generate useful blueprints.

Other New Step Library Features

Some notable other things I added recently:

wp-env.json import: Drop your .wp-env.json into the Step Library and it converts your local dev environment config into a Playground blueprint.

GitLab, Bitbucket, and Codeberg support: Not everyone uses GitHub. The Step Library now recognizes repository URLs from these platforms.

Paste detection: Paste a plugin URL, some PHP code, or even an existing Playground URL, and the Step Library figures out what it is and creates the right steps.

Try It

The Playground Step Library is where you can create your blueprint and generate AI instructions.

I’ve found myself using this on the train, in waiting rooms, wherever I have a few minutes and an idea I want to try. It’s not how I imagined WordPress development would work, but it does.

npm install playground-step-library

I have updated my Playground Step Library (which I had written about before)–the tool that allows you to use more advanced steps in WordPress Playground–so that it can now also be used programmatically: It is now an npm package: playground-step-library.

Behind the scenes this actually dominoed into migrating it to TypeScript and restructuring the code so that it now both powers the Web UI and the npm package.

Having those custom steps available now makes even more sense that the Playground CLI is production ready and you can use it for things like testing your WordPress plugin with Playwright, see this presentation Building Automated Tests with WordPress Playground from WordCamp Europe 2025 by my colleague Berislav “Bero” Grigicak.

In this example you can see a blueprint JSON that contains steps setSiteName and addPage that don’t exist in the library of steps of Playground. At the time of writing there are 36 custom steps with the goal of making it easier to do things that can be done with a blueprint already but need some complexity. See in the example below how creating a page can be done with runPHP and wp_insert_post but it’s visually easier with a step addPage.

import PlaygroundStepLibrary from 'playground-step-library';
const compiler = new PlaygroundStepLibrary();

const blueprint = {
    steps: [
        {
            step: 'setSiteName',
            sitename: 'My Site',
            tagline: 'A WordPress Playground demo'
        },
        {
            step: 'addPage',
            title: 'Welcome',
            content: '<p>Welcome to my site!</p>'
        }
    ]
};

const compiledBlueprint = compiler.compile(blueprint);
console.log(compiledBlueprint);

Which turns this into a valid blueprint:

{
  "steps": [
    {
      "step": "setSiteOptions",
      "options": {
        "blogname": "My Site",
        "blogdescription": "A WordPress Playground demo"
      }
    },
    {
      "step": "runPHP",
      "code": "\n<?php require_once '/wordpress/wp-load.php';\n$page_args = array(\n\t'post_type'    => 'page',\n\t'post_status'  => 'publish',\n\t'post_title'   => 'Welcome',\n\t'post_content' => '<p>Welcome to my site!</p>',\n);\n$page_id = wp_insert_post( $page_args );"
    }
  ]
}

You can then pass this blueprint to playground CLI to run it (see other demos by my colleague Fellyph):

import { runCLI, RunCLIServer } from '@wp-playground/cli';
await runCLI({
  command: 'server',
  login: true,
  blueprint: compiledBlueprint
});

You can also conveniently try it out in WordPress Playground with this link (and also view in the Step Library UI).

Finally, in the repo there are a number of examples that you can browse and I created a little screen recording of a few of them:

Happy coding!