Introduction
The Quick Demo Import is a powerful free WordPress plugin, that is designed especially for theme authors. With the help of this plugin, theme authors can let their theme users import the demo content and preview the demo right from the dashboard. Quick Demo Import offers a very nice and intuitive interface that WP users are familiar with.
Integration Guide
To integrate this plugin with your theme and let your users easily import the demo, you just have to follow a few steps.
The first step is to let this plugin know your theme is supported by using this hook quick-demo-import/supported_themes. Here is an example:
function your_theme_prefix_qdi_support( $themes ) {
return array_merge( $themes, array( 'your-theme-slug' ) );
}
add_filter( 'quick-demo-import/supported_themes', 'your_theme_prefix_qdi_support' );The second step is to configure demos. To add your theme demos, you need to add them with the quick-demo-import/demo_packages hook. Here is an example:
function your_theme_prefix_qdi_demo_packages() {
return array(
'demos' => array(
'demo-1' => array(
'title' => 'Demo 1',
'preview' => 'http://example.com/',
'screenshot' => 'https://example.com/screenshot.jpg',
'zip' => 'http://example.com/demo-1.zip',
),
),
);
}
add_filter( 'quick-demo-import/demo_packages', 'your_theme_prefix_qdi_demo_packages' );
All the parameters are required and should be in a similar structure.
The compressed zip link should contain 3 files:
- An XML file which is WordPress content export file.
- A WIE file which is WordPress widget export file that cna be exported using Widget Import & Exporter plugin.
- A DAT file which is WordPress customizer export file that can be exported using Customizer Import/Export plugin.
This plugin is capable of filtering demos according to category or page-builder (Eg: Elementor, Brizy, Siteorigin Panels, etc). Here is an example code snippet to make your demos filterable:
function your_theme_prefix_qdi_demo_packages() {
return array(
'categories' => array(
'business' => __( 'Business', 'your-theme-textdomain' ),
'ecommerce' => __( 'Ecommerce', 'your-theme-textdomain' ),
),
'pagebuilders' => array(
'elementor' => 'Elementor',
'brizy' => 'Brizy',
),
'demos' => array(
'demo-1' => array(
'title' => 'Demo 1',
'preview' => 'http://example.com/',
'description' => 'Demo 1 site description',
'screenshot' => 'https://example.com/screenshot.jpg',
'zip' => 'http://example.com/demo-1.zip',
'category' => array( 'business' ),
'pagebuilder' => array( 'elementor' ),
),
'demo-2' => array(
'title' => 'Demo 2',
'preview' => 'http://example.com/',
'description' => 'Demo 1 site description',
'screenshot' => 'https://example.com/screenshot.jpg',
'zip' => 'http://example.com/demo-1.zip',
'category' => array( 'ecommerce' ),
'pagebuilder' => array( 'brizy' ),
),
),
);
}
add_filter( 'quick-demo-import/demo_packages', 'your_theme_prefix_qdi_demo_packages' );
This plugin lets you install/activate the required plugins automatically that your demos might need. Here is an example code snippet to configure them:
function your_theme_prefix_qdi_demo_packages() {
return array(
'demos' => array(
'demo-1' => array(
'title' => 'Demo 1',
'preview' => 'http://example.com/',
'screenshot' => 'https://example.com/screenshot.jpg',
'zip' => 'http://example.com/demo-1.zip',
'plugins_list' => array(
'example-plugin-1' => array(
'name' => 'Example Plugin 1',
'slug' => 'example-plugin-1/example-plugin-1.php', // plugin-basename/plugin-main-file.php
),
'example-plugin-2' => array(
'name' => 'Example Plugin 2',
'slug' => 'example-plugin-2/example-plugin-2.php', // plugin-basename/plugin-main-file.php
),
),
),
),
);
}
add_filter( 'quick-demo-import/demo_packages', 'your_theme_prefix_qdi_demo_packages' );
Note: The plugins that you add in the plugins list should be available in the official WordPress plugins repository.
This plugin also lets you configure the site title, front page, and blog page right from the configuration.
function your_theme_prefix_qdi_demo_packages() {
return array(
'demos' => array(
'demo-1' => array(
'title' => 'Demo 1',
'preview' => 'http://example.com/',
'screenshot' => 'https://example.com/screenshot.jpg',
'zip' => 'http://example.com/demo-1.zip',
'core_options' => array(
'blogname' => 'Demo 1', // Demo site title.
'page_on_front' => 'Home', // Demo home page title.
'page_for_posts' => 'Blog', // Demo blog page title.
),
),
),
);
}
add_filter( 'quick-demo-import/demo_packages', 'your_theme_prefix_qdi_demo_packages' );
To set the menus as per the demo, you can also configure them. Here is an example:
function your_theme_prefix_qdi_demo_packages() {
return array(
'demos' => array(
'demo-1' => array(
'title' => 'Demo 1',
'preview' => 'http://example.com/',
'screenshot' => 'https://example.com/screenshot.jpg',
'zip' => 'http://example.com/demo-1.zip',
'customizer_data_update' => array(
'nav_menu_locations' => array(
'primary' => 'Primary menu', // 'registered nav menu location => 'menu title'
'footer' => 'Footer menu', // 'registered nav menu location => 'menu title'
'mobile' => 'Mobile menu', // 'registered nav menu location => 'menu title'
),
),
),
),
);
}
add_filter( 'quick-demo-import/demo_packages', 'your_theme_prefix_qdi_demo_packages' );Here is an example code snippet with fully configured demos:
function your_theme_prefix_qdi_demo_packages() {
return array(
'categories' => array(
'business' => 'Business',
'ecommerce' => 'eCommerce',
),
'pagebuilders' => array( // Optional.
'elementor' => 'Elementor',
'brizy' => 'Brizy',
),
'demos' => array(
'demo-1' => array(
'title' => 'Demo 1',
'preview' => 'http://example.com/',
'screenshot' => 'https://example.com/screenshot.jpg',
'zip' => 'http://example.com/demo-1.zip',
'category' => array( 'business' ),
'pagebuilder' => array( 'elementor' ),
'plugins_list' => array(
'example-plugin-1' => array(
'name' => 'Example Plugin `',
'slug' => 'example-plugin-1/example-plugin-1.php', // plugin-basename/plugin-main-file
),
),
'core_options' => array(
'blogname' => 'Demo 1',
'page_on_front' => 'Home',
'page_for_posts' => 'Blog',
),
'customizer_data_update' => array(
'nav_menu_locations' => array(
'primary' => 'Primary menu', // 'registered nav menu location => 'menu title'
'footer' => 'Footer menu', // 'registered nav menu location => 'menu title'
'mobile' => 'Mobile menu', // 'registered nav menu location => 'menu title'
),
),
),
'demo-2' => array(
'title' => 'Demo 2',
'preview' => 'http://example.com/',
'screenshot' => 'https://example.com/screenshot.jpg',
'zip' => 'http://example.com/demo-2.zip',
'category' => array( 'business' ),
'pagebuilder' => array( 'elementor' ),
'plugins_list' => array(
'example-plugin-2' => array(
'name' => 'Example Plugin `',
'slug' => 'example-plugin-1/example-plugin-2.php', // plugin-basename/plugins-main-file
),
),
'core_options' => array(
'blogname' => 'Demo 2',
'page_on_front' => 'Home',
'page_for_posts' => 'Blog',
),
'customizer_data_update' => array(
'nav_menu_locations' => array(
'primary' => 'Main menu', // 'registered nav menu location => 'menu title'
),
),
),
),
);
}Note: The code structure should be similar and the array keys and array values’ data type should match as in the example above.
Result:
Note: According to the WordPress theme guidelines, the inclusion of direct download links such as links to the zip or any other remote URL is prohibited other than Google Fonts in the theme. So, to tackle this theme authors need to create a companion plugin that will have the above integration scripts. Example plugin.
Recommend Quick Demo Import in your theme
Theme authors can recommend the Quick Demo Import plugin to the users using TGMPA library or with custom scripts. Here we show an example to recommend users to install and activate this plugin via admin welcome notice without TGMPA library.
Firstly, we will enqueue required scripts and create nonce for some ajax actions.
/**
* Enqueue scripts and pass data to JS.
*
* @return void
*/
function your_theme_prefix_admin_scripts() {
wp_enqueue_script( 'your-theme-prefix', get_stylesheet_directory_uri() . '--path-to-js-script--', array( 'jquery' ), YOUR_THEME_VERSION, true );
wp_localize_script(
'your-theme-prefix',
'yourThemeNameAdmin',
array(
'uri' => '/themes.php?page=demo-importer&browse=all', // Importer page URI.
'dismissNonce' => wp_create_nonce( 'your_theme_prefix_dismiss_notice_nonce' ), // Dismiss nonce.
'installNonce' => wp_create_nonce( 'your_theme_prefix_qdi_install_nonce' ), // Install nonce.
)
);
}
add_action( 'admin_enqueue_scripts', 'your_theme_prefix_admin_scripts' );Now, we display our admin notice.
<?php
/**
* Admin notice markup.
*
* @return void
*/
function your_theme_prefix_admin_notice() {
if ( get_option( '_your_theme_prefix_hide_notice_flag' ) ) {
return;
}
?>
<div class="notice notice-info is-dismissible your-theme-prefix-notice">
<h2><?php esc_html_e( 'Quick Demo Import plugin is recommended to import your favourite demo!', 'your-theme-textdomain' ); ?></h2>
<button class="btn-get-qdi button button-primary button-hero"><?php esc_html_e( 'Get Quick Demo Import plugin', 'your-theme-textdomain' ); ?></button>
<p class="plugin-install-info"><?php esc_html_e( 'Clicking the button will install and activate the Quick Demo Import plugin.', 'your-theme-textdomain' ); ?></p>
</div>
<?php
}
add_action( 'admin_notices', 'your_theme_prefix_admin_notice' );Now, we will add ajax callbacks for notice dismiss and plugin install.
/**
* Install and activate Quick Demo Import plugin.
*
* @return void
*/
function your_theme_prefix_install_qdi_plugin() {
check_ajax_referer( 'your_theme_prefix_qdi_install_nonce', 'security' );
update_option( '_your_theme_prefix_hide_notice_flag', 1 );
$state = '';
if ( class_exists( 'QuickDemoImport' ) ) {
$state = 'activated';
} elseif ( file_exists( WP_PLUGIN_DIR . '/quick-demo-import/qdi.php' ) ) {
$state = 'installed';
}
if ( 'activated' === $state ) {
$response['redirect'] = admin_url( '/themes.php?page=demo-importer&browse=all' );
} elseif ( 'installed' === $state ) {
$response['redirect'] = admin_url( '/themes.php?page=demo-importer&browse=all' );
if ( current_user_can( 'activate_plugin' ) ) {
$result = activate_plugin( 'quick-demo-import/qdi.php' );
if ( is_wp_error( $result ) ) {
$response['errorCode'] = $result->get_error_code();
$response['errorMessage'] = $result->get_error_message();
}
}
} else {
wp_enqueue_style( 'plugin-install' );
wp_enqueue_script( 'plugin-install' );
$response['redirect'] = admin_url( '/themes.php?page=demo-importer&browse=all' );
/**
* Install Plugin.
*/
include_once ABSPATH . 'wp-admin/includes/class-wp-upgrader.php';
include_once ABSPATH . 'wp-admin/includes/plugin-install.php';
$api = plugins_api(
'plugin_information',
array(
'slug' => sanitize_key( wp_unslash( 'quick-demo-import' ) ),
'fields' => array(
'sections' => false,
),
)
);
$skin = new WP_Ajax_Upgrader_Skin();
$upgrader = new Plugin_Upgrader( $skin );
$result = $upgrader->install( $api->download_link );
if ( $result ) {
$response['installed'] = 'succeed';
} else {
$response['installed'] = 'failed';
}
// Activate plugin.
if ( current_user_can( 'activate_plugin' ) ) {
$result = activate_plugin( 'quick-demo-import/qdi.php' );
if ( is_wp_error( $result ) ) {
$response['errorCode'] = $result->get_error_code();
$response['errorMessage'] = $result->get_error_message();
}
}
}
wp_send_json( $response );
exit();
}
add_action( 'wp_ajax_your-theme-prefix-install-qdi-plugin', 'your_theme_prefix_install_qdi_plugin' );
/**
* Dismiss the admin notice.
*
* @return void
*/
function your_theme_prefix_dismiss_notice() {
check_ajax_referer( 'your_theme_prefix_dismiss_notice_nonce', 'security' );
update_option( '_your_theme_prefix_hide_notice_flag', 1 );
wp_send_json_success();
exit();
}
add_action( 'wp_ajax_your-theme-prefix-dismiss-notice', 'your_theme_prefix_dismiss_notice' );Lastly, we will add JS scripts to trigger the ajax actions on click events in the JS file that we have enqueued earlier.
jQuery( document ).ready( function( $ ) {
$( '.your-theme-prefix-notice .btn-get-qdi' ).on( 'click', function( e ) {
e.preventDefault();
$( this ).addClass( 'updating-message' ).text( 'Installing..' );
$.ajax( {
type : "POST",
url : ajaxurl, // URL to "wp-admin/admin-ajax.php"
data : {
action : 'your-theme-prefix-install-qdi-plugin',
security : yourThemeNameAdmin.installNonce,
},
success : function( response ) {
window.location.href = response.redirect;
},
error : function( xhr, ajaxOptions, thrownError ){
console.log(thrownError);
}
} );
} );
$( '.your-theme-prefix-notice .notice-dismiss' ).on( 'click', function ( e ) {
e.preventDefault();
$.ajax( {
type: 'POST',
url: ajaxurl,
data: {
action: 'your-theme-prefix-dismiss-notice',
security: yourThemeNameAdmin.dismissNonce
},
error : function( xhr, ajaxOptions, thrownError ){
console.log(thrownError);
}
} )
} )
} );
For convenience, we have created a PHP class that can be utilized to display the admin notice. You can download the zip file and rename the filename and class name and include it in your theme or plugin. And the class be initialized as below:
Welcome_Notice::init(
array(
'text_domain' => 'plugin/theme text-domain', // Required: Will be used to setup ajax actions and option keys.
'message' => 'Welcome !', // Optional: Notice message, can accept HTML.
'plugins_list' => array( // Optional: On clicking notice action button will install the plugins.
'example-plugin-1' => array(
'name' => 'Example Plugin',
'slug' => 'example-plugin/example-plugin.php', // plugin-basename/plugins-main-file
),
),
'styles' => '.example { color:red }', // Optional: Pass styles to suit your need.
'notice_action_text' => 'Get started!', // Optional: Notice action button text.
)
);That is it. Now you have fully integrated the Quick Demo Import plugin with your theme.
Demo Import Process Failed
If you have tried to install demo content either via our demo importer plugin or via demo content importer packed inside the premium themes and failed, then there could be several possible reasons for this. Most of the time it is your web host’s configuration that is preventing the demo import process. If you are on a shared host then chances are high that your host has put some limit.
For the demo import to work properly we recommend the following PHP configuration:
- max_execution_time 360
- memory_limit 256M
- post_max_size 32M
- upload_max_filesize 32M
If you are not tech-savvy and worried about how you can find this information then you can directly contact your host and ask them to increase your configuration as recommended above. Or you can install this little plugin that will show you the PHP configuration.