Recommended
Recommended
More Related Content
Similar to WordPress Playground: The Famous "5 Second" Install
Similar to WordPress Playground: The Famous "5 Second" Install (20)
Recently uploaded
Recently uploaded (20)
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
- 4. Introduction
- 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/
- 7. What is WordPress Playground?
- 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
- 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-...
- 14. Using the Playground locally
- 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
- 20. Q&A
- 21. Thank You! Find me online… https://davekellam.com https://profiles.wordpress.org/eightface/ https://www.linkedin.com/in/davekellam