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 »

14 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 
                   ) 
          );
      
  4. Primoz Cigler March 7, 2017 at 3:01 pm

    Hi John,

    Primoz here, co-author of the plugin and ProteusThemes business owner. I just wanted to chime-in and say thank you for writing this tutorial.

    The motivation for this plugin was that there were no reliable solutions out there like this. There were some scripts, but most theme authors instructed their users to use an official wp importer and do everything manually, which is unreliable and slow at least.

    All the best to you and your business!

    Primoz

    • John Wu March 7, 2017 at 8:09 pm

      Hi Primoz,

      So glad to meet you here. Yes, when I was planning to add one click import feature in my theme, I was googling so many solutions and hesitating until I found your plugin, it makes things easy! Thanks for your plugin.

      Also, I know you in the Envato Elite Author slack group and your themes are very high quality, I have recommended some my users to buy your theme when they asking me the theme which they were looking for, but I don’t have 🙂

      Thanks again for your plugin!

      • Primoz Cigler March 9, 2017 at 10:01 am

        Hi John,

        > So glad to meet you here.

        Likewise! I hope we meet some day face to face 🙂

        Wow, thank you so much for recommending our themes! I don’t know if you’ve noticed, but we also offer affiliate program now (with better terms than TF). I won’t be spamming here with links, but you can send me an email (or write over slack group) for details.

        Your themes look slick as well! Congrats on your latest DGWork, I love the EDD itegration!

        • John Wu March 10, 2017 at 9:15 am

          Thanks for telling the affiliate program. I know your ProteusThemes website, and I will sign up and next time I will send users the referral link and earn commission 😀 😀

          I noticed that your theme shop includes Envato themes and club themes, does affiliate program is only ready for the club themes?

          • Primoz Cigler March 19, 2017 at 1:08 pm

            Affiliate program is for now only for club themes. But this week or so we’re changing the design so the TF themes will not be so exposed and the theme club themes will get all the exposure.

            We’re even thinking about hiding the TF themes for the visitors who have the affiliate cookie. What do you think?

          • John Wu March 25, 2017 at 2:40 pm

            That is what I thought, but those TF themes will lose some traffic from your website. Maybe you can add two options on affiliate page, one is for club theme, and another one is for TF affiliate 😀

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