What is WordPress Playground?
WordPress Playground is an open-source project aimed at providing WordPress software that can run without the need for a database or PHP server. It runs privately on a web browser and can be accessed from any device without logging in. Therefore, everyone can immediately and freely try WordPress.
How does WordPress Playground work
Users can access WordPress Playground to test websites or any WordPress version, block, theme, and plugin without any installation or hosting account settings.
It also supports a Node application called WP now, which is very useful for developers to launch WordPress in their local environment. In this way, they can use the Visual Studio Code extension to create and modify sites locally.
Playground uses three basic solutions to run WordPress in a web browser:
Network assembly. It helps to enable client WordPress interaction on the browser by running PHP files and linking them with JavaScript. In WP now, this technology creates a php wasm instance and downloads the selected WordPress version.
SQLite。 Usually, every WordPress installation includes a MySQL infrastructure to store data, but it cannot run in a browser. Therefore, WordPress Playground uses the WP SQLite db plugin to integrate with SQLite.
ServiceWorker and Worker Thread API. They help intercept web requests and run PHP applications in the browser.
Despite its powerful features, Playground is still an experimental project and actively under development. Therefore, it still has limitations:
Unsupported network connection. You cannot access the official WordPress plugin or theme directory in your browser.
Temporary access. Every time you refresh the page, you lose all database changes and uploads. You can only save the file by exporting it.
IFrame quirks. WordPress displays in iFrame, so managing the target=”_top” HTML attribute in links is challenging. In addition, JavaScript pop ups derived from iFrames sometimes fail to display.
Unsupported pthreads and XDebug. WordPress in the browser uses the WebAssembly version of PHP. Unfortunately, it does not support pthreads, which limits your use of the PCNTL_ function. XDebug cannot be used with php wasm either.
Visit the official documentation of WordPress Playground to learn more about its architecture.
How to use WordPress Playground
WordPress Playground is a great tool for experimenting with complex elements such as software and design updates. This section will show you how to create a virtual WordPress website and embed it into an actual website.
How to start a WordPress Playground website
Users can access WordPress in their browser through the demo page link. It will display a sample blog page with WordPress default settings.
Default WordPress Playground Site
You can directly test any theme or plugin on the page. However, since Playground does not send any data to the Internet, users cannot install WordPress themes from the official directory as usual.
You need to upload the file to Playground. To do this, please click on the WordPress icon to access the management dashboard:
The WordPress icon in the upper left corner of the WordPress Playground toolbar
Navigate to Appearance → Theme → Add New Theme, and then click Upload Theme. From there, open or drag the theme’s. zip file to add it to the list.
The ‘Upload Theme’ button in the WordPress Playground management dashboard
After installation, you can use the WordPress site editor to try creating themes or templates. However, this only applies to certain supported WordPress themes, such as Twenty Twenty Three.
Users can also try plugins on the website by following steps similar to uploading a theme – navigate to plugins → add new → upload plugins.
From there, you can learn to design website content, create posts, or test every feature of the WordPress page editor without worrying about disrupting real-time websites.
Playground also allows you to try different PHP or WordPress versions. To change them, simply click on the custom button in the upper right corner, which will display the currently used PHP and WordPress versions.
Another custom option is storage type:
temporary. After refreshing the page, you will lose all website data.
unremittingly. WordPress uses cookies to save an instance of your website in the browser.
The real-time directory on your computer (beta version). You can synchronize all changes in Playground to your local directory, but not vice versa.
Customize Playground pop-up window
Although WordPress Playground provides persistent storage types, it is still under development. Therefore, the safest option to keep your job is to download and restore it when you want to continue.
Click the arrow button in the top bar to export or import your work:
The import and export buttons in the upper right corner of WordPress Playground
You can also host the downloaded website files on any server that supports PHP and SQLite.
How to embed WordPress Playground into your website
Website developers can embed Playground into dedicated websites using the following HTML
It will grant a free private WordPress instance that you can customize using one of the Playground APIs – queries, blueprints (JSON), JavaScript.
Please note that if you work on Playground’s website, you may encounter downtime during traffic surges. To prevent this from happening, you can host Playground on your own domain instead of Playground-wordpress.net.
This will give you complete control over its content and behavior, so you won’t rely on third-party web servers. In addition, you can provide a customized user experience, such as pre installing default settings on Playground.
How to use the query API
Visitors can use this simple API to skip some settings when customizing Playground. Its working principle is to convert configuration options into query parameters for WordPress Playground URLs.
This API can help you pre configure testing websites with just one click. You just need to add the value to the URL according to the following pattern:
https://playground.wordpress.net/?configuration options=value
For demonstration purposes, you can use this URL to install the Jetpack plugin:
https://playground.wordpress.net/?plugin=jetpack
Plugin is a configuration option, while jetpack is a value. For any theme or plugin value, you should accurately use the name written in the official WordPress directory URL:
The Jetpack plugin page in the official WordPress directory highlights the plugin name in the URL
You can use the ‘&’ symbol to add multiple options to a URL. For example, if you want a test website running WordPress 5.9 and PHP 7.4 versions, the URL is as follows:
https://playground.wordpress.net/?wp=5.9&php=7.4
You can also pre configure more elements:
https://playground.wordpress.net/?plugin=jetpack&plugin=gutenberg&theme=pendant&wp=6.2&php=7.4
Developers can also use
The mode=seam parameter redirects visitors to the site editor.
summary
WordPress Playground is a learning and testing tool that runs WordPress core instances on a browser. With it, learners can attempt to build websites from any device and modify their components.
In addition, developers can use it for multiple instances, such as showcasing project demonstrations, checking code, testing code snippets, or embedding it into real-time sites.
It uses WebAssembly, SQLite, Service Worker API, and Worker Threads API to run WordPress functionality on a web browser.
This open source project is still under continuous development, so there are still limitations. That is to say, it is a great resource that can help users learn a secure environment to explore PHP and WordPress development without affecting their real-time website.
WordPress Playground FAQ
To help you better understand WordPress Playground, we will answer some common questions about it.
Is WordPress Playground suitable for beginners?
yes. WordPress Playground is suitable for beginners as it provides a low-pressure environment to learn, experiment, and gain confidence in using WordPress. For those who want to become proficient in managing and customizing WordPress websites, it can be a great tool.
Can WordPress Playground be used for free?
yes. WordPress Playground is a free software released under the terms of General Public License 2 or any higher version.
Can I install custom themes and plugins in WordPress Playground?
yes. You can apply custom themes and plugins on WordPress Playground by uploading a. zip file to the WordPress virtual environment.
Can I export my work from WordPress Playground to a real-time WordPress website?
yes. You can export your work to a. zip file and import it into the hosting account of your choice. However, since WordPress in the browser uses SQLite, you may need to convert the database to MySQL or MariaDB in order to run it on a web server. If you do this, please use SQLite converter tools such as Ispirer Toolkit.
English 
简体中文 
Website Builder Online
