WordPress is known for its famous 5-minute install. We'll explore the WordPress Playground and how you can use it to spin up sites in less than 5 seconds!
What is WordPress Playground? WordPress Playground makes WordPress instantly accessible for users, learners, extenders, and contributors.
Topics we'll explore:
* Understanding Web Assembly, the technology behind Playground
* How to use the Playground to test themes, plugins, and PHP versions quickly
* How to save Playground configurations so other people can use them easily
* Using the VS Code integration for a local version of the Playground
AMERICAN LANGUAGE HUB_Level2_Student'sBook_Answerkey.pdf
WordPress Playground: The Famous "5 Second" Install
1. Dave Kellam @ WordCamp Montréal 2023 | Nov 8, 2023
WordPress Playground
The “famous” 5-second install
2. I started making websites in high school for fun. I later
studied computer science, education, and book design.
Background
I created my first plugin around the time that
WordPress was in version 1.5 beta.
I’ve worked with WordPress for 18 years
I’ve committed to Five For the Future, which means I aim
to spend 5% of my time contributing back to the
community.
Open Source contributions
This is my first talk at a WordCamp
Happy to chat and answer any questions you may have!
Bonjour/Hi!
Dave Kellam
Senior Developer & Team Lead
3. Today’s Agenda 1 Introduction
2 What is WordPress Playground
3 Customizing the Playground
4 Using Playground Locally
5 Applications & Limitations
6 Q&A
5. The “famous” 5 minute install
➔ WordPress mentions it’s “famous” 5 minute install in the
readme file at the root of any WordPress installation, on
the download page, and in the developer documentation
➔ Most hosts offer a way to easily spin up new sites
➔ Local setup can still be a barrier to entry for learning, but
it’s way easier than they used to be
6. The “famous” 5 second install
Visit https://playground.wordpress.net/
8. WordPress in your browser!
WordPress Playground is an online platform that allows you to experiment
and learn about WordPress without affecting your live website. It's a virtual
sandbox where you can play around with different features, designs, and
settings in a safe and controlled environment.
- From the project readme
9. WordPress in your browser!
➔ Playground uses a technology called WebAssembly
➔ Basically running a server in your browser with PHP installed
➔ Should run in all modern browsers
➔ Can even run on devices like phones and tablets!
➔ There’s an option to export and import a saved version of
your environment
➔ It can be embedded via iframes
11. Query API
➔ Use query strings in the url to modify Playground
➔ Use it to quickly test out themes or plugins
➔ Chain parameters together to install multiple plugins
Example
/?theme=frost&plugin=coblocks
12.
13. {
"landingPage": "/wp-admin/",
"preferredVersions": {
"php": "8.1",
"wp": "6.3"
},
"steps": [
{
"step": "login",
"username": "admin",
"password": "password"
}
]
}
Blueprints
➔ Use JSON to customize your Playground
➔ There are a number of steps that you can run
◆ Activate plugins or themes
◆ Run PHP
◆ Copy files
◆ Set WordPress contents
◆ And more…
➔ Can add the JSON after the url, similar to the
Query API
➔ Can use blueprints via the JavaScript API
Example
Paste the JSON after the playground url with a #
https://playground.wordpress.net/#{%22landingPage%22:%22/wp-...
15. wp-now
➔ Install npm package globally (command)
npm install -g @wp-now/wp-now
➔ Spin up WordPress from any folder by navigating there in
the terminal and running wp-now folder
➔ This can also be included as a package in projects
16. VS Code
➔ Search extensions for WordPress Playground
➔ Open a plugin or theme in VS Code
➔ Click the WordPress icon in the sidebar
➔ Your browser will open with that plugin or
theme activated!
18. Limitations
➔ Will not retain uploaded media
➔ Can’t install theme & plugins from the directory
➔ Plugins that require server access won’t work
➔ You’ll lose everything on browser refresh (unless you
export it)
19. Applications
➔ Testing
➔ Teaching & Learning
➔ Live plugin translations
➔ Mobile applications
➔ Contributor Days
➔ Embeddable live demos
➔ Review WordPress and Gutenberg
pull requests
Blocknotes by Ella van Durpe