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",
"themeZipFile": {
"resource": "wordpress.org/themes",
"slug": "twentytwenty"
}
},
{
"step": "installTheme",
"themeZipFile": {
"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",
"themeZipFile": {
"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')); ?>"
}
]
}