WordPress Playground Step Library

WordPress Playground is this fascinating tool that allows you to run WordPress without a server. It achieves this by running PHP in your browser by using WASM. It sounds cool, and it makes for numerous interesting demos, as its original creator Adam Zielinski showed at WordCamp Europe 2024: WordPress Playground – use WordPress without a server (recording, slides).

Having built Translate Live for WordPress.org–a way to translate plugins and themes without having to use a table UI–I have a bit of experience with having WordPress Playground do more complex things. But I also know that it be a bit difficult to get started with that.

Blueprints to start a Playground

So, as you can see with Translate Live, a WordPress Playground can be booted into configurations, and these configurations are (currently) called Blueprints. They are JSONs made of options and a list of steps. You can choose from a number of available steps like installPlugin to share a link with someone to try something in WordPress without having to set up hosting for that.

The available steps are somewhat basic but powerful. It can be abstract to think of what to do with them.

So, I had the idea that while the available steps of WordPress Playground are quite universal, we could build a library of “more meaningful” steps that do and “transpile” them to existing steps.

Build a Playground Blueprint with a Drag and Drop UI

Welcome to the WordPress Playground Step Library: Combining these steps with a click (or drag and drop) UI, it allows you do quickly create a WordPress Playground that does things you didn’t know you could easily do. Here is a screenshot:

So, for example, it could be useful when you share a WordPress Playground link to add some explanatory text, and what better to use than the infamous1 Admin Notice? But, how do you do it?

Turns out, you’d need a small mu-plugin. But with a custom step, it’s just a matter of adding that step:

So such a “custom blueprint” for playground would be this:

  "landingPage": "/",
  "steps": [
      "step": "showAdminNotice",
      "vars": {
        "text": "Welcome to WordPress Playground!"

But careful. The above doesn’t run in Playground. There is no showAdminNotice step. But the Step Library automaticaly transpiles to a valid blueprint:

  "landingPage": "/wp-admin/",
  "login": true,
  "steps": [
      "step": "mkdir",
      "path": "wordpress/wp-content/mu-plugins"
      "step": "writeFile",
      "path": "wordpress/wp-content/mu-plugins/0-mu.php",
      "data": "<?php add_action( 'admin_notices', function() { echo '<div class=\"notice notice-success is-dismissible\"><p>Welcome to WordPress Playground!</p></div>'; } ); ?>"

So which one is easier to remember? :-) You can try this blueprint in WordPress Playground now! It will look like this:

WordPress showing an admin notice: Welcome to WordPress Playground!

I’ve made the Step Library so when you configure it, its URL reflects to your custom steps (this is the above in the Step Library) so that you can easily share them. If you wanted to share the actual running playground, share the URL of the “Launch in Playground” link.

The Playground link will start with https://playground.wordpress.net/, the Step Library link with https://akirk.github.io/playground-step-library/.

The Step Library is hosted on Github and you can contribute your own steps! Also happy to receive new issues with ideas of what steps might be useful to add. There also the Blueprints Gallery that showcases further uses of Playground and is also open to contributions!

So far, I have added these steps:

I’m curious if this tool can help you build a WordPress Playground, please tell me by commenting via Mastodon or ActivityPub, and spread the word about the tool!

Oh, and checkout the Awesome WordPress Playground link collection if you want to learn more about Playground or check out interesting applications! Happy playing!

  1. This is traditionally misused by plugins to prompt you to upgrade so that your wp-admin screen can get bloated with this. To the point where there is an Admin Notices Manager plugin that allows you to keep them under control. ↩︎

Your WordPress as Your Personal Mastodon Instance

tl;dr: Three plugins can transform your WordPress install to your personal Mastodon Instance: ActivityPub, Enable Mastodon Apps, and Friends.

As you might know, I am the author of the Friends plugin for WordPress. I started this in 2018 with the idea (which I later described in a vision post) that something like Facebook (with private posts) could be implemented decentralized between WordPresses (and later other blogs/cmses).

To be honest, the effort is and stays somewhat niche. Social networks are good at locking people in, discovery is better, and many of my friends don’t actually run their own blog.

Joining the Fediverse

A few years later, Mastodon became big, and having been in contact with Matthias Pfefferle, I realized (after he repeatedly poked me) that it’d be great to join forces with his ActivityPub plugin (later acquired by Automattic): it allows people on Mastodon and other ActivityPub networks to follow your WordPress blog directly, not utilizing the then common “Share to Twitter” et al functionality.

So, when you have both ActivityPub and Friends installed, you can be followed and follow people on Mastodon. The Friends plugin compiles a feed of your follows (mixed in or separately also with all your RSS subscriptions).

A screenshot of the Friends plugin home screen feed.
This shows my private Friends page where statuses and posts display mixed (you can also have pure views)

This was already nice, but Matthias and I both had to implement further elements to be truly integrated into Mastodon conversations: the ActivityPub plugin implemented replies with comments, Friends implemented Boosting and Replying to any (ActivityPub) URL, and much more.

Screenshot of the ActivityPub Admin Screen
The ActivityPub admin page shows your Mastodon Handle

A (Mobile) App Ecosystem

Still, there was one piece missing. Mastodon has a thriving third-party app ecosystem. The UI of Mastodon as well of Friends (while completely customizable), is not to everyone’s taste, but you have a huge selection of apps to match your taste.

So, in the very end of 2022, I started to work on the Enable Mastodon Apps plugin. It implements the same API that Mastodon implements for talking to its clients, just in WordPress.

A screenshot of Mastodon apps
Today the official directory lists 56 apps, likely many more exist

It was quite a wild ride (that likely is not over yet), reverse engineering some clients because they would crash even if the plugin spoke exactly what the docs defined. The reason being that most apps (understandably) assume some further truths that are valid for Mastodon’s implementation, like ids, while being defined to be of string value, actually need to be numbers. Eugen Rochko actually later confirmed to me that this specific choice was merely made to avoid troubles with very large ids.

Last week, I released 0.9.0 of Enable Mastodon Apps which is almost a rewrite, fueled by contributors at the CloudFest Hackathon: special thanks to Matthias Pfefferle for hosting it, Matthias Kittsteiner, Konstantin Obenland, and Ralf Wiechers for your contributions! This resulted in a more stable implementation (ensuring correct JSONs) and a stricter separation of concerns.

Combining the Power of Three Plugins

So the combination of the three plugins now gives you the ability to fully interact with the Fediverse while not having to host your own Mastodon which comes with quite a list of requirements.

Granted, there are still rough edges (please help discover and fixing them by reporting in the respective Github issues) and we yet only have experience with a couple hundred followers and follows. But that works already reliably.

Each of the plugins are useful on their own:

  • If you have just the ActivityPub plugin, people can follow your blog on the fediverse, can comment from the fediverse on your posts and your replies will go back into the fediverse.
  • If you have just the Enable Mastodon Apps plugin, you can use Mastodon Apps to see the posts on your blog (useful if it’s a multi-people blog), reply and submit new posts.
  • If you have just the Friends plugin, you can connect WordPresses, follow RSS feeds, get keyword notifications, apply feed rules, react on posts with emoji (there is a bit of an ecosystem of its own, with further plugins Post Collection and Send to E-Reader).

Together, by making use of WordPress hooks (see for example the Enable Mastodon Apps Hooks Documentation), the plugin extend each other’s API responses or UI. What travels over the the ActivityPub protocol is handled by the ActivityPub plugin. When a feed of posts is involved, the Friends plugin will fill in your friends’ posts. And so on.

Alternative UIs

It’s really quite something to be able to browse your own blog, or statuses and blogs you follow with apps like Phanpy (web), Elk (web), Mammoth (macOS, iPad, iOS), or Tusky (Android) or Ivory (macOS and iOS).

The posting experience from mobile using a Mastodon App can be better than with the standard WordPress mobile apps. Each app covers a different use case and has posting UI specialized in that.

Empower Your WordPress!

I believe that the Fediverse comes to the rescue of blogging. Unfortunately, years ago the comment sections of the web were killed by spam. The fediverse now reopens meaningful interaction with your blog posts. Comments from the Fediverse appear in your blog and your responses are sent back as replies. That gets conversations going again!

To try it out, you can use WordPress “run WordPress in your browser” Playground to take a little glimpse at the plugins without having to install it: Note that, because of its JS nature, playground is in a sandbox and can only connect to CORS enabled URLs.

Finally, these are the links to the WordPress plugin directory:

  • ActivityPub: have conversations about your blog posts across the fediverse.
  • Enable Mastodon Apps: make WordPress compatible with Mastodon apps.
  • Friends: follow others via RSS or ActivityPub.

Thanks for reading, I am curious for your opinions! You can reply to this post on the fediverse!