A Simple Guide To Provide One Click Demo Import Feature In WordPress

Tips& Tricks

one-click-demo-import

Some theme authors asked how to provide their users or clients One Click Demo Import feature that allow them to setup their website easily. Today, I will share a very simple solution which I was used for my latest theme DGWork.

  1. First of all, just list all common requirements for this feature:
  2. Import all post, page, menus, custom fields.
  3. Import all the widgets and customizer settings.
  4. Automatically assigned the theme location for the custom menus.
  5. Automatically set the front page.
  6. And sometimes we also need to import the Revolution Slider demo.

Simply speaking, We need to use One Click Demo Import plugin, this is a very useful plugin provides basic importer features which can fix easily first and second requirements, thanks the plugin author! Now, the most important is how we fix the rest of three requirements. OK, let’s go.
 

Step 1. Export all the demo data

Go to Tools > Export, export all content, save the data file as content.xml

  • Install Widget Importer & Exporter plugin, go to Tools > Widgets Importer & Exporter, export widgets and save the file as widgets.wie
  • Install Customizer Export/Import plugin, go to Appearance > Customizer > Export/Import, export the customizer option data and save the file as customizer.dat
  • Additionally, you can export the slider via Revolution Slider.
  • Create a demo folder under your theme directory and put all data files into it.

 

Step 2. Define the demo files in theme folder

In the FAQ page of One Click Demo Import plugin, the plugin developer provides pt-ocdi/import_files filter that we can use to define the demo files in our theme folder. Refer to my code snippet, you can put the codes into the functions.php

/*Import content data*/
if ( ! function_exists( 'dgwork_import_files' ) ) :
function dgwork_import_files() {
    return array(
        array(
            'import_file_name'             => 'Default Demo',
            'local_import_file'            => trailingslashit( get_template_directory() ) . '/demo/default/content.xml',
            'local_import_widget_file'     => trailingslashit( get_template_directory() ) . '/demo/default/widgets.wie',
            'local_import_customizer_file' => trailingslashit( get_template_directory() ) . '/demo/default/customizer.dat',
            'import_preview_image_url'     => trailingslashit( get_template_directory() ) .'/demo/default/screenshot.png',
            'import_notice'                => __( 'Please waiting for a few minutes, do not close the window or refresh the page until the data is imported.', 'dgwork' ),
        ),

       array(
            'import_file_name'             => 'Demo2',
            'local_import_file'            => trailingslashit( get_template_directory() ) . '/demo/demo2/content.xml',
            'local_import_widget_file'     => trailingslashit( get_template_directory() ) . '/demo/demo2/widgets.wie',
            'local_import_customizer_file' => trailingslashit( get_template_directory() ) . '/demo/demo2/customizer.dat',
            'import_preview_image_url'     => trailingslashit( get_template_directory() ) . '/demo/demo2/screenshot.png',
            'import_notice'                => __( 'Please waiting for a few minutes, do not close the window or refresh the page until the data is imported.', 'dgwork' ),
        ),
}
add_filter( 'pt-ocdi/import_files', 'dgwork_import_files' );
endif;

Now activate One Click Demo Import plugin and go to Appearance > Import Demo Data, it will only show an import button.

demo-content-import

If you start to import the demo, you will find it will only import the all the demo data, but the menu theme location is unassigned as below, so the users have to do that by themselves, it’s not a good experience, right?

unassigned-menu
 

Step 3. Assign menus to theme locations

So we should programmatically assign menus to theme locations after the content imported, and luckly the plugin developer provides pt-ocdi/after_import filter that we can use set_theme_mod() function to assign menus to theme locations through this filter like the following codes.

if ( ! function_exists( 'dgwork_after_import' ) ) :
function dgwork_after_import( $selected_import ) {

    if ( 'Default Demo' === $selected_import['import_file_name'] ) {
        //Set Menu
        $top_menu = get_term_by('name', 'Top Menu', 'nav_menu');
        $mobile_menu = get_term_by('name', 'Mobile Menu', 'nav_menu');
        set_theme_mod( 'nav_menu_locations' , array( 
              'primary' => $top_menu->term_id, 
              'mobile' => $mobile_menu->term_id 
             ) 
        );
    }elseif ( 'Demo 2' === $selected_import['import_file_name'] ) {
        //Same codes as above for the demo 2
    }
    
}
add_action( 'pt-ocdi/after_import', 'dgwork_after_import' );
endif;

You have to replace ‘Top Menu’ and ‘Mobile Menu’ to your own menu name as well as the theme location name ‘primary’ and ‘mobile’.  Then, if you run the importer again, you will pleasantly surprised found the menu assigned to the theme location.

assigned-menu

 

Step 4. Programmatically set the front page

Let’s continue to complete the dgwork_after_import function. Use the update_option() to set the front page for your WordPress. Refer to the following codes, just replace ‘Home’ to the page name which you want to set it as the front page in get_page_by_title( ‘Home’);

if ( ! function_exists( 'dgwork_after_import' ) ) :
function dgwork_after_import( $selected_import ) {

    if ( 'Default Demo' === $selected_import['import_file_name'] ) {
        //Set Menu
        $top_menu = get_term_by('name', 'Top Menu', 'nav_menu');
        $mobile_menu = get_term_by('name', 'Mobile Menu', 'nav_menu');
        set_theme_mod( 'nav_menu_locations' , array( 
              'primary' => $top_menu->term_id, 
              'mobile' => $mobile_menu->term_id 
             ) 
        );

       //Set Front page
       $page = get_page_by_title( 'Home');
       if ( isset( $page->ID ) ) {
        update_option( 'page_on_front', $page->ID );
        update_option( 'show_on_front', 'page' );
       }
    }elseif ( 'Demo 2' === $selected_import['import_file_name'] ) {
        //Same codes as above for the demo 2
    }
    
}

 

Step 5. Automatically import the demo file of revolution slider

Some themeforest authors also wants their theme buyers to import the preset demo files of revolution slider while running the one click demo importer. It’s not hard, just use $slider->importSliderFromPost(true,true,$filepath); function to import it as below.

if ( ! function_exists( 'dgwork_after_import' ) ) :
function dgwork_after_import( $selected_import ) {

    if ( 'Default Demo' === $selected_import['import_file_name'] ) {
        //Set Menu
        $top_menu = get_term_by('name', 'Top Menu', 'nav_menu');
        $mobile_menu = get_term_by('name', 'Mobile Menu', 'nav_menu');
        set_theme_mod( 'nav_menu_locations' , array( 
              'primary' => $top_menu->term_id, 
              'mobile' => $mobile_menu->term_id 
             ) 
        );

       //Set Front page
       $page = get_page_by_title( 'Home');
       if ( isset( $page->ID ) ) {
        update_option( 'page_on_front', $page->ID );
        update_option( 'show_on_front', 'page' );
       }

       //Import Revolution Slider
       if ( class_exists( 'RevSlider' ) ) {
           $slider_array = array(
              get_template_directory()."/demo/default/home-slider-1.zip",
              get_template_directory()."/demo/default/home_slider_2.zip"
              );

           $slider = new RevSlider();
       
           foreach($slider_array as $filepath){
             $slider->importSliderFromPost(true,true,$filepath);  
           }
       
           echo ' Slider processed';
      }
    }elseif ( 'Demo 2' === $selected_import['import_file_name'] ) {
        //Same codes as above for the demo 2
    }
    
}

 

That’s it, simple and works like a charm!

7 thoughts on “A Simple Guide To Provide One Click Demo Import Feature In WordPress

  1. Hello dear
    How we can predefine our demo file in our theme…i have tried but its not working…it not showing our demo files there…can you guide. Thank you…….

Leave a Reply

Your email address will not be published. Required fields are marked *

×