Title: Quick Start Guide for Developers
Published: July 15, 2026
Last modified: July 16, 2026

---

# Quick Start Guide for Developers

## In this article

 * [Embed WordPress on your website](https://developer.wordpress.org/playground/developers/build-an-app/?output_format=md#embed-wordpress-on-your-website)
 * [Control the embedded website](https://developer.wordpress.org/playground/developers/build-an-app/?output_format=md#control-the-embedded-website)
 * [Showcase a plugin or theme from WordPress directory](https://developer.wordpress.org/playground/developers/build-an-app/?output_format=md#showcase-a-plugin-or-theme-from-wordpress-directory)
 * [Showcase any plugin or theme](https://developer.wordpress.org/playground/developers/build-an-app/?output_format=md#showcase-any-plugin-or-theme)
 * [Preview pull requests from your repository](https://developer.wordpress.org/playground/developers/build-an-app/?output_format=md#preview-pull-requests-from-your-repository)
    - [Preview WordPress Core and Gutenberg Branches or PRs](https://developer.wordpress.org/playground/developers/build-an-app/?output_format=md#preview-wordpress-core-and-gutenberg-branches-or-prs)
 * [Build a compatibility testing environment](https://developer.wordpress.org/playground/developers/build-an-app/?output_format=md#build-a-compatibility-testing-environment)
 * [Run PHP code in the browser](https://developer.wordpress.org/playground/developers/build-an-app/?output_format=md#run-php-code-in-the-browser)

[ Back to top](https://developer.wordpress.org/playground/developers/build-an-app/?output_format=md#wp--skip-link--target)

WordPress Playground was created as a programmable tool. Below you’ll find a few
examples of what you can do with it. Each discussed API is described in detail in
the [APIs section](https://developer.wordpress.org/playground/developers/apis/):

## 󠀁[Embed WordPress on your website](https://developer.wordpress.org/playground/developers/build-an-app/?output_format=md#embed-wordpress-on-your-website)󠁿

Playground can be embedded on your website using the HTML `<iframe>` tag as follows:

    ```html
    <iframe src="https://playground.wordpress.net/"></iframe>
    ```

Every visitor will get their own private WordPress instance for free. You can then
customize it using one of the [Playground APIs](https://developer.wordpress.org/playground/developers/apis/).

**Careful with the demo site**

The site at [https://playground.wordpress.net](https://playground.wordpress.net)
is there to support the community, but there are no guarantees it will continue 
to work if the traffic grows significantly.

If you need certain availability, you should [host your own WordPress Playground](https://developer.wordpress.org/playground/developers/architecture/host-your-own-playground).

## 󠀁[Control the embedded website](https://developer.wordpress.org/playground/developers/build-an-app/?output_format=md#control-the-embedded-website)󠁿

WordPress Playground provides three APIs you can use to control the iframed website.
All the examples in this section are built using one of these:

 * [Query API](https://developer.wordpress.org/playground/developers/apis/query-api)
   enable basic operations using only query parameters
 * [Blueprints API](https://developer.wordpress.org/playground/blueprints) give 
   you a great degree of control with a simple JSON file
 * [JavaScript API](https://developer.wordpress.org/playground/developers/apis/javascript-api)
   give you full control via a JavaScript client from an npm package

Learn more about each of these APIs in the [APIs overview section](https://developer.wordpress.org/playground/developers/apis/).

## 󠀁[Showcase a plugin or theme from WordPress directory](https://developer.wordpress.org/playground/developers/build-an-app/?output_format=md#showcase-a-plugin-or-theme-from-wordpress-directory)󠁿

You can install plugins and themes from the WordPress directory with only URL parameters.
This iframe preinstalls the `coblocks` and `friends` plugins and the `pendant` theme.

This is called [Query API](https://developer.wordpress.org/playground/developers/apis/query-api/)
and you can learn more about it [here](https://developer.wordpress.org/playground/developers/apis/query-api/).

    ```html
    <iframe src="https://playground.wordpress.net/?plugin=coblocks"></iframe>
    ```

## 󠀁[Showcase any plugin or theme](https://developer.wordpress.org/playground/developers/build-an-app/?output_format=md#showcase-any-plugin-or-theme)󠁿

What if your plugin is not in the WordPress directory?

You can still showcase it on Playground by using [JSON Blueprints](https://developer.wordpress.org/playground/blueprints).
For example, this Blueprint would download and install a plugin and a theme from
your website and also import some starter content:

    ```language-json
    {
        "steps": [
            {
                "step": "installPlugin",
                "pluginData": {
                    "resource": "url",
                    "url": "https://your-site.com/your-plugin.zip"
                }
            },
            {
                "step": "installTheme",
                "themeData": {
                    "resource": "url",
                    "url": "https://your-site.com/your-theme.zip"
                }
            },
            {
                "step": "importWxr",
                "file": {
                    "resource": "url",
                    "url": "https://your-site.com/starter-content.wxr"
                }
            }
        ]
    }
    ```

See [getting started with Blueprints](https://developer.wordpress.org/playground/blueprints/getting-started)
to learn more.

## 󠀁[Preview pull requests from your repository](https://developer.wordpress.org/playground/developers/build-an-app/?output_format=md#preview-pull-requests-from-your-repository)󠁿

You can preview repository code two ways: directly with `git:directory`, or by pointing
to a `.zip` from your CI pipeline. Here’s the `git:directory` approach using [Blueprints](https://developer.wordpress.org/playground/blueprints):

    ```language-json
    {
        "steps": [
            {
                "step": "installPlugin",
                "pluginData": {
                    "resource": "git:directory",
                    "url": "https://github.com/my-user/my-repo",
                    "ref": "refs/pull/1/head",
                    "refType": "refname"
                },
                "options": {
                    "activate": true
                },
                "progress": {
                    "caption": "Installing plugin from my-user/my-repo PR #1"
                }
            }
        ]
    }
    ```

In the code above, it will install a plugin from a repository located at the `url`,
and the reference to find the branch is `refType`; in this case, it will use `refname`,
but it can also use `branch`, `tag`, and `commit`.

You can automate this process using the [GitHub Action to generate preview links](https://developer.wordpress.org/playground/guides/github-action-pr-preview),
which will help streamline the process.

Loading a `.zip` file is another alternative for previewing your project. See the
[live example of Gutenberg PR previewer](https://playground.wordpress.net/gutenberg.html).

To use Playground as a PR previewer, you need:

 * A CI pipeline that bundles your plugin or theme
 * Public access to the generated `.zip` file

Those zip bundles aren’t any different from regular WordPress Plugins, which means
you can install them in Playground using the [JSON Blueprints](https://developer.wordpress.org/playground/blueprints)
API. Once you expose an endpoint like https://your-site.com/pull-request-1234.zip,
the following Blueprint will do the rest:

    ```language-json
    {
        "steps": [
            {
                "step": "installPlugin",
                "pluginData": {
                    "resource": "url",
                    "url": "https://your-site.com/pull-request-1234.zip"
                }
            }
        ]
    }
    ```

The official Playground demo uses this technique to preview pull requests from the
Gutenberg repository:

    ```language-json
    {
        "landingPage": "/wp-admin/plugins.php?test=42test",
        "steps": [
            {
                "step": "login",
                "username": "admin",
                "password": "password"
            },
            {
                "step": "mkdir",
                "path": "/wordpress/pr"
            },
            {
                "step": "writeFile",
                "path": "/wordpress/pr/pr.zip",
                "data": {
                    "resource": "url",
                    "url": "/plugin-proxy.php?org=WordPress&repo=gutenberg&workflow=Build%20Gutenberg%20Plugin%20Zip&artifact=gutenberg-plugin&pr=60819",
                    "caption": "Downloading Gutenberg PR 47739"
                },
                "progress": {
                    "weight": 2,
                    "caption": "Applying Gutenberg PR 47739"
                }
            },
            {
                "step": "unzip",
                "zipPath": "/wordpress/pr/pr.zip",
                "extractToPath": "/wordpress/pr"
            },
            {
                "step": "installPlugin",
                "pluginData": {
                    "resource": "vfs",
                    "path": "/wordpress/pr/gutenberg.zip"
                }
            }
        ]
    }
    ```

[Try it out!](https://playground.wordpress.net/?mode=seamless#eyJsYW5kaW5nUGFnZSI6Ii93cC1hZG1pbi9wbHVnaW5zLnBocD90ZXN0PTQydGVzdCIsInN0ZXBzIjpbeyJzdGVwIjoibG9naW4iLCJ1c2VybmFtZSI6ImFkbWluIiwicGFzc3dvcmQiOiJwYXNzd29yZCJ9LHsic3RlcCI6Im1rZGlyIiwicGF0aCI6Ii93b3JkcHJlc3MvcHIifSx7InN0ZXAiOiJ3cml0ZUZpbGUiLCJwYXRoIjoiL3dvcmRwcmVzcy9wci9wci56aXAiLCJkYXRhIjp7InJlc291cmNlIjoidXJsIiwidXJsIjoiL3BsdWdpbi1wcm94eS5waHA/b3JnPVdvcmRQcmVzcyZyZXBvPWd1dGVuYmVyZyZ3b3JrZmxvdz1CdWlsZCUyMEd1dGVuYmVyZyUyMFBsdWdpbiUyMFppcCZhcnRpZmFjdD1ndXRlbmJlcmctcGx1Z2luJnByPTYwODE5IiwiY2FwdGlvbiI6IkRvd25sb2FkaW5nIEd1dGVuYmVyZyBQUiA0NzczOSJ9LCJwcm9ncmVzcyI6eyJ3ZWlnaHQiOjIsImNhcHRpb24iOiJBcHBseWluZyBHdXRlbmJlcmcgUFIgNDc3MzkifX0seyJzdGVwIjoidW56aXAiLCJ6aXBQYXRoIjoiL3dvcmRwcmVzcy9wci9wci56aXAiLCJleHRyYWN0VG9QYXRoIjoiL3dvcmRwcmVzcy9wciJ9LHsic3RlcCI6Imluc3RhbGxQbHVnaW4iLCJwbHVnaW5EYXRhIjp7InJlc291cmNlIjoidmZzIiwicGF0aCI6Ii93b3JkcHJlc3MvcHIvZ3V0ZW5iZXJnLnppcCJ9fV19)

### 󠀁[Preview WordPress Core and Gutenberg Branches or PRs](https://developer.wordpress.org/playground/developers/build-an-app/?output_format=md#preview-wordpress-core-and-gutenberg-branches-or-prs)󠁿

You can preview specific pull requests from WordPress Core and Gutenberg repositories
using Query API parameters. Gutenberg branches also have an alternative to preview
them with the parameter `gutenberg-branch`. This is useful for testing the latest
trunk changes or specific feature branches without creating a PR.

 * Preview a specific WordPress Core PR: `https://playground.wordpress.net/?core-
   pr=9500`
 * Preview a specific Gutenberg PR: `https://playground.wordpress.net/?gutenberg-
   pr=73010`
 * Preview the Gutenberg trunk branch: `https://playground.wordpress.net/?gutenberg-
   branch=trunk`

## 󠀁[Build a compatibility testing environment](https://developer.wordpress.org/playground/developers/build-an-app/?output_format=md#build-a-compatibility-testing-environment)󠁿

Test your plugin across PHP and WordPress versions by configuring them in Playground.
This helps you verify compatibility before release.

With the Query API, you’d simply add the `php` and `wp` query parameters to the 
URL:

    ```html
    <iframe src="https://playground.wordpress.net/?php=8.3&wp=6.1"></iframe>
    ```

With JSON Blueprints, you’d use the `preferredVersions` property:

    ```language-json
    {
        "preferredVersions": {
            "php": "8.3",
            "wp": "6.1"
        }
    }
    ```

## 󠀁[Run PHP code in the browser](https://developer.wordpress.org/playground/developers/build-an-app/?output_format=md#run-php-code-in-the-browser)󠁿

The JavaScript API provides the `run()` method which you can use to run PHP code
in the browser:

    ```html
    <iframe id="wp"></iframe>
    <script type="module">
        const client = await startPlaygroundWeb({
            iframe: document.getElementById('wp'),
            remoteUrl: 'https://playground.wordpress.net/remote.html',
        });
        await client.isReady;
        await client.run({
            code: `<?php
            require("/wordpress/wp-load.php");

            update_option("blogname", "Playground is really cool!");
            echo "Site title updated!";
            `,
        });
        client.goTo('/');
    </script>
    ```

Combine that with a code editor like Monaco or CodeMirror, and you’ll get live code
snippets like in [this article](https://adamadam.blog/2023/02/16/how-to-modify-html-in-a-php-wordpress-plugin-using-the-new-tag-processor-api/)!

First published

July 15, 2026

Last updated

July 16, 2026

Edit article

[ Improve it on GitHub: Quick Start Guide for Developers ](https://raw.githubusercontent.com/WordPress/wordpress-playground/trunk/packages/docs/site/docs/developers/03-build-an-app/01-index.md)

Changelog

[ See list of changes: Quick Start Guide for Developers ](https://developer.wordpress.org/playground/developers/build-an-app/?output_format=md#)

[  Previous: Developers Docs](https://developer.wordpress.org/playground/developers/)

[  Next: Local Development](https://developer.wordpress.org/playground/developers/local-development/)