One Click demo content installation feature in WordPress theme options panel

if you check the WordPress importer plugin it is easy to implement this feature. But if you want the direct answer , here it is

First of all, we need to copy the WordPress importer plugin files to our theme directory.
like this

    1. themes/bootstrapguru_theme/inc/wordpress-importer.php
    2. themes/bootstrapguru_theme/inc/parser.php

you can find this plugin here wordpress importer

after this step , we are going to create 3 new files

File 1 : bootstrapguru-import.php
paste the below code into that file

class bootstrapguru_import extends WP_Import
{
    function check()
    {
    //you can add any extra custom functions after the importing of demo coment is done
    }
}

File 2 : bootstrapguru-importer.php
paste the below code into that file

add_action( 'wp_ajax_my_action', 'my_action_callback' );
function my_action_callback() 
{
    global $wpdb; 

    if ( !defined('WP_LOAD_IMPORTERS') ) define('WP_LOAD_IMPORTERS', true);

    // Load Importer API
    require_once ABSPATH . 'wp-admin/includes/import.php';

    if ( ! class_exists( 'WP_Importer' ) ) {
        $class_wp_importer = ABSPATH . 'wp-admin/includes/class-wp-importer.php';
        if ( file_exists( $class_wp_importer ) )
        {
            require $class_wp_importer;
        }
    }

    if ( ! class_exists( 'WP_Import' ) ) {
        $class_wp_importer = get_template_directory() ."/inc/wordpress-importer.php";
        if ( file_exists( $class_wp_importer ) )
            require $class_wp_importer;
    }


    if ( class_exists( 'WP_Import' ) ) 
    { 
        $import_filepath = get_template_directory() ."/tmp/demo.xml" ; // Get the xml file from directory 

        include_once('bootstrapguru-import.php');

        $wp_import = new bootstrapguru_import();
        $wp_import->fetch_attachments = true;
        $wp_import->import($import_filepath);

        $wp_import->check();

    }
        die(); // this is required to return a proper result
}

File 3 : bootstrapguru-import.js
paste the below code into that file

(function($) {
    "use strict";
        $('.bootstrapguru_import').click(function(){
            $import_true = confirm('are you sure to import dummy content ? it will overwrite the existing data');
            if($import_true == false) return;

            $('.import_message').html(' Data is being imported please be patient, while the awesomeness is being created :)  ');
        var data = {
            'action': 'my_action'       
        };

       // since 2.8 ajaxurl is always defined in the admin header and points to admin-ajax.php
        $.post(ajaxurl, data, function(response) {
            $('.import_message').html('<div class="import_message_success">'+ response +'</div>');
            //alert('Got this from the server: ' + response); <i class="fa fa-spinner fa-3x fa-spin"></i>
        });
    });
})(jQuery);

in the above file, you might see that we click on a button with .bootstrapguru_import class will fire a call back function in wordpress. which is created in file 2 and also on success we are appending the message to .import_message div

we are close to finish our exercise 😉 lets tell the wordpress that we have new files by including single line in functions.php

include_once( 'inc/bootstrapguru-importer.php' );

so everything is set almost. Now create a button and div in your theme options panel in which button is to fire the import function and div is to post your successful import.

Let me know if you find any issues with my post, I might miss something. This worked for me after working on it for 6 hours

Leave a Comment