WordPress developers and theme creators can now build fully configured, interactive website demonstrations using a feature called Playground Blueprints. This capability allows potential users to experience a theme’s design and functionality with sample content directly in their web browser, without requiring any hosting or installation.
The tool is built on WordPress Playground, an open source project that runs a live WordPress instance entirely within the browser. Traditionally, previewing a theme in Playground presented a clean installation. Blueprints address this by enabling the creation of preconfigured demo sites defined in a JSON format file.
How Blueprints Function
A Playground Blueprint is a JSON file that specifies a sequence of steps for the system to execute. These steps can include installing a specific theme, importing pre made website content, setting site options like the homepage, and even installing plugins. The process allows a theme to be showcased exactly as its designer intended, complete with pages, navigation menus, and media.
To function, the Blueprint and its associated assets, such as exported content files and images, must be hosted in a publicly accessible location. Many developers use GitHub repositories for this purpose, as the platform’s raw.githubusercontent.com domain is compatible with the import process.
The Development Process
Creating a theme demo with Blueprints involves a multi step workflow. First, a developer builds a complete demo site locally using their theme, crafting pages, posts, and applying desired settings. This content is then exported using WordPress’s standard export tool, generating an XML file.
A critical preparatory step involves handling images and other media. To ensure they load correctly in the browser based demo, these assets are uploaded to a public GitHub repository. The image URLs within the exported XML file must then be updated to point to these new GitHub locations.
Constructing the Blueprint File
The core of the demo is the blueprint.json file. This JSON document outlines the entire setup procedure. Common steps include a command to clear default WordPress sample content, a step to install and activate the chosen theme, and an instruction to import the prepared XML content file from its GitHub URL.
Developers can also configure specific site options within the Blueprint. This includes setting the site’s name and description, enabling “pretty” permalinks for functional links, and designating specific imported pages as the front page and posts page. The system also supports the installation of companion plugins if required for the demo.
Testing and Deployment
Before sharing, the Blueprint must be thoroughly tested. Developers can launch it via a specific Playground URL that includes a query parameter pointing to the blueprint.json file. This test confirms the theme installs correctly, all content imports, images load, and settings apply as defined.
Once verified, the demo is shared via a single link. This link launches the Playground instance and automatically executes the Blueprint, presenting visitors with the fully realized theme demo. The complete set of required files, including the Blueprint, content XML, and media assets, are typically maintained together in a public repository for transparency and reuse.
The technology underpinning this feature continues to evolve. The broader WordPress Playground project, which leverages WebAssembly to run PHP in the browser, is seeing increased integration across the ecosystem. For instance, WordPress Studio, a local development environment, has recently added support for Blueprints, indicating a growing adoption of the standard for creating and sharing WordPress configurations.
Source: Based on original developer documentation and announcements.
