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

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!

« Previous Post
Next Post »

8 COMMENTS ON THIS POST To “A Simple Guide To Provide One Click Demo Import Feature In WordPress”

  1. Kris October 19, 2016 at 10:25 pm

    Hi, this looks great. But how to include there theme options (json)?

    • John Wu October 27, 2016 at 4:48 pm

      I think it depends on which theme option framework you use and whether it provides export method.

    • Jake November 21, 2016 at 7:42 pm

      second this, how can we set up the import of theme options .json file, e.g. for Divi theme?

      • John Wu November 23, 2016 at 6:57 pm

        Hi

        You have to ask Divi theme author provide you the codes of export method, then add the codes into the function.

  2. Daniel November 23, 2016 at 10:29 am

    Great post !! Just follow your tutorial and everything work great. Thanks!!!

    • John Wu November 30, 2016 at 3:38 pm

      Cool! Glad to hear that!

  3. Maureen November 30, 2016 at 3:45 am

    Thanks! Any idea how to assign the secondary menu?

    • John Wu November 30, 2016 at 3:37 pm

      Hi

      You can refer to the following example

      //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 
                   ) 
          );
      

Leave a Reply

RECENT TWEETS

FOLLOW US

We are addicted to WordPress development and provide Easy to using & Shine Looking themes selling on ThemeForest.

You can also follow us on the following social network.

Error: Please enter a valid email address

Error: Invalid email