WordPress is so popular and loved because you can create a beautiful website with just a few clicks. You simply get a domain and hosting then install WordPress, configure a few settings and you’ve got yourself a website. This is one of the biggest advantages of using WordPress. You can create your whole website within a few minutes.
The concept of WordPress Playground is an idea where you can work on WordPress outside a PHP server. That means you can now run WordPress on the browser! And no this is not the WordPress sandbox where you have to wait a long period of time to work because of the lags. Now you can run your WordPress project entirely on your browser.
Although this isn’t a new concept, it opens up a whole new world of possibilities for WordPress. In this post, we are going to learn what is WordPress Playground, its advantages, and its potential.
What is WordPress Playground?
WordPress Playground is a collaborative project that allows you to run WordPress on your browser instead of a PHP server. However, this project is still experimental and under active development. But you can still perform some basic tasks and try out plugins and themes.
WordPress Playground has been created for users, designers, and educators. It is a flexible tool that allows you to:
- Try out plugins and themes in a virtual live environment
- Experiment on another WordPress project
- Embed a real WordPress site for your tutorial or course
You can use WordPress playground to test various plugins and themes before actually implementing those on your real WordPress site. That’s an amazing thing for developers because this saves a lot of time and headaches. There’s also the option to switch the PHP and WordPress versions. So you can also test if a certain plugin or theme works for the version of WordPress you’re working on.
What can you do with WordPress Playground?
Currently, the best thing that you can do with WordPress Playground is an experiment. If you’re taking a WordPress class or course, then WordPress Playground gives you the platform for your work. By integrating WordPress Playground with your codebase, you can build apps with client-side WordPress. Here are a few examples:
Get Latest Post Notifications!
- No setup website builder
- A single-clone website builder to experiment with design updates and plugins
- WordPress programming tutorials in the browser without any local setup
- Bug reports with real reproduction
- Single-click development environments for reviewing code.
Besides, this project is still being developed, so it has a lot more potential. So head over to wordpress.org and check out the WordPress Playground yourself.
The idea of WordPress running outside the PHP server isn’t a new one. Developers have been working on this project for some time now. As you may know, PHP runs on an web server. If you’re running WordPress on localhost, you have to use software like XAMPP, MAMP, WAMP, etc. to create the environment. Then you launch Apache (or another web server) and MySQL then start up your WordPress website on localhost.
Usually, professional WordPress developers transfer their live website to localhost for either testing or general website updates. WordPress is constantly being updated and we receive a new update as soon as it’s launched. For this reason, many WordPress themes and plugins are also updated. Updating your plugins and themes directly on your live site might be a bad idea because it might malfunction.
That is why, it is safer to test out these plugins on a localhost and once everything works out, you can simply transfer your WordPress site from localhost to live server. With the introduction of WordPress Playground, you can now perform these tests quickly and skip all these steps!
How does it work?
A few years ago, running a WordPress site on the browser was just an idea but now its possible. If you’re having trouble wondering how it all works out, then let’s look at the following:
- PHP runs as a web assembly binary
- Using a plugin called wp-sqlite-db, MySQL is replaced by SQLite
- The web server is implemented via the service worker API
Integrate WordPress Playground into your project
It is possible to integrate WordPress Playground into your project but remember, this is still an experimental project. According to the warning label of wordpress.org, this might break or change without a warning.
The easiest way to integrate WordPress Playground into your site is to link the demo. Here you can pick a template and a plugin. Then you can click on the ‘Start Playground’ button to fire up your WordPress website.
If you want more control, you can choose to embed WordPress Playground directly on your site or host your own.
You can also embed WordPress Playground on your website. The embedded WordPress playground might be more useful than just a link. It can simply be things such as
- Testing your project
- Showcasing your theme or plugin
- Adding practical elements to your WordPress course
You can use the <iframe> HTML tag to embed WordPress on your site. Simply use the following code:
<iframe style="width: 800px; height: 500px;" src="https://wasm.wordpress.net/wordpress.html?mode=seamless" ></iframe>
Also, keep in mind that this will turn off your browser UI and give WordPress the entire available space. There’s documentation where you can learn more about other configuration options and look at some examples.
WordPress has truly advanced with time. What looked like only a concept on paper is now a live project. WordPress running on a browser without a PHP server opens up a world of new possibilities. WordPress Playground is made possible by the collective efforts of enthusiastic developers worldwide.
As said by the developers, WordPress Playground is still an experimental project. Indeed it has come far but it still faces various challenges. By contributing to this project you can solve all sorts of challenges the project currently faces. If you want to get involved, here are some methods for you:
- Add issues or pull requests to the WordPress Playground GitHub repository
- Learn more from the project documentation
- Join the conversation in the #meta-playground channel on Making WordPress Slack
There are many ways through which you can contribute to the project, even if you’re not a developer. You can send feedback, request features, ask questions, and provide ideas to contribute to the project. We are very excited about this and that is why we wanted to share this amazing news with all of you WordPress enthusiasts.
Disclaimer: This post may contain affiliate links and we may receive a small commission if you purchase something by following them. However, we recommend services/products that we believe good to serve your purpose.