How to start using WordPress Playground

Resources

WordPress in one click

WordPress Playground Docs

Learning outcomes

1. Installing plugins
2. Installing plugins automatically
3. Building a theme
4. Building a site
5. Exporting a site
6. Compatibility testing

Transcript

Introduction

Hi, I’m Adam and I’m going to show you how to use WordPress Playground. When you go to playground.wordpress.net, you are going to get an entire WordPress site running entirely in your browser. Use it to your advantage to try plugins, themes, build your own themes and entire sites.

Installing plugins

Let’s start by installing a couple of plugins. I’m going to go to WordPress Plugin Directory and download the Gutenberg plugin, the Create block theme plugin and the Skatepark theme. So once I have these files, let’s go to Plugins, Add new, and start installing the plugins. So the first thing you might notice is an error message that indicates we cannot contact the WordPress Plugin Directory and this is because Playground doesn’t have any access to the internet. This is helpful for your privacy, but it means we don’t get a list of plugins.

Well, let’s upload them. So I’m going to find the Gutenberg plugin because I have a zip file on my hard drive and drag and drop it here. So then I can install it and activate it. I’m going to do the same thing with the Create Block theme plugin. So again, I’m just going to drop a zip file and install that and activate it. Now it’s time to install the Skatepark theme. It is the same story as with plugins, I’m going to drag and drop it over here. So now we can activate our theme. Voila, we just started a new site, installed a few plugins, activated a theme and it took us maybe about a minute, not bad.

Installing plugins and themes automatically

As you can see, the Gutenberg editor is here. The correct theme is applied. It all works. It was a bit cumbersome, though. So let’s see how we can automate the plugin installation process. I’m going to refresh this entire site and start fresh. So this is a new playground with no changes applied. So in the address bar, I’m going to type theme equals skatepark. Then I’ll say plugin equals Gutenberg ampersand plugin equals create dash block dash theme. What this is going to do, is going to download and install all these plugins and themes for me. So now we have the exact same setup as before, except we didn’t have to do almost any work. It only took a couple of seconds, and now we have a site with the plugins and theme we want.

Building a theme

What else can we do with WordPress Playground? Well, since we have Create block theme, we can build an entire theme in WordPress Playground. So to do that, let’s go to Appearance, Editor to open the Site Editor. Inside the Site Editor, we’re going to start customising. So I’ll change the background colour of the theme, and maybe some line heights and maybe some fonts, and let’s speed up this process a little bit. At this point, you’re absolutely free to customise the theme to your heart’s content. So now we’re finished. This is our custom theme. We can export it by going to Options, Create block theme, and once you scroll down a little bit, there’s an Export button. So I’m going to click it, and this downloads a zip file with my customised theme that I can install on any WordPress site.

So let’s start a new playground and go to Admin, Appearance, Themes and install our new custom theme. I’m going to upload it using this specific file that I just exported. And once I install and activate it, well, my new playground has the exact same theme as I just built. I can take this theme to any WordPress site in the world and install it there. Just like that. You too can go to playground@wordpress.net and build your very own WordPress theme.

Building a site

Let’s not stop there, let’s build an entire site. This is WordPress playground documentation. Let’s recreate it using our new custom theme. Copying things is always a good starting point so I’m going to copy this entire section over here and paste it into a pattern. So let’s find a pattern that will help us the most, this one has columns, so it seems like a great pick. So I’m just going to paste that content over here, add a YouTube video in the right column, and customise the top section of the website and the footer. Correct some styles and remove the social links, and make a couple of more tweaks here and there. Voila, here’s our brand new site that mimics WordPress Playground docs.

Exporting a site

Now, this site only leaves me in my browser. So let’s save it to my disk. On the WordPress Playground website, I’m going to click this little download icon which is going to download a zip file with my entire WordPress site inside. I’m going to extract it and take a peek inside. This WordPress directory has all WordPress core files. If I start diving inside, I’m even going to find the sequel lite (SQLite) database file where all my pages, posts and WordPress configuration lives. That zip file contains an entire WordPress website. So I can just take it and host it somewhere. But I can also import it in another WordPress Playground instance. To do that, I’m going to use this little upload icon over here. I’m going to select wordpress-playground.zip, and click Import. Voila, my WordPress site is now in here. I no longer have to send screenshots or videos to my friends and customers. I can send them an actual WordPress website and allow them to play with it interactively in their browser.

Compatibility testing

Let’s take a look at another aspect of WordPress Playground, which is compatibility testing of our site’s plugins and themes. Playground allows you to switch between different PHP and WordPress versions. Let’s select 6.0 and install the theme that we created earlier in this tutorial and then on the site, we can see that it actually works, which is great.

However, let’s not stop there. And let’s also test on WordPress 5.9. So I just selected a different version. And we now have a WordPress 5.9 site. So let’s try installing that very same theme again. Select the correct zip. Here’s an error. The theme requires WordPress 6.0 or higher. All we had to do to find out was go to playground@wordpress.net and click some buttons. We didn’t have to create 20 different WordPress websites, it only took a couple of clicks and a couple of minutes.

I hope you enjoy WordPress Playground as much as I do, and I can’t wait to see what you’re going to build with it.