Providing content for your demo with Playground
One of the things you may want to do to provide a good demo with WordPress Playground is to load default content to better highlight the features of your plugin or theme. This default content may include images or other assets.
There are several blueprint steps and strategies you can use to import content (or generate it) in the Playground instance:
importWxr
With the importWxr step, you can import your own content via a .xml file previously exported from an existing WordPress installation:
"steps": [
...,
{
"step": "importWxr",
"file": {
"resource": "url",
"url": "https://raw.githubusercontent.com/WordPress/blueprints/trunk/blueprints/install-activate-setup-theme-from-gh-repo/blueprint-content.xml"
}
},
...
]
Run Blueprint See blueprint.json
To include images in your imported content, a good approach is to upload the images to your GitHub repo and search/replace the path for them in the exported .xml file using the URL format: https://raw.githubusercontent.com/{repo}/{branch}/{image_path}.
<!-- wp:image {"lightbox":{"enabled":false},"id":4751,"width":"78px","sizeSlug":"full","linkDestination":"none","align":"center","className":"no-border"} -->
<figure class="wp-block-image aligncenter size-full is-resized no-border">
<img src="https://raw.githubusercontent.com/WordPress/blueprints/trunk/blueprints/install-activate-setup-theme-from-gh-repo/images/avatars.png" alt="" class="wp-image-4751" style="width:78px" />
</figure>
<!-- /wp:image -->
It is recommended to upload your exported .xml file and any referenced assets (such as images) to the same directory as your blueprint.json in your GitHub repository.
importWordPressFiles
With the importWordPressFiles step, you can import your own top-level WordPress files from a given .zip file into the instance's root folder. For example, if a .zip file contains the wp-content and wp-includes directories, they will replace the corresponding directories in Playground's root folder.
This zip file can be created from any Playground instance with the "Download as zip" option in the Playground Options Menu.
You can prepare a demo for your WordPress theme or plugin (including images and other assets) in a Playground instance and then export a snapshot of that demo into a .zip file. This file can be imported later using the importWordPressFiles step.
{
"landingPage": "/",
"login": true,
"steps": [
{
"step": "importWordPressFiles",
"wordPressFilesZip": {
"resource": "url",
"url": "https://raw.githubusercontent.com/adamziel/playground-sites/main/playground-for-site-builders/playground.zip"
}
}
]
}
importThemeStarterContent
Some themes have starter content that can be published to highlight the features of a theme.
With the importThemeStarterContent step you can publish the starter content of any theme even if that theme is not the one activated in the Playground instance.
"steps": [
{
"step": "installTheme",
"themeData": {
"resource": "wordpress.org/themes",
"slug": "twentytwenty"
}
},
{
"step": "installTheme",
"themeData": {
"resource": "wordpress.org/themes",
"slug": "twentytwentyone"
},
"options": {
"activate": true
}
},
{
"step": "importThemeStarterContent",
"themeSlug": "twentytwenty"
}
]
You can also publish the starter content of a theme when installing it with the installTheme step by setting to true its importStarterContent option:
{
"steps": [
{
"step": "installTheme",
"themeData": {
"resource": "wordpress.org/themes",
"slug": "twentytwenty"
},
"options": {
"activate": true,
"importStarterContent": true
}
}
]
}
wp-cli
Another way of generating content for your theme or plugin is via the wp-cli step that allows you to run WP-CLI commands such as wp post generate:
{
"landingPage": "/wp-admin/edit.php",
"login": true,
"steps": [
{
"step": "wp-cli",
"command": "wp post generate --count=20 --post_type=post --post_date=1999-01-04"
}
]
}
You can also use the wp-cli step in combination with the writeFile step to create posts based on existing content and to import images to the Playground instance:
{
"$schema": "https://playground.wordpress.net/blueprint-schema.json",
"landingPage": "/?p=4",
"login": true,
"steps": [
{
"step": "writeFile",
"path": "/wordpress/wp-content/postcontent.md",
"data": {
"resource": "url",
"url": "https://raw.githubusercontent.com/wordpress/blueprints/trunk/blueprints/wpcli-post-with-image/postcontent.md"
}
},
{
"step": "wp-cli",
"command": "wp post create --post_title='Welcome to Playground' --post_status='published' /wordpress/wp-content/postcontent.md"
},
{
"step": "writeFile",
"path": "/wordpress/wp-content/Select-storage-method.png",
"data": {
"resource": "url",
"url": "https://raw.githubusercontent.com/wordpress/blueprints/trunk/blueprints/wpcli-post-with-image/Select-storage-method.png"
}
},
{
"step": "wp-cli",
"command": "wp media import wordpress/wp-content/Select-storage-method.png --post_id=4 --title='Select your storage method' --featured_image"
}
]
}
Check the "Use wp-cli to add a post with image" example from the Blueprints Gallery to see the full example showing the connection between the content and the featured image.
runPHP
With the runPHP step you can run any PHP code you require to insert info into your WordPress installation, for example by using the wp_insert_post function.
{
"landingPage": "/wp-admin/edit.php",
"login": true,
"steps": [
{
"step": "runPHP",
"code": "<?php require_once 'wordpress/wp-load.php'; wp_insert_post(array('post_title' => 'Simple post from PHP', 'post_content' => '<!-- wp:paragraph --><p>This is a simple post inserted with wp_insert_post</p><!-- /wp:paragraph -->', 'post_author' => 1, 'post_status' => 'publish')); ?>"
}
]
}