Blueprints Examples

tip

Check the Blueprints Gallery to explore real-world code examples of using WordPress Playground to launch a WordPress site with a variety of setups.

Let's see some cool things you can do with Blueprints.

Install a Theme and a Plugin

{
	"steps": [
		{
			"step": "installPlugin",
			"pluginData": {
				"resource": "wordpress.org/plugins",
				"slug": "coblocks"
			}
		},
		{
			"step": "installTheme",
			"themeData": {
				"resource": "wordpress.org/themes",
				"slug": "pendant"
			}
		}
	]
}

The `meta` object

The optional meta object provides descriptive information about your Blueprint. While it doesn't affect how the Blueprint executes, this information is crucial for display purposes in galleries, Blueprint selectors, and integrated tools like WordPress Studio and Blueprints Gallery.

Properties

Field	Type	Description
`title`	`string`	A short, human-readable name for the Blueprint.
`description`	`string`	A brief summary explaining the setup.
`author`	`string`	The name or handle of the creator.
`categories`	`array<string>`	Tags used for filtering and grouping Blueprints.

{
	"$schema": "https://playground.wordpress.net/blueprint-schema.json",
	"meta": {
		"title": "Default Playground Setup",
		"description": "A basic setup for a new WordPress site with the latest versions.",
		"author": "Playground Team",
		"categories": ["starter", "default"]
	},
	"landingPage": "/wp-admin/",
	"preferredVersions": {
		"php": "8.3",
		"wp": "latest"
	}
}

Run custom PHP code

{
"steps": [
	{
		"step": "runPHP",
		"code": "<?php require_once '/wordpress/wp-load.php'; wp_insert_post(array( 'post_title' => 'Post title', 'post_content' => 'Post content', 'post_status' => 'publish', 'post_author' => 1 )); "
	}
]
}

Enable an option on the Gutenberg Experiments page

Here: Switch on the "new admin views" feature.

{
"steps": [
	{
		"step": "runPHP",
		"code": "<?php require '/wordpress/wp-load.php'; update_option( 'gutenberg-experiments', array( 'gutenberg-dataviews' => true ) );"
	}
]
}

How to work with WP-CLI from the terminal and Playground

You can run WP-CLI commands on a Playground instance either from your terminal or directly within a Blueprint.

To use your terminal, you must first mount the /wordpress/ directory and ensure the SQLite database integration is configured. This is because Playground's internal database doesn't persist on a mounted site, so you must explicitly install the database plugin via a Blueprint. This allows WP-CLI to recognize the WordPress installation and connect to its database.

note

If you run WP-CLI commands as steps within your Blueprint file, this manual setup is not needed.

The following Blueprint snippet handles this setup:

{
	"plugins": [
		"sqlite-database-integration"
	]
}

For a detailed explanation of why this is needed, refer to the Troubleshoot and Debug Blueprints section.

Showcase a product demo

{
	"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"
			}
		},
		{
			"step": "setSiteOptions",
			"options": {
				"some_required_option_1": "your_favorite_values",
				"some_required_option_2": "your_favorite_values"
			}
		}
	]
}

Enable networking

{
	"landingPage": "/wp-admin/plugin-install.php",
	"features": {
		"networking": true
	},
	"steps": [
		{
			"step": "login"
		}
	]
}

Load PHP code on every request (mu-plugin)

Use the writeFile step to add code to a mu-plugin that runs on every request.

{
	"landingPage": "/category/uncategorized/",
	"features": {
		"networking": true
	},
	"steps": [
		{
			"step": "login"
		},
		{
			"step": "writeFile",
			"path": "/wordpress/wp-content/mu-plugins/rewrite.php",
			"data": "<?php add_action( 'after_setup_theme', function() { global $wp_rewrite; $wp_rewrite->set_permalink_structure('/%postname%/'); $wp_rewrite->flush_rules(); } );"
		}
	]
}

Code editor (as a Gutenberg block)

{
	"landingPage": "/wp-admin/post.php?post=4&action=edit",
	"steps": [
		{
			"step": "login",
			"username": "admin",
			"password": "password"
		},
		{
			"step": "installPlugin",
			"pluginData": {
				"resource": "wordpress.org/plugins",
				"slug": "interactive-code-block"
			}
		},
		{
			"step": "runPHP",
			"code": "<?php require '/wordpress/wp-load.php'; wp_insert_post(['post_title' => 'WordPress Playground block demo!','post_content' => '<!-- wp:wordpress-playground/playground /-->', 'post_status' => 'publish', 'post_type' => 'post',]);"
		}
	]
}

You can share your own Blueprint examples in this dedicated wiki.

Load an older WordPress version

Playground only ships with a few recent WordPress releases. If you need to use an older version, this Blueprint can help you: change the version number in "url": "https://playground.wordpress.net/plugin-proxy.php?url=https://wordpress.org/wordpress-6.2.1.zip" from 6.2.1 to the release you want to load.

Note: the oldest supported WordPress version is 6.2.1, following the SQLite integration plugin.

{
	"landingPage": "/wp-admin",
	"preferredVersions": {
		"wp": "https://playground.wordpress.net/plugin-proxy.php?url=https://wordpress.org/wordpress-6.2.1.zip",
		"php": "8.3"
	},
	"features": {
		"networking": true
	},
	"steps": [
		{
			"step": "login",
			"username": "admin",
			"password": "password"
		}
	]
}

Run WordPress from trunk or a specific commit.

WordPress Playground can run trunk (the latest commit), the HEAD of a specific branch or a specific commit from the WordPress/WordPress GitHub repository.

You can specify the reference in "url": "https://playground.wordpress.net/plugin-proxy.php?build-ref=trunk".

To specify the latest commit of a particular branch, you can change the reference to the branch version number, eg 6.6. To run a specific commit, you can use the commit hash from WordPress/WordPress, eg 7d7a52367dee9925337e7d901886c2e9b21f70b6.

Note: the oldest supported WordPress version is 6.2.1, following the SQLite integration plugin.

{
	"landingPage": "/wp-admin",
	"login": true,
	"preferredVersions": {
		"php": "8.3",
		"wp": "https://playground.wordpress.net/plugin-proxy.php?build-ref=trunk"
	}
}

Using Blueprint Bundles

Here's an example of a Blueprint that uses bundled resources from a Blueprint bundle:

{
	"landingPage": "/",
	"preferredVersions": {
		"php": "8.3",
		"wp": "latest"
	},
	"steps": [
		{
			"step": "installTheme",
			"themeData": {
				"resource": "bundled",
				"path": "/my-theme.zip"
			},
			"activate": true
		},
		{
			"step": "installPlugin",
			"pluginData": {
				"resource": "bundled",
				"path": "/my-plugin.zip"
			},
			"activate": true
		},
		{
			"step": "writeFile",
			"path": "/wordpress/custom-page.html",
			"data": {
				"resource": "bundled",
				"path": "/assets/custom-page.html"
			}
		}
	]
}

This Blueprint bundle would be zip file containing the following files:

/blueprint.json - The blueprint declaration outlined above
/my-theme.zip - A theme package
/my-plugin.zip - A plugin package
/assets/custom-page.html - A custom HTML file

You can use this Blueprint bundle by:

Creating a ZIP file with these files and the blueprint.json
Hosting the ZIP file on a server
Loading it with ?blueprint-url=https://example.com/my-blueprint-bundle.zip

For more information on Blueprint bundles, see the Blueprint Bundles documentation.

Install a Theme and a Plugin​

The meta object​

Properties​

Run custom PHP code​

Enable an option on the Gutenberg Experiments page​

How to work with WP-CLI from the terminal and Playground​

Showcase a product demo​

Enable networking​

Load PHP code on every request (mu-plugin)​

Code editor (as a Gutenberg block)​

Load an older WordPress version​

Run WordPress from trunk or a specific commit.​

Using Blueprint Bundles​