How to build a theme demo with WP Playground blueprints

[justintadlock]

Note: This topic was previously approved, but it has now been split from the existing ticket, which covers a more general overview/introduction: https://github.com/WordPress/developer-blog-content/issues/198

Discussed in https://github.com/WordPress/developer-blog-content/discussions/196

^{Originally posted by **justintadlock** January 3, 2024} One of the most painful experiences (at least in my opinion) is managing live demos to showcase your new Wordpress theme to the world. You usually need to set up and maintain a multisite instance for multiple themes. And, it becomes more complex if you want to give potential users access to the admin to actually explore it. It's a headache and management nightmare. What if you didn't need to do all of that? That's where WordPress Playground comes in, especially its Blueprints API: https://wordpress.github.io/wordpress-playground/blueprints-api/index You can easily provide a demo (even multiple demos with their own configurations) by simply providing a blueprint to Playground. My proposal is to write a guide on using Playground to showcase your theme. We have some working examples in the current Block Theme Examples repo (click the links in the README to see how this works): https://github.com/WordPress/block-theme-examples

[bph]

notes for demo content:

• 10 posts w. featured images
• Pages with patterns How to handle Challenges:
• XML has wrong images.
• where to store images for content and patterns
• Hotlink to the photo library.
• Mixed content errors.

[vcanales]

Hi 👋 I've been working on automatically generating theme previews for PRs in Automattic's free themes repo, in case it helps as an example of how to implement this and the constraints it involves.

https://github.com/Automattic/themes/pull/7719

[bph]

Theme demo with proper media imports is now possible Bug Fix: Support wp_crop_image in import wxr

Now this process should work.

• Create content in WordPress site
• Export via built in exporter
• Upload all images to GitHub space
• Search/replace image references to GitHub location in xml file
• upload xml file to GitHub as well.

[bph]

With the bug fix in, @justintadlock content blueprint for #238 and my work with the Blueprint Gallery, I have enough knowledge and resources to give this topic a go.

[bph]

Skeleton for a different use case but with all the pieces:

• Add dashboard widget
• Import content with images
• Pretty links
• Landing on wp-admin without the Welcome screen.

[bph]

Started working on the post on google Docs It's all still very much WIP and not yet ready for feedback.

And example code on GitHub

[bph]

On content import, the theme demo ran into a bug on Playground, which was reported here: Intermittent white screen from navigation links

I continued on the writing tasks...