What is WordPress Playground and how to create a browser based testing environment
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
Recommended by website builders
Focusing on high-quality, efficient, and cost-effective website construction services, we provide comprehensive services from brand strategy to website development.
-
Bookstore website construction price
$0.00
Web Designer:
-
$2,500.00$30,000.00Web Designer:
-
$450.00$500.00Web Designer:
-
$450.00$500.00Web Designer:
-
Restaurant website builder plan
$450.00$500.00Web Designer:
-
$18,000.00$20,000.00Web Designer:
-
Construction price of automobile service website
$450.00$500.00Web Designer:
-
$4,200.00$4,500.00Web Designer:
-
Construction Plan for Pharmaceutical and Medical Websites
$750.00$800.00Web Designer:
-
$750.00$800.00Web Designer:Starlinka, website builder in Los Angeles, California, USA
-
Agricultural website builder plan
$450.00$500.00Web Designer:
-
Website construction plan for construction and building materials companies
$450.00$500.00Web Designer:
- Enterprise website builder website main module content
- Enterprise website construction, website information linkage
- Modern website management: key elements and the path to success
- Key elements for language and style selection in enterprise website construction
- Layout and layout analysis of web design in enterprise website construction
- Independent website construction plan
- Research on Strategies for Enterprises to Optimize Their High Quality Websites and Effective Ways to Improve Service Quality
- Enterprise website construction highlights the readability of the webpage itself
Contact us to get an exclusive customized "Planning Plan" and website construction, website design, and website production quotations for free.
For related questions, you can contact us through the following methods
Business hotline86 13992352808 Email1602401899@qq.com
1602401899@qq.com
Then get in touch with us