Create a live preview of your WordPress plugin using Playground

a hand holding a book open to a mockup

WordPress Playground, if you’ve not tried it already, is a browser based instance of WordPress, operated by WordPress.org. Essentially, you can create a temporary version of WordPress for use in trying things out.

And developer, with plugins in the official directory, can now add a button to their plugin page, with a direct link to Playground, allowing an instance installation and demonstration of your plugin.

But, first if you’ve not tried out Playground, just go there now and have a play. From the initial front end screen you can use the admin bar at the top to access WP Admin and do whatever you want. You can even change the PHP and WordPress version that it’s using as well.

Now, if you want to add this goodness to your plugin, the first thing you need to do is download a template file.

This should be named blueprint.json and will sit in your SVN assets folder, in a new folder named blueprints (i.e. /assets/blueprints/blueprint.json).

An example might look like this…

{
"landingPage": "\/wp-admin\/options-general.php",
"preferredVersions": {
"php": "8.0",
"wp": "latest"
},
"phpExtensionBundles": [
"kitchen-sink"
],
"features": {
"networking": true
},
"steps": [
{
"step": "installPlugin",
"pluginZipFile": {
"resource": "url",
"url": "https:\/\/downloads.wordpress.org\/plugin\/your-plugin.zip"
},
"options": {
"activate": true
}
},
{
"step": "login",
"username": "admin",
"password": "password"
}
]
}

This would probably work for most plugins with just 2 changes…

  1. landingPage will need to be changed to whatever screen you wish the user to land on after your plugin is activated. In this case, it’s taking them to the General settings page.
  2. In pluginZipFile you’ll need to change the URL to point to the download of your plugin.

Otherwise, this plugin will set up a default WordPress environment, install and activate your plugin, sign you in and then leave you on the screen that you specify. You can find more details about the blueprint in the plugin handbook.

If you wish to test the blueprint out, there’s a cool tool named the Blueprint Builder, which helps you to create and test your Playground blueprint. I’m told it’s a bit buggy right now, though, so just be wary.

Otherwise, add the file to the specified folder in the SVN directory and you should find a new button appears in your plugin listing, along with the usual download button…

Clicking on the “Live Preview” button will take you to WordPress Playground, running the blueprint that you supplied. Right now, however, it’s only visible to you.

Once you’ve tested it and all looks 100%, head to Advanced View and you’ll find a new option at the bottom of the screen…

Stab the button at the bottom to toggle the public view of the Live Preview button.

Talk to me!

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Discover more from David Artiss

Subscribe now to keep reading and get access to the full archive.

Continue reading