Starter Content

The content used on every theme demo must be exportable, and users should be able to replicate the demo easily. For this purpose, we've made the Starter Content Exporter plugin, and we've implemented a Starter Content Component in Pixelgrade Care which handles the import action if some export data is available.

How to prepare Starter Content for a new theme?

First of all, we need to set up the export data. On our multi-site demos installation, the Starter Content plugin is already active, you only need to activate it and a menu item will appear in `Settings -> Demo Exporter`.

Images

Usually, the images used in the theme presentation are under copyright which won't allow us to serve them to the public.

That's why you need to select a few (four or five) Placeholder Images (with a permissive copyright) which will replace all the images on the client site.

There is also a zone, Ignored Images, where you can select which images shouldn't be replaced by placeholders, for example, the logos, favicons or demo screenshots.

Posts and Categories

Next, you need to select which posts and categories you want to export.
Be careful not to select posts like Hello World, Sample Page or any [Test] … pages. Everything you choose here will end up on the client website

Navigations

Menus and Menu Items are posts and terms so you can select them in the Posts and Categories area.
Treat them with Care. Usually, on each theme demo, there are a lot of testing menus or menu items, so you need to select only the menu items which are public and usable for clients.

Widgets

At this point there is no UI for selecting widgets, they all get exported. Also, the Text Widget gets parsed for images and replaced with placeholders.

Options and Theme Mods

The Settings API export is explained on the repo

Some options are holding posts ids or images URLs. These values are useless on the client's website because there, the posts and attachments are imported with different IDS.

For this case, Pixelgrade Care has a few filters which allow us to replace these ids.

pixcare_sce_import_{$type}_theme_mod_{$theme_mod_key}

pixcare_sce_import_{$type}_option_{$option_key}

Where `$type` can be `pre` or `post` so we can have a chance to filter the options imported and the beginning of the import action or at the end.

These filters are meant to be used inside themes because each theme has an individual set of options. Conceptually the themes are entitled to filter and select their data while importing.

For example, in Rosa theme, we've replaced the logo attachment ID from the demo with the one on the client's site.

Testing Locally

A good way to test the Starter Content Component is to filter the Pixelgrade Care config locally.

Here is the example used for Heap

<?php
/**
 * Filter the PixCare Manager served config and add our own for debugging purpose
 */
function testing_the_starter_content( $config ) {
        // first, tell the component where the import data comes
	$config['themeConfig']['starterContent'] = array(
		'demos' => array(
			array(
				'title'       => 'Heap',
				'url'         => 'https://demos.pixelgrade.com/heap',
				'description' => 'The first real case importer'
			)
		)
	);

        // add the starter content component in the theme dashboard
	$config['themeConfig']['dashboard']['general']['blocks']['starter_content'] = array(
		'class'  => 'full white',
		// 'inactive' => 'hidden', // you can chose to hide this component when the user doesn't have an active license
		'fields' => array(
			'title'           => array(
				'type'  => 'h2',
				'value' => 'Starter Content',
				'class' => 'section__title'
			),
			'content'         => array(
				'type'  => 'text',
				'value' => 'Load some data.',
				'class' => 'section__content'
			),
			'starter_content' => array(
				'type'  => 'component',
				'value' => 'starter-content'
			),
		)
	);

        // add the starter content component instead of the support step
	$config['themeConfig']['setupWizard']['support'] = array(
		'stepName' => 'Starter Content',
		'blocks'   => array(
			'plugins' => array(
				'class'  => 'full white',
				'fields' => array(
					'title'             => array(
						'type'  => 'h2',
						'value' => 'Starter Content',
						'class' => 'section__title'
					),
					'plugins_component' => array(
						'title' => 'Starter Content',
						'type'  => 'component',
						'value' => 'starter-content',
//						'inactive' => 'notice', // you can chose to inform the user when he doesn't have an active license yet.
					),
				)
			),
		),
	);
	return $config;
}
add_filter( 'pixcare_localized_data', 'testing_the_starter_content' );

Adding the Starter Content

After the export data is ready and the options filters set in themes, now we can serve it to our users.
This means that we need to add the Starter Content Component in the PixCare Manager config.
This config has the same structure as the one used in the local filter above except that here is a JSON string.