BlueTheme Docs

Making a demo package

Turn any site built with BlueTheme into a demo that other sites can import with the setup wizard. The package format, the import steps and what removal restores are described in demo internals.

1. Build the site

Build the demo on a clean WordPress with BlueTheme: pages with the builder, header and footer templates, menus, widgets and Theme Options. Everything the import should bring must be on this site.

  • Use images you may redistribute. The package carries the media files.
  • Don't use the site's real SEO settings, social links, custom code, SMS or license settings: they are never exported.
  • For a demo in both languages, build the Persian site and the English site with the same structure, for example the two dev sites.

2. Export it

From the dashboard: BlueTheme → Setup wizard → Export this site as a demo. The zip holds the site in its current language.

With WP-CLI, which can put both languages in one package:

# On the Persian site:
wp bluetheme demo export ./my-demo --id=my-demo --title="My demo" --lang=fa --user=admin
# On the English site, into the same folder:
wp bluetheme demo export ./my-demo --id=my-demo --title="My demo" --lang=en --zip=my-demo.zip --user=admin

The theme's own demos are generated from scripts instead (tools/demos/), so every rebuild is the same. See how the bundled demos are built.

3. Finish the manifest

Edit manifest.json in the package:

{
	"format": 1,
	"id": "my-demo",
	"version": "1.0.0",
	"title": { "en": "My demo", "fa": "دموی من" },
	"description": { "en": "A one-line description.", "fa": "یک خط توضیح." },
	"categories": [ "business" ],
	"languages": [ "fa", "en" ],
	"preview": { "fa": "preview-fa.webp", "en": "preview-en.webp" },
	"live": { "fa": "https://example.com/fa/", "en": "https://example.com/" },
	"plugins": { "required": [ "woocommerce" ], "recommended": [ "contact-form-7" ] }
}
  • preview: a picture of the front page in the package, about 960 × 720: one per language as here, or a single file name for all languages. The wizard shows the one in the site's language.
  • categories: the wizard's gallery filters by them.
  • plugins: WordPress.org slugs. The wizard installs required ones before importing.
  • live: optional addresses of the demo online, shown as "Live preview".

4. Test it

On a separate site with BlueTheme, copy the folder to wp-content/themes/bluetheme/demos/my-demo/. It then appears in the wizard's gallery, and in WP-CLI:

wp bluetheme demo list --user=admin
wp bluetheme demo import my-demo --lang=en --user=admin
wp bluetheme demo remove --user=admin

Check the front page, menus, header, footer and a few inner pages after the import. After the removal, the site should be as it was before.

5. Publish it

  • With the theme: put the folder in bluetheme/demos/my-demo/ of your build of the theme. Theme updates replace that folder, so publish demos for other sites online.
  • Online: upload the zip and its preview over https, and list them in a catalog file:
{ "demos": [ {
	"id": "my-demo", "version": "1.0.0",
	"title": { "en": "My demo", "fa": "دموی من" },
	"description": { "en": "…", "fa": "…" },
	"categories": [ "business" ], "languages": [ "fa", "en" ],
	"preview": "https://example.com/demos/my-demo.webp",
	"live": { "en": "https://example.com/" },
	"package": "https://example.com/demos/my-demo.zip",
	"plugins": { "required": [], "recommended": [] }
} ] }

Enter the catalog's address in Theme Options → Global → Performance → Demo catalog address. Sites read it every 12 hours, or at once with Check for new demos in the wizard. A plugin can also add demos with the bluetheme_demo_catalog filter.

Warning Remote packages may contain only data and media: JSON, JPG, PNG, WebP, GIF, MP4, WebM and text files. A package with anything else, such as PHP or SVG files, is refused.