Día: 6 de enero de 2025

WordPress Playground has been around for a while, and chances are you’ve already heard of it. Most people see it as a tool where one can experiment with plugins, themes, and other WordPress features- and that is correct. But it can also be a good feature to embed in your website or blog posts. Here are some potential scenarios where you might want to embed WordPress Playground:

1. If you’re writing articles or tutorials related to WordPress and you want to display the latest features of a plugin or of WordPress in general, why not embed a live instance of WordPress? This allows your readers to interact with and explore the feature hands-on.
2. If you’re teaching WordPress and have a blog or web displaying training, instead of guiding people to install WordPress themselves, why not embed WordPress Playground in your content? This simplifies the learning process and makes your material more engaging.
3. If you’re using WordPress as an intranet tool for your Business or organization, you probably need to provide onboarding training. Why not consider tutorials that include WordPress playground to provide hands-on training and assess employees’ knowledge?

These are only three scenarios of how embedding WordPress Playground can be beneficial, but there are more out there.

Embedding is simple and I’m here to explain it as easily as possible:

Embedding WordPress Playground with Code

Using iframes is one of the easiest ways to do it. Check this code:

<iframe width="800" height="650" src="https://playground.wordpress.net/" allowfullscreen></iframe>

Let’s try it out:
1. In the block editor, search for the HTML block.
2. Type the iframe code above

This is the result:

3. To view the result, you have to click Preview in the HTML block. The first time, it will take some time to load as it installs the WordPress instance.

Notice that this is a very simple code. At the beginning of the iframe, there are some width and height specifications, you can of course change these numbers.

Now if you try the following code, it will install a slightly different WordPress instance, one that has the theme “Pendant” installed.

This is the code:

<iframe width="800" height="650" src="https://playground.wordpress.net/?theme=pendant&mode=seamless" allowfullscreen></iframe>

You can also specify plugins. That way, the person who interacts with your website or blog will have access to an instance of WordPress already set up with the plugins and themes you’ve chosen.

In the following example, the WordPress Playground instance will download the Yoast plugin and theme Kubio. Note that “wordpress-seo” is the WordPress.org directory name/slug used for Yoast. If you don’t know the right name for a plugin or theme, search for them in the wordpress.org plugin directory or theme directory.

This is the code:

<iframe width="800" height="650" src="https://playground.wordpress.net/?plugin=wordpress-seo&theme=kubio&mode=seamless" allowfullscreen></iframe>

This is the result:

To add several plugins, you can separate them with ampersand &. Notice that the more complex your WordPress playground is, it will take longer to load.

Embedding WordPress Playground with a plugin

There is a new plugin called WordPress Playground Block that will let you embed WordPress Playground in your website.

Once you install this free plugin, you only need to search for this block in the block editor, as seen here:

You can see the result here:

Conclusion

The key advantage of using code is the ability to bring up a WordPress instance with specific plugins and themes. However, not all people may feel comfortable working with iframe codes, and in such cases, using a plugin can be a more user-friendly alternative.

Both methods are useful for many scenarios. Embedding WordPress Playground instances will help you, not only illustrate what you have on your website, tutorial, or training material but also make the experience more interactive and engaging for the reader.