Code is poetry.
That’s the underlying WordPress Mantra.
However, what happens when you want to check out different WordPress themes and plugins quickly?
You start setting up a sandbox or local install. For one, setting up XAMPP, PHP etc. for your local WordPress installation, can be overwhelming for those who are not quite familiar with it.
It feels like anything but poetry.
Enter – WordPress Playground.
With WP Playground’s zero setup requirements, you no longer have to deal with any of these obstacles – you can jump right in and create your own private WordPress environment, all within your browser.
In this post, we’ll discuss how WordPress playground works and who might want to use it. Then, we’ll talk about how you can get involved with the project.
Let’s get to it!
[ez-toc]What Is WordPress Playground?
Appropriately named, WordPress Playground is an experimental tool that allows you to explore WordPress in an entirely new way.
This zero-setup WordPress environment operates exclusively in a web browser. This massively simplifies the ‘getting started’ process and can come in really handy in a lot of scenarios. For instance, it can enable users to test a theme or plugin before installing it.
When you access it, you instantly create your own anonymous WordPress installation, with a live preview of the front end and the ability to keep making changes to the back end:
Essentially, anything you can do within the admin interface of a regular WordPress site, you can do in WordPress Playground. That includes adding new design elements, modifying pages, editing users, etc.
What Lies Beneath
This WordPress environment is possible because it only needs JavaScript to run. That means there’s no PHP, no MySQL, and no server. Instead, PHP is run as a WebAssembly binary, MySQL is replaced with a plugin, and it uses the Service Worker API.
Free, Quick and Easy
Since no web host is required to run WordPress Playground, it’s totally free. This makes it a great option for users who might not be able to afford a WordPress site to use for trying, building or testing new themes and plugins.
It’s literally zero-setup, just as it claims. Simply open it up in your browser and it’s running.
Getting Started
To get started, you can simply choose your WordPress theme:
When you click on Start Playground your new site will instantly launch. Then, you can select the PHP and core WordPress versions you would like your site to use.
Just make your selections in the upper right hand corner of your screen. This feature in particular can be handy if you need to test your theme for compatibility with different versions. Or upgrade your website to a different PHP or WP version.
As you can see, WordPress Playground is super easy to use. However, keep in mind the warning at the bottom of the screen: “All your changes are private and gone after a page refresh.” This is for the default, standard version of the tool.
For Advanced Users – Hungry for More
You can run this in a Node.js server because WordPress executes PHP via WebAssembly. You can even embed WordPress Playground in an iFrame to leverage it to the fullest, and use the query parameters API, to tweak it.
Now that you know the basics of this exciting new tool, let’s discuss who might want to use it!
Use Cases for WordPress Playground
The great thing about WordPress Playground is that tons of different types of users will be able to benefit from it. This includes regular users, designers, and educators.
Here are some possible scenarios where this can be used –
WordPress site owner – you can test out a theme or a plugin before installing it on your site.
Designer – you can use WordPress Playground to showcase your projects. For example, if you want to provide a client with a preview of a site design, you can host a WordPress Playground to customize the installation. Then, you can provide your client with an interactive preview.
Plugin Developer – You can embed a WordPress Playground installation that displays your new tool in a “call for testing.”
WordPress educator – You can use Playground to enhance your courses. For example, you could embed a site in one of your lessons so that beginners can interact with it.
If you tap into the Playground API, you will literally be able to unleash it’s full potential.
Known Limitations
This is an excellent community effort, that is in its early stages. So here are a few limitations you might want to bear in mind as you dive in –
- The free wp org plugins directory or themes directory cannot be accessed
- A page refresh will make you lose your changes, so remember to export or save your work before you exit.
- There are a few more technical constraints too, that you might want to read up on. For more on this, check out this detailed explanation of these limitations and workarounds.
How to Get Involved
WordPress Playground is still under active development, so chances are it will continue to evolve in the future. It is an exciting time to get involved and contribute, in quite a few ways –
- Contribute to the WordPress Playground GitHub repository
- Go through the documentation to understand it’s features
- Join the WordPress Playground Slack channel: #meta-playground on Making WordPress
Remember anyone can participate, regardless of skill level!
In Conclusion
WordPress Playground is causing a buzz – and with good reason.
One of the great things about WordPress development is that it’s highly affordab;e for all skill levels. However, most web hosting isn’t free, and if you are a designer, you might not have the resources or to experiment to the extent that you would like. Or, you may struggle to showcase your plugins and themes to clients.
That’s where WordPress Playground comes in. Using this live virtual environment, you can explore WordPress to your heart’s content. And, since it runs on JavaScript only, all you need is a web browser.
You don’t have to pay for server resources and setup is minimal. You can use WordPress Playground to try out new plugins, showcase demo sites, or even as an educational tool.
Recommended Reading / Useful Links
- WordPress Playground
- WordPress Playground – A Developer’s perspective
- Playground Demo
- WordPress Playground Github
- WP Playground Documentation
- Build in-browser WordPress experiences with WordPress Playground and WebAssembly – by Adam Zieliński (WordPress Playground lead) and Thomas Nattestad (V8 Product Manager)
Have you had a chance to play around with the WordPress Playground? Do leave a comment and share your experience.