Wordpress Show Custom Widgets Fields


Once the widget class is extended, we'll need to update the widget fields that defines the form fields that should be available while adding the widget to any widget holders. Here's the function file to display widget fields.

<?php
function theme_widgets_show_widget_field($instance = '', $widget_field = '', $athm_field_value = '') {    
    $theme_postlist[0] = array(
        'value' => 0,
        'label' => '--choose--'
    );
    $arg = array('posts_per_page' => -1);
    $theme_posts = get_posts($arg);
    foreach ($theme_posts as $theme_post) :
        $theme_postlist[$theme_post->ID] = array(
            'value' => $theme_post->ID,
            'label' => $theme_post->post_title
        );
    endforeach;

    extract($widget_field);

    switch ($theme_widgets_field_type) {
        
        case 'text' :
            ?>
            <p>
                <label for="<?php echo $instance->get_field_id($theme_widgets_name); ?>"><?php echo $theme_widgets_title; ?>:</label>
                <input class="widefat" id="<?php echo $instance->get_field_id($theme_widgets_name); ?>" name="<?php echo $instance->get_field_name($theme_widgets_name); ?>" type="text" value="<?php echo esc_attr($athm_field_value) ; ?>" />

                <?php if (isset($theme_widgets_description)) { ?>
                    <br />
                    <small><?php echo $theme_widgets_description; ?></small>
                <?php } ?>
            </p>
            <?php
            break;
                    
        case 'title' :
            ?>
            <p>
                <label for="<?php echo $instance->get_field_id($theme_widgets_name); ?>"><?php echo $theme_widgets_title; ?>:</label>
                <input class="widefat" id="<?php echo $instance->get_field_id($theme_widgets_name); ?>" name="<?php echo $instance->get_field_name($theme_widgets_name); ?>" type="text" value="<?php echo esc_attr($athm_field_value) ; ?>" />

                <?php if (isset($theme_widgets_description)) { ?>
                    <br />
                    <small><?php echo $theme_widgets_description; ?></small>
                <?php } ?>
            </p>
            <?php
            break;
            
        case 'group_start' :
        ?>
            <div class="main-group" id="ap-font-awesome-list <?php echo $instance->get_field_id(($theme_widgets_name)); ?>">
                <div class="main-group-heading"><?php echo $theme_widgets_title ; ?><span class="toogle-arrow"></span></div>
                <div class="main-group-wrap">
            
        <?php
        break;
        
        case 'group_end':
        ?></div>
        </div><?php
        break;
                
        case 'url' :
            ?>
            <p>
                <label for="<?php echo $instance->get_field_id($theme_widgets_name); ?>"><?php echo $theme_widgets_title; ?>:</label>
                <input class="widefat" id="<?php echo $instance->get_field_id($theme_widgets_name); ?>" name="<?php echo $instance->get_field_name($theme_widgets_name); ?>" type="text" value="<?php echo $athm_field_value; ?>" />

                <?php if (isset($theme_widgets_description)) { ?>
                    <br />
                    <small><?php echo $theme_widgets_description; ?></small>
                <?php } ?>
            </p>
            <?php
            break;
        
        case 'textarea' :
            ?>
            <p>
                <label for="<?php echo $instance->get_field_id($theme_widgets_name); ?>"><?php echo $theme_widgets_title; ?>:</label>
                <textarea class="widefat" rows="<?php echo $theme_widgets_row; ?>" id="<?php echo $instance->get_field_id($theme_widgets_name); ?>" name="<?php echo $instance->get_field_name($theme_widgets_name); ?>"><?php echo $athm_field_value; ?></textarea>
            </p>
            <?php
            break;
                
        case 'iframe_textarea' :
            ?>
            <p>
                <label for="<?php echo $instance->get_field_id($theme_widgets_name); ?>"><?php echo $theme_widgets_title; ?>:</label>
                <textarea class="widefat" rows="<?php echo $theme_widgets_row; ?>" id="<?php echo $instance->get_field_id($theme_widgets_name); ?>" name="<?php echo $instance->get_field_name($theme_widgets_name); ?>"><?php echo $athm_field_value; ?></textarea>
            </p>
            <?php
            break;

        
        case 'checkbox' :
            ?>
            <p>
                <input id="<?php echo $instance->get_field_id($theme_widgets_name); ?>" name="<?php echo $instance->get_field_name($theme_widgets_name); ?>" type="checkbox" value="1" <?php checked('1', $athm_field_value); ?>/>
                <label for="<?php echo $instance->get_field_id($theme_widgets_name); ?>"><?php echo $theme_widgets_title; ?></label>

                <?php if (isset($theme_widgets_description)) { ?>
                    <br />
                    <small><?php echo $theme_widgets_description; ?></small>
                <?php } ?>
            </p>
            <?php
            break;
        
        case 'radio' :
            ?>
            <p>
                <?php
                echo $theme_widgets_title;
                echo '<br />';
                foreach ($theme_widgets_field_options as $athm_option_name => $athm_option_title) {
                    ?>
                    <input id="<?php echo $instance->get_field_id($athm_option_name); ?>" name="<?php echo $instance->get_field_name($theme_widgets_name); ?>" type="radio" value="<?php echo $athm_option_name; ?>" <?php checked($athm_option_name, $athm_field_value); ?> />
                    <label for="<?php echo $instance->get_field_id($athm_option_name); ?>"><?php echo $athm_option_title; ?></label>
                    <br />
                <?php } ?>

                <?php if (isset($theme_widgets_description)) { ?>
                    <small><?php echo $theme_widgets_description; ?></small>
                <?php } ?>
            </p>
            <?php
            break;
        
        case 'select' :
            ?>
            <p>
                <label for="<?php echo $instance->get_field_id($theme_widgets_name); ?>"><?php echo $theme_widgets_title; ?>:</label>
                <select name="<?php echo $instance->get_field_name($theme_widgets_name); ?>" id="<?php echo $instance->get_field_id($theme_widgets_name); ?>" class="widefat">
                    <?php foreach ($theme_widgets_field_options as $athm_option_name => $athm_option_title) { ?>
                        <option value="<?php echo $athm_option_name; ?>" id="<?php echo $instance->get_field_id($athm_option_name); ?>" <?php selected($athm_option_name, $athm_field_value); ?>><?php echo $athm_option_title; ?></option>
                    <?php } ?>
                </select>

                <?php if (isset($theme_widgets_description)) { ?>
                    <br />
                    <small><?php echo $theme_widgets_description; ?></small>
                <?php } ?>
            </p>
            <?php
            break;

        case 'number' :
            ?>
            <p>
                <label for="<?php echo $instance->get_field_id($theme_widgets_name); ?>"><?php echo $theme_widgets_title; ?>:</label><br />
                <input name="<?php echo $instance->get_field_name($theme_widgets_name); ?>" type="number" step="4" min="4" id="<?php echo $instance->get_field_id($theme_widgets_name); ?>" value="<?php echo $athm_field_value; ?>" class="small-text" />

                <?php if (isset($theme_widgets_description)) { ?>
                    <br />
                    <small><?php echo $theme_widgets_description; ?></small>
                <?php } ?>
            </p>
            <?php
            break;
        
        case 'selectpost' :
            ?>
            <p>
                <label for="<?php echo $instance->get_field_id($theme_widgets_name); ?>"><?php echo $theme_widgets_title; ?>:</label>
                <select name="<?php echo $instance->get_field_name($theme_widgets_name); ?>" id="<?php echo $instance->get_field_id($theme_widgets_name); ?>" class="widefat">
                    <?php foreach ($theme_postlist as $theme_single_post) { ?>
                        <option value="<?php echo $theme_single_post['value']; ?>" id="<?php echo $instance->get_field_id($theme_single_post['label']); ?>" <?php selected($theme_single_post['value'], $athm_field_value); ?>><?php echo $theme_single_post['label']; ?></option>
                    <?php } ?>
                </select>

                <?php if (isset($theme_widgets_description)) { ?>
                    <br />
                    <small><?php echo $theme_widgets_description; ?></small>
                <?php } ?>
            </p>
            <?php
            break;

        case 'upload' :

            $output = '';
            $id = $instance->get_field_id($theme_widgets_name);
            $class = '';
            $int = '';
            $value = $athm_field_value;

            $name = $instance->get_field_name($theme_widgets_name);

            

            if ($value) {
                $class = ' has-file';
            }
            $output .= '<div class="sub-option section widget-upload">';
            $output .= '<label for="'.$instance->get_field_id($theme_widgets_name).'">'.$theme_widgets_title.'</label><br/>';
            $output .= '<input id="' . $id . '" class="upload' . $class . '" type="text" name="' . $name . '" value="' . $value . '" placeholder="' . __('No file chosen', 'my_theme') . '" />' . "\n";
            if (function_exists('wp_enqueue_media')) {
                if (( $value == '')) {
                    $output .= '<input id="upload-' . $id . '" class="upload-button-wdgt button" type="button" value="' . __('Upload', 'my_theme') . '" />' . "\n";
                } else {
                    $output .= '<input id="remove-' . $id . '" class="remove-file button" type="button" value="' . __('Remove', 'my_theme') . '" />' . "\n";
                }
            } else {
                $output .= '<p><i>' . __('Upgrade your version of WordPress for full media support.', 'my_theme') . '</i></p>';
            }

            $output .= '<div class="screenshot team-thumb" id="' . $id . '-image">' . "\n";
            if ($value != '') {
                $remove = '<a class="remove-image">Remove</a>';
                $image = preg_match('/(^.*\.jpg|jpeg|png|gif|ico*)/i', $value);
                if ($image) {
                    $output .= '<img src="' . $value . '" alt="" width="100%" />' . $remove;
                } else {
                    $parts = explode("/", $value);
                    for ($i = 0; $i < sizeof($parts); ++$i) {
                        $title = $parts[$i];
                    }
                    
                    $output .= '';
                    
                    $title = __('View File', 'my_theme');
                    $output .= '<div class="no-image"><span class="file_link"><a href="' . $value . '" target="_blank" rel="external">' . $title . '</a></span></div>';
                }
            }
            $output .= '</div></div>' . "\n";
            echo $output;
            break;

            case 'icon' :
             add_thickbox();
            ?>
            <p>
                <label for="<?php echo $instance->get_field_id($theme_widgets_name); ?>"><?php echo $theme_widgets_title; ?>:</label><br />
                <span class="icon-receiver"><i class="<?php echo $athm_field_value; ?>"></i></span>
                <input class="hidden-icon-input" name="<?php echo $instance->get_field_name($theme_widgets_name); ?>" type="hidden" id="<?php echo $instance->get_field_id($theme_widgets_name); ?>" value="<?php echo $athm_field_value; ?>" />

                <?php if (isset($theme_widgets_description)) { ?>
                    <br />
                    <small><?php echo $theme_widgets_description; ?></small>
                <?php } ?>
            </p>
<style type="text/css">
    #ap-font-awesome-list{ height: 100px; overflow: hidden; overflow-y: scroll; }
    #ap-font-awesome-list ul li{ float: left; margin-right: 5px; }
    #ap-font-awesome-list ul li i{ font-size: 16px; }
</style>
            <div id="ap-font-awesome-list">
                <ul class="ap-font-group">
                    <li><i class="fa fa-glass"></i></li>
                    <li><i class="fa fa-music"></i> </li>
                    <li><i class="fa fa-search"></i></li>
                    <li><i class="fa fa-envelope-o"></i> </li>
                    <li><i class="fa fa-heart"></i></li>
                    <li><i class="fa fa-star"></i></li>
                    <li><i class="fa fa-star-o"></i></li>
                    <li><i class="fa fa-user"></i> </li>
                    <li><i class="fa fa-film"></i> </li>
                    <li><i class="fa fa-th-large"></i> </li>
                    <li><i class="fa fa-th"></i> </li>
                    <li><i class="fa fa-th-list"></i> </li>
                    <li><i class="fa fa-check"></i> </li>
                    <li><i class="fa fa-times"></i></li>
                    <li><i class="fa fa-search-plus"></i></li>
                    <li><i class="fa fa-search-minus"></i></li>
                    <li><i class="fa fa-power-off"></i> </li>
                    <li><i class="fa fa-signal"></i> </li>
                    <li><i class="fa fa-cog"></i></li>
                    <li><i class="fa fa-trash-o"></i></li>
                    <li><i class="fa fa-home"></i></li>
                    <li><i class="fa fa-file-o"></i> </li>
                    <li><i class="fa fa-clock-o"></i> </li>
                    <li><i class="fa fa-road"></i> </li>
                    <li><i class="fa fa-download"></i></li>
                    <li><i class="fa fa-arrow-circle-o-down"></i></li>
                    <li><i class="fa fa-arrow-circle-o-up"></i> </li>
                    <li><i class="fa fa-inbox"></i></li>
                    <li><i class="fa fa-play-circle-o"></i> </li>
                    <li><i class="fa fa-repeat"></i> </li>
                    <li><i class="fa fa-refresh"></i> </li>
                    <li><i class="fa fa-list-alt"></i> </li>
                    <li><i class="fa fa-lock"></i> </li>
                    <li><i class="fa fa-flag"></i> </li>
                    <li><i class="fa fa-headphones"></i> </li>
                    <li><i class="fa fa-volume-off"></i> </li>
                    <li><i class="fa fa-volume-down"></i> </li>
                    <li><i class="fa fa-volume-up"></i> </li>
                    <li><i class="fa fa-qrcode"></i></li>
                    <li><i class="fa fa-barcode"></i></li>
                    <li><i class="fa fa-tag"></i> </li>
                    <li><i class="fa fa-tags"></i> </li>
                    <li><i class="fa fa-book"></i> </li>
                    <li><i class="fa fa-bookmark"></i></li>
                    <li><i class="fa fa-print"></i> </li>
                    <li><i class="fa fa-camera"></i> </li>
                    <li><i class="fa fa-font"></i> </li>
                    <li><i class="fa fa-bold"></i> </li>
                    <li><i class="fa fa-italic"></i> </li>
                    <li><i class="fa fa-text-height"></i> </li>
                    <li><i class="fa fa-text-width"></i></li>
                    <li><i class="fa fa-align-left"></i> </li>
                    <li><i class="fa fa-align-center"></i></li>
                    <li><i class="fa fa-align-right"></i> </li>
                    <li><i class="fa fa-align-justify"></i></li>
                    <li><i class="fa fa-list"></i></li>
                    <li><i class="fa fa-outdent"></i></li>
                    <li><i class="fa fa-indent"></i></li>
                    <li><i class="fa fa-video-camera"></i> </li>
                    <li><i class="fa fa-picture-o"></i></li>
                    <li><i class="fa fa-pencil"></i> </li>
                    <li><i class="fa fa-map-marker"></i> </li>
                    <li><i class="fa fa-adjust"></i> </li>
                    <li><i class="fa fa-tint"></i> </li>
                    <li><i class="fa fa-pencil-square-o"></i></li>
                    <li><i class="fa fa-share-square-o"></i> </li>
                    <li><i class="fa fa-check-square-o"></i> </li>
                    <li><i class="fa fa-arrows"></i> </li>
                    <li><i class="fa fa-step-backward"></i> </li>
                    <li><i class="fa fa-fast-backward"></i></li>
                    <li><i class="fa fa-backward"></i> </li>
                    <li><i class="fa fa-play"></i></li>
                    <li><i class="fa fa-pause"></i> </li>
                    <li><i class="fa fa-stop"></i> </li>
                    <li><i class="fa fa-forward"></i> </li>
                    <li><i class="fa fa-fast-forward"></i> </li>
                    <li><i class="fa fa-step-forward"></i></li>
                    <li><i class="fa fa-eject"></i> </li>
                    <li><i class="fa fa-chevron-left"></i> </li>
                    <li><i class="fa fa-chevron-right"></i> </li>
                    <li><i class="fa fa-plus-circle"></i></li>
                    <li><i class="fa fa-minus-circle"></i></li>
                    <li><i class="fa fa-times-circle"></i> </li>
                    <li><i class="fa fa-check-circle"></i> </li>
                    <li><i class="fa fa-question-circle"></i></li> 
                    <li><i class="fa fa-info-circle"></i> </li>
                    <li><i class="fa fa-crosshairs"></i></li>
                    <li><i class="fa fa-times-circle-o"></i> </li>
                    <li><i class="fa fa-check-circle-o"></i> </li>
                    <li><i class="fa fa-ban"></i> </li>
                    <li><i class="fa fa-arrow-left"></i> </li>
                    <li><i class="fa fa-arrow-right"></i> </li>
                    <li><i class="fa fa-arrow-up"></i></li> 
                    <li><i class="fa fa-arrow-down"></i> </li>
                    <li><i class="fa fa-share"></i> </li>
                    <li><i class="fa fa-expand"></i> </li>
                    <li><i class="fa fa-compress"></i> </li>
                    <li><i class="fa fa-plus"></i> </li>
                    <li><i class="fa fa-minus"></i></li>
                    <li><i class="fa fa-asterisk"></i></li>
                    <li><i class="fa fa-exclamation-circle"></i> </li>
                    <li><i class="fa fa-gift"></i> </li>
                    <li><i class="fa fa-leaf"></i> </li>
                    <li><i class="fa fa-fire"></i> </li>
                    <li><i class="fa fa-eye"></i> </li>
                    <li><i class="fa fa-eye-slash"></i> </li>
                    <li><i class="fa fa-exclamation-triangle"></i> </li>
                    <li><i class="fa fa-plane"></i> </li>
                    <li><i class="fa fa-calendar"></i> </li>
                    <li><i class="fa fa-random"></i></li>
                    <li><i class="fa fa-comment"></i> </li>
                    <li><i class="fa fa-magnet"></i></li>
                    <li><i class="fa fa-chevron-up"></i> </li>
                    <li><i class="fa fa-chevron-down"></i> </li>
                    <li><i class="fa fa-retweet"></i> </li>
                    <li><i class="fa fa-shopping-cart"></i> </li>
                    <li><i class="fa fa-folder"></i> </li>
                    <li><i class="fa fa-folder-open"></i> </li>
                    <li><i class="fa fa-arrows-v"></i> </li>
                    <li><i class="fa fa-arrows-h"></i> </li>
                    <li><i class="fa fa-bar-chart"></i></li>
                    <li><i class="fa fa-twitter-square"></i> </li>
                    <li><i class="fa fa-facebook-square"></i> </li>
                    <li><i class="fa fa-camera-retro"></i> </li>
                    <li><i class="fa fa-key"></i> </li>
                    <li><i class="fa fa-cogs"></i> </li>
                    <li><i class="fa fa-comments"></i> </li>
                    <li><i class="fa fa-thumbs-o-up"></i> </li>
                    <li><i class="fa fa-thumbs-o-down"></i> </li>
                    <li><i class="fa fa-star-half"></i></li>
                    <li><i class="fa fa-heart-o"></i></li>
                    <li><i class="fa fa-sign-out"></i></li>
                    <li><i class="fa fa-linkedin-square"></i> </li>
                    <li><i class="fa fa-thumb-tack"></i> </li>
                    <li><i class="fa fa-external-link"></i></li>
                    <li><i class="fa fa-sign-in"></i> </li>
                    <li><i class="fa fa-trophy"></i></li>
                    <li><i class="fa fa-github-square"></i></li>
                    <li><i class="fa fa-upload"></i> </li>
                    <li><i class="fa fa-lemon-o"></i> </li>
                    <li><i class="fa fa-phone"></i> </li>
                    <li><i class="fa fa-square-o"></i> </li>
                    <li><i class="fa fa-bookmark-o"></i> </li>
                    <li><i class="fa fa-phone-square"></i> </li>
                    <li><i class="fa fa-twitter"></i> </li>
                    <li><i class="fa fa-facebook"></i></li>
                    <li><i class="fa fa-github"></i> </li>
                    <li><i class="fa fa-unlock"></i> </li>
                    <li><i class="fa fa-credit-card"></i> </li>
                    <li><i class="fa fa-rss"></i></li>
                    <li><i class="fa fa-hdd-o"></i> </li>
                    <li><i class="fa fa-bullhorn"></i> </li>
                    <li><i class="fa fa-bell"></i></li>
                    <li><i class="fa fa-certificate"></i> </li>
                    <li><i class="fa fa-hand-o-right"></i> </li>
                    <li><i class="fa fa-hand-o-left"></i> </li>
                    <li><i class="fa fa-hand-o-up"></i></li>
                    <li><i class="fa fa-hand-o-down"></i></li>
                    <li><i class="fa fa-arrow-circle-left"></i></li>
                    <li><i class="fa fa-arrow-circle-right"></i> </li>
                    <li><i class="fa fa-arrow-circle-up"></i> </li>
                    <li><i class="fa fa-arrow-circle-down"></i> </li>
                    <li><i class="fa fa-globe"></i></li>
                    <li><i class="fa fa-wrench"></i> </li>
                    <li><i class="fa fa-tasks"></i> </li>
                    <li><i class="fa fa-filter"></i> </li>
                    <li><i class="fa fa-briefcase"></i></li>
                    <li><i class="fa fa-arrows-alt"></i></li>
                    <li><i class="fa fa-users"></i></li>
                    <li><i class="fa fa-link"></i></li>
                    <li><i class="fa fa-cloud"></i> </li>
                    <li><i class="fa fa-flask"></i> </li>
                    <li><i class="fa fa-scissors"></i></li>
                    <li><i class="fa fa-files-o"></i></li>
                    <li><i class="fa fa-paperclip"></i></li>
                    <li><i class="fa fa-floppy-o"></i></li>
                    <li><i class="fa fa-square"></i></li>
                    <li><i class="fa fa-bars"></i></li>
                    <li><i class="fa fa-list-ul"></i> </li>
                    <li><i class="fa fa-list-ol"></i> </li>
                    <li><i class="fa fa-strikethrough"></i> </li>
                    <li><i class="fa fa-underline"></i></li>
                    <li><i class="fa fa-table"></i> </li>
                    <li><i class="fa fa-magic"></i> </li>
                    <li><i class="fa fa-truck"></i> </li>
                    <li><i class="fa fa-pinterest"></i> </li>
                    <li><i class="fa fa-pinterest-square"></i></li>
                    <li><i class="fa fa-google-plus-square"></i></li>
                    <li><i class="fa fa-google-plus"></i> </li>
                    <li><i class="fa fa-money"></i> </li>
                    <li><i class="fa fa-caret-down"></i> </li>
                    <li><i class="fa fa-caret-up"></i></li>
                    <li><i class="fa fa-caret-left"></i></li>
                    <li><i class="fa fa-caret-right"></i> </li>
                    <li><i class="fa fa-columns"></i></li>
                    <li><i class="fa fa-sort"></i> </li>
                    <li><i class="fa fa-sort-desc"></i> </li>
                    <li><i class="fa fa-sort-asc"></i> </li>
                    <li><i class="fa fa-envelope"></i> </li>
                    <li><i class="fa fa-linkedin"></i> </li>
                    <li><i class="fa fa-undo"></i> </li>
                    <li><i class="fa fa-gavel"></i> </li>
                    <li><i class="fa fa-tachometer"></i></li>
                    <li><i class="fa fa-comment-o"></i> </li>
                    <li><i class="fa fa-comments-o"></i> </li>
                    <li><i class="fa fa-bolt"></i></li>
                    <li><i class="fa fa-sitemap"></i> </li>
                    <li><i class="fa fa-umbrella"></i> </li>
                    <li><i class="fa fa-clipboard"></i> </li>
                    <li><i class="fa fa-lightbulb-o"></i> </li>
                    <li><i class="fa fa-exchange"></i> </li>
                    <li><i class="fa fa-cloud-download"></i> </li>
                    <li><i class="fa fa-cloud-upload"></i> </li>
                    <li><i class="fa fa-user-md"></i></li>
                    <li><i class="fa fa-stethoscope"></i> </li>
                    <li><i class="fa fa-suitcase"></i></li>
                    <li><i class="fa fa-bell-o"></i></li>
                    <li><i class="fa fa-coffee"></i> </li>
                    <li><i class="fa fa-cutlery"></i> </li>
                    <li><i class="fa fa-file-text-o"></i></li>
                    <li><i class="fa fa-building-o"></i></li>
                    <li><i class="fa fa-hospital-o"></i> </li>
                    <li><i class="fa fa-ambulance"></i> </li>
                    <li><i class="fa fa-medkit"></i></li>
                    <li><i class="fa fa-fighter-jet"></i> </li>
                    <li><i class="fa fa-beer"></i> </li>
                    <li><i class="fa fa-h-square"></i></li> 
                    <li><i class="fa fa-plus-square"></i> </li>
                    <li><i class="fa fa-angle-double-left"></i> </li>
                    <li><i class="fa fa-angle-double-right"></i> </li>
                    <li><i class="fa fa-angle-double-up"></i> </li>
                    <li><i class="fa fa-angle-double-down"></i> </li>
                    <li><i class="fa fa-angle-left"></i></li>
                    <li><i class="fa fa-angle-right"></i></li>
                    <li><i class="fa fa-angle-up"></i> </li>
                    <li><i class="fa fa-angle-down"></i> </li>
                    <li><i class="fa fa-desktop"></i></li>
                    <li><i class="fa fa-laptop"></i> </li>
                    <li><i class="fa fa-tablet"></i></li>
                    <li><i class="fa fa-mobile"></i> </li>
                    <li><i class="fa fa-circle-o"></i></li> 
                    <li><i class="fa fa-quote-left"></i></li>
                    <li><i class="fa fa-quote-right"></i> </li>
                    <li><i class="fa fa-spinner"></i> </li>
                    <li><i class="fa fa-circle"></i> </li>
                    <li><i class="fa fa-reply"></i></li> 
                    <li><i class="fa fa-github-alt"></i> </li>
                    <li><i class="fa fa-folder-o"></i></li>
                    <li><i class="fa fa-folder-open-o"></i></li> 
                    <li><i class="fa fa-smile-o"></i></li>
                    <li><i class="fa fa-frown-o"></i></li> 
                    <li><i class="fa fa-meh-o"></i></li>
                    <li><i class="fa fa-gamepad"></i></li>
                    <li><i class="fa fa-keyboard-o"></i> </li>
                    <li><i class="fa fa-flag-o"></i></li>
                    <li><i class="fa fa-flag-checkered"></i> </li>
                    <li><i class="fa fa-terminal"></i> </li>
                    <li><i class="fa fa-code"></i> </li>
                    <li><i class="fa fa-reply-all"></i></li>
                    <li><i class="fa fa-star-half-o"></i></li>
                    <li><i class="fa fa-location-arrow"></i> </li>
                    <li><i class="fa fa-crop"></i></li>
                    <li><i class="fa fa-code-fork"></i> </li>
                    <li><i class="fa fa-chain-broken"></i></li>
                    <li><i class="fa fa-question"></i> </li>
                    <li><i class="fa fa-info"></i> </li>
                    <li><i class="fa fa-exclamation"></i> </li>
                    <li><i class="fa fa-superscript"></i> </li>
                    <li><i class="fa fa-subscript"></i> </li>
                    <li><i class="fa fa-eraser"></i></li>
                    <li><i class="fa fa-puzzle-piece"></i> </li>
                    <li><i class="fa fa-microphone"></i></li>
                    <li><i class="fa fa-microphone-slash"></i></li>
                    <li><i class="fa fa-shield"></i> </li>
                    <li><i class="fa fa-calendar-o"></i> </li>
                    <li><i class="fa fa-fire-extinguisher"></i></li>
                    <li><i class="fa fa-rocket"></i> </li>
                    <li><i class="fa fa-maxcdn"></i> </li>
                    <li><i class="fa fa-chevron-circle-left"></i></li>
                    <li><i class="fa fa-chevron-circle-right"></i> </li>
                    <li><i class="fa fa-chevron-circle-up"></i></li>
                    <li><i class="fa fa-chevron-circle-down"></i> </li>
                    <li><i class="fa fa-html5"></i> </li>
                    <li><i class="fa fa-css3"></i></li>
                    <li><i class="fa fa-anchor"></i> </li>
                    <li><i class="fa fa-unlock-alt"></i> </li>
                    <li><i class="fa fa-bullseye"></i> </li>
                    <li><i class="fa fa-ellipsis-h"></i> </li>
                    <li><i class="fa fa-ellipsis-v"></i> </li>
                    <li><i class="fa fa-rss-square"></i></li>
                    <li><i class="fa fa-play-circle"></i></li>
                    <li><i class="fa fa-ticket"></i> </li>
                    <li><i class="fa fa-minus-square"></i> </li>
                    <li><i class="fa fa-minus-square-o"></i></li>
                    <li><i class="fa fa-level-up"></i> </li>
                    <li><i class="fa fa-level-down"></i></li>
                    <li><i class="fa fa-check-square"></i> </li>
                    <li><i class="fa fa-pencil-square"></i> </li>
                    <li><i class="fa fa-external-link-square"></i></li>
                    <li><i class="fa fa-share-square"></i></li>
                    <li><i class="fa fa-compass"></i></li>
                    <li><i class="fa fa-caret-square-o-down"></i> </li>
                    <li><i class="fa fa-caret-square-o-up"></i></li>
                    <li><i class="fa fa-caret-square-o-right"></i> </li>
                    <li><i class="fa fa-eur"></i> </li>
                    <li><i class="fa fa-gbp"></i> </li>
                    <li><i class="fa fa-usd"></i> </li>
                    <li><i class="fa fa-inr"></i> </li>
                    <li><i class="fa fa-jpy"></i></li>
                    <li><i class="fa fa-rub"></i> </li>
                    <li><i class="fa fa-krw"></i></li>
                    <li><i class="fa fa-btc"></i> </li>
                    <li><i class="fa fa-file"></i> </li>
                    <li><i class="fa fa-file-text"></i></li>
                    <li><i class="fa fa-sort-alpha-asc"></i> </li>
                    <li><i class="fa fa-sort-alpha-desc"></i> </li>
                    <li><i class="fa fa-sort-amount-asc"></i> </li>
                    <li><i class="fa fa-sort-amount-desc"></i></li>
                    <li><i class="fa fa-sort-numeric-asc"></i></li>
                    <li><i class="fa fa-sort-numeric-desc"></i></li>
                    <li><i class="fa fa-thumbs-up"></i> </li>
                    <li><i class="fa fa-thumbs-down"></i> </li>
                    <li><i class="fa fa-youtube-square"></i> </li>
                    <li><i class="fa fa-youtube"></i></li>
                    <li><i class="fa fa-xing"></i></li>
                    <li><i class="fa fa-xing-square"></i> </li>
                    <li><i class="fa fa-youtube-play"></i></li>
                    <li><i class="fa fa-dropbox"></i></li>
                    <li><i class="fa fa-stack-overflow"></i> </li>
                    <li><i class="fa fa-instagram"></i></li>
                    <li><i class="fa fa-flickr"></i> </li>
                    <li><i class="fa fa-adn"></i></li>
                    <li><i class="fa fa-bitbucket"></i></li>
                    <li><i class="fa fa-bitbucket-square"></i> </li>
                    <li><i class="fa fa-tumblr"></i></li>
                    <li><i class="fa fa-tumblr-square"></i></li>
                    <li><i class="fa fa-long-arrow-down"></i></li>
                    <li><i class="fa fa-long-arrow-up"></i> </li>
                    <li><i class="fa fa-long-arrow-left"></i> </li>
                    <li><i class="fa fa-long-arrow-right"></i></li>
                    <li><i class="fa fa-apple"></i> </li>
                    <li><i class="fa fa-windows"></i></li>
                    <li><i class="fa fa-android"></i></li>
                    <li><i class="fa fa-linux"></i></li>
                    <li><i class="fa fa-dribbble"></i></li>
                    <li><i class="fa fa-skype"></i> </li>
                    <li><i class="fa fa-foursquare"></i> </li>
                    <li><i class="fa fa-trello"></i></li>
                    <li><i class="fa fa-female"></i> </li>
                    <li><i class="fa fa-male"></i></li>
                    <li><i class="fa fa-gittip"></i></li>
                    <li><i class="fa fa-sun-o"></i> </li>
                    <li><i class="fa fa-moon-o"></i></li>
                    <li><i class="fa fa-archive"></i> </li>
                    <li><i class="fa fa-bug"></i></li>
                    <li><i class="fa fa-vk"></i> </li>
                    <li><i class="fa fa-weibo"></i></li>
                    <li><i class="fa fa-renren"></i> </li>
                    <li><i class="fa fa-pagelines"></i></li>
                    <li><i class="fa fa-stack-exchange"></i> </li>
                    <li><i class="fa fa-arrow-circle-o-right"></i></li>
                    <li><i class="fa fa-arrow-circle-o-left"></i> </li>
                    <li><i class="fa fa-caret-square-o-left"></i></li>
                    <li><i class="fa fa-dot-circle-o"></i></li>
                    <li><i class="fa fa-wheelchair"></i></li>
                    <li><i class="fa fa-vimeo-square"></i></li>
                    <li><i class="fa fa-try"></i></li>
                    <li><i class="fa fa-plus-square-o"></i> </li>
                    <li><i class="fa fa-space-shuttle"></i> </li>
                    <li><i class="fa fa-slack"></i> </li>
                    <li><i class="fa fa-envelope-square"></i> </li>
                    <li><i class="fa fa-wordpress"></i></li>
                    <li><i class="fa fa-openid"></i></li>
                    <li><i class="fa fa-university"></i> </li>
                    <li><i class="fa fa-graduation-cap"></i> </li>
                    <li><i class="fa fa-yahoo"></i></li>
                    <li><i class="fa fa-google"></i></li>
                    <li><i class="fa fa-reddit"></i></li>
                    <li><i class="fa fa-reddit-square"></i></li>
                    <li><i class="fa fa-stumbleupon-circle"></i> </li>
                    <li><i class="fa fa-stumbleupon"></i></li>
                    <li><i class="fa fa-delicious"></i></li>
                    <li><i class="fa fa-digg"></i></li>
                    <li><i class="fa fa-pied-piper"></i></li>
                    <li><i class="fa fa-pied-piper-alt"></i></li>
                    <li><i class="fa fa-drupal"></i> </li>
                    <li><i class="fa fa-joomla"></i></li>
                    <li><i class="fa fa-language"></i></li>
                    <li><i class="fa fa-fax"></i></li>
                    <li><i class="fa fa-building"></i> </li>
                    <li><i class="fa fa-child"></i> </li>
                    <li><i class="fa fa-paw"></i> </li>
                    <li><i class="fa fa-spoon"></i> </li>
                    <li><i class="fa fa-cube"></i></li>
                    <li><i class="fa fa-cubes"></i></li> 
                    <li><i class="fa fa-behance"></i></li>
                    <li><i class="fa fa-behance-square"></i> </li>
                    <li><i class="fa fa-steam"></i></li>
                    <li><i class="fa fa-steam-square"></i></li>
                    <li><i class="fa fa-recycle"></i></li> 
                    <li><i class="fa fa-car"></i></li>
                    <li><i class="fa fa-taxi"></i> </li>
                    <li><i class="fa fa-tree"></i></li>
                    <li><i class="fa fa-spotify"></i> </li>
                    <li><i class="fa fa-deviantart"></i></li>
                    <li><i class="fa fa-soundcloud"></i> </li>
                    <li><i class="fa fa-database"></i> </li>
                    <li><i class="fa fa-file-pdf-o"></i> </li>
                    <li><i class="fa fa-file-word-o"></i></li>
                    <li><i class="fa fa-file-excel-o"></i> </li>
                    <li><i class="fa fa-file-powerpoint-o"></i></li>
                    <li><i class="fa fa-file-image-o"></i></li>
                    <li><i class="fa fa-file-archive-o"></i></li>
                    <li><i class="fa fa-file-audio-o"></i></li>
                    <li><i class="fa fa-file-video-o"></i> </li>
                    <li><i class="fa fa-file-code-o"></i></li>
                    <li><i class="fa fa-vine"></i></li>
                    <li><i class="fa fa-codepen"></i></li>
                    <li><i class="fa fa-jsfiddle"></i></li>
                    <li><i class="fa fa-life-ring"></i></li>
                    <li><i class="fa fa-circle-o-notch"></i></li>
                    <li><i class="fa fa-rebel"></i></li>
                    <li><i class="fa fa-empire"></i> </li>
                    <li><i class="fa fa-git-square"></i> </li>
                    <li><i class="fa fa-git"></i></li>
                    <li><i class="fa fa-hacker-news"></i></li>
                    <li><i class="fa fa-tencent-weibo"></i></li>
                    <li><i class="fa fa-qq"></i></li>
                    <li><i class="fa fa-weixin"></i></li>
                    <li><i class="fa fa-paper-plane"></i></li>
                    <li><i class="fa fa-paper-plane-o"></i></li>
                    <li><i class="fa fa-history"></i></li>
                    <li><i class="fa fa-circle-thin"></i></li>
                    <li><i class="fa fa-header"></i></li>
                    <li><i class="fa fa-paragraph"></i></li>
                    <li><i class="fa fa-sliders"></i></li>
                    <li><i class="fa fa-share-alt"></i></li>
                    <li><i class="fa fa-share-alt-square"></i></li>
                    <li><i class="fa fa-bomb"></i></li>
                    <li><i class="fa fa-futbol-o"></i></li>
                    <li><i class="fa fa-tty"></i></li>
                    <li><i class="fa fa-binoculars"></i></li>
                    <li><i class="fa fa-plug"></i></li>
                    <li><i class="fa fa-slideshare"></i></li>
                    <li><i class="fa fa-twitch"></i></li>
                    <li><i class="fa fa-yelp"></i></li>
                    <li><i class="fa fa-newspaper-o"></i></li>
                    <li><i class="fa fa-wifi"></i></li>
                    <li><i class="fa fa-calculator"></i></li>
                    <li><i class="fa fa-paypal"></i></li>
                    <li><i class="fa fa-google-wallet"></i></li>
                    <li><i class="fa fa-cc-visa"></i></li>
                    <li><i class="fa fa-cc-mastercard"></i></li>
                    <li><i class="fa fa-cc-discover"></i></li>
                    <li><i class="fa fa-cc-amex"></i></li>
                    <li><i class="fa fa-cc-paypal"></i></li>
                    <li><i class="fa fa-cc-stripe"></i></li>
                    <li><i class="fa fa-bell-slash"></i></li>
                    <li><i class="fa fa-bell-slash-o"></i></li>
                    <li><i class="fa fa-trash"></i></li>
                    <li><i class="fa fa-copyright"></i></li>
                    <li><i class="fa fa-at"></i></li>
                    <li><i class="fa fa-eyedropper"></i></li>
                    <li><i class="fa fa-paint-brush"></i></li>
                    <li><i class="fa fa-birthday-cake"></i></li>
                    <li><i class="fa fa-area-chart"></i></li>
                    <li><i class="fa fa-pie-chart"></i></li>
                    <li><i class="fa fa-line-chart"></i></li>
                    <li><i class="fa fa-lastfm"></i></li>
                    <li><i class="fa fa-lastfm-square"></i></li>
                    <li><i class="fa fa-toggle-off"></i></li>
                    <li><i class="fa fa-toggle-on"></i></li>
                    <li><i class="fa fa-bicycle"></i></li>
                    <li><i class="fa fa-bus"></i></li>
                    <li><i class="fa fa-ioxhost"></i></li>
                    <li><i class="fa fa-angellist"></i></li>
                    <li><i class="fa fa-cc"></i></li>
                    <li><i class="fa fa-ils"></i></li>
                    <li><i class="fa fa-meanpath"></i></li>
                </ul>
            </div>
            <?php
            break;
    }
}

function theme_widgets_updated_field_value($widget_field, $new_field_value) {

    extract($widget_field);
    
    if ($theme_widgets_field_type == 'number') {
        return absint($new_field_value);
    } elseif ($theme_widgets_field_type == 'textarea') {        
        if (!isset($theme_widgets_allowed_tags)) {            
            $theme_widgets_allowed_tags = '<p><strong><em><a>';
        }        
        return strip_tags($new_field_value, $theme_widgets_allowed_tags);
    } elseif ($theme_widgets_field_type == 'iframe_textarea') {        
        if (!isset($theme_widgets_allowed_tags)) {            
            $theme_widgets_allowed_tags = '<iframe>';
        }        
        return strip_tags($new_field_value, $theme_widgets_allowed_tags);
    }     
    elseif ($theme_widgets_field_type == 'url') {
        return esc_url_raw($new_field_value);
    }
    elseif ($theme_widgets_field_type == 'title') {
        return wp_kses_post($new_field_value);
    }
    else {
        return strip_tags($new_field_value);
    }
}

This function basically contains the information about the form fields to be display for each field type defined in the widget class you create followed by the function to display updated field values. Now, all widget fields should work fine except for the icons that won't appear unless you add the fontawesome stylesheet file to your project and the upload button needs a javascript file to function. Let's see the javascript file first.

jQuery(document).ready(function($) {

    //Icon Services Custom Js
    $(document).on('click', '.ap-font-group li', function(){
        $('.ap-font-group li').removeClass();
        $(this).addClass('selected');
        var aa = $(this).parents('#ap-font-awesome-list').find('.ap-font-group li.selected').children('i').attr('class');
        $(this).parents('#ap-font-awesome-list').siblings('p').find('.hidden-icon-input').val(aa);
        $(this).parents('#ap-font-awesome-list').siblings('p').find('.icon-receiver').html('<i class="'+aa+'"></i>');
        return false;
    });
    
    $('.switch_options').each(function() {
        //This object
        var obj = $(this);
        var enb = obj.children('.switch_enable'); //cache first element, this is equal to ON
        var dsb = obj.children('.switch_disable'); //cache first element, this is equal to OFF
        var input = obj.children('input'); //cache the element where we must set the value
        var input_val = obj.children('input').val(); //cache the element where we must set the value

        /* Check selected */
        if (0 == input_val) {
            dsb.addClass('selected');
        }
        else if (1 == input_val) {
            enb.addClass('selected');
        }

        //Action on user's click(ON)
        enb.on('click', function() {
            $(dsb).removeClass('selected'); //remove "selected" from other elements in this object class(OFF)
            $(this).addClass('selected'); //add "selected" to the element which was just clicked in this object class(ON) 
            $(input).val(1).change(); //Finally change the value to 1
        });

        //Action on user's click(OFF)
        dsb.on('click', function() {
            $(enb).removeClass('selected'); //remove "selected" from other elements in this object class(ON)
            $(this).addClass('selected'); //add "selected" to the element which was just clicked in this object class(OFF) 
            $(input).val(0).change(); // //Finally change the value to 0
        });
    });

    // Widget Area Image Upload Function
    var optionsframework_upload;
    var optionsframework_selector;
    function optionsframework_add_file(event, selector) {
        var upload = $(".uploaded-file"), frame;
        var $el = $(this);
        optionsframework_selector = selector;
        event.preventDefault();
        if ( optionsframework_upload ) {
            optionsframework_upload.open();
        } else {
            optionsframework_upload = wp.media.frames.optionsframework_upload =  wp.media({
                title: $el.data('choose'),
                button: {
                    text: $el.data('update'),
                    close: false
                }
            });
            optionsframework_upload.on( 'select', function() {
                // Grab the selected attachment.
                var attachment = optionsframework_upload.state().get('selection').first();
                optionsframework_upload.close();
                optionsframework_selector.find('.upload').val(attachment.attributes.url);
                if ( attachment.attributes.type == 'image' ) {
                    optionsframework_selector.find('.screenshot').empty().hide().append('<img src="' + attachment.attributes.url + '"><a class="remove-image">Remove</a>').slideDown('fast');
                }
                optionsframework_selector.find('.upload-button-wdgt').unbind().addClass('remove-file').removeClass('upload-button-wdgt').val(accesspress_store_l10n.remove);
                optionsframework_selector.find('.of-background-properties').slideDown();
                optionsframework_selector.find('.remove-image, .remove-file').on('click', function() {
                    optionsframework_remove_file( $(this).parents('.section') );
                });
            });
        }
        optionsframework_upload.open();
    }

    function optionsframework_remove_file(selector) {
        selector.find('.remove-image').hide();
        selector.find('.upload').val('');
        selector.find('.of-background-properties').hide();
        selector.find('.screenshot').slideUp();
        selector.find('.remove-file').unbind().addClass('upload-button-wdgt').removeClass('remove-file').val(accesspress_store_l10n.upload);
        if ( $('.section-upload .upload-notice').length > 0 ) {
            $('.upload-button-wdgt').remove();
        }
        selector.find('.upload-button-wdgt').on('click', function(event) {
            optionsframework_add_file(event, $(this).parents('.section'));
            
        });
    }

    $('.remove-image, .remove-file').on('click', function() {
        optionsframework_remove_file( $(this).parents('.section') );
    });

    $(document).on('click', '.upload-button-wdgt', function( event ) {
        optionsframework_add_file(event, $(this).parents('.section'));
    });

});       

Create a new file inside your theme's scripts directiory with .js extension and copy / paste these javascript codes in that file. Now,let's add the fontawesome sylesheet and this script file to dashboard pages.

function wh_admin_section() {
    wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/css/font-awesome.min.css' );
    
    if (function_exists('wp_enqueue_media'))
        wp_enqueue_media();
    wp_enqueue_script( 'upload-js', get_template_directory_uri() . '/js/ap-upload.js', array( 'jquery' ), '', true );
    wp_localize_script('upload-js', 'upload-js', array(
        'upload' => __('Upload'),
        'remove' => __('Remove')
    ));
}
add_action( 'admin_enqueue_scripts', 'wh_admin_section' );    

Add these blocks of enqueue codes in the same file from where you added the stylesheets and scripts for frontend. The only difference would be the hook to add the fileswhich would be admin_enqueue_scripts().

Display Widgets in Wordpress Frontend

Once the widget sidebar is registered and the class created to define form fields for the widget along with the html form elements associated to it and html wrappers too defined for the widget contents, the only thing remaining is to display it in the frontend templates where you want it.

<?php if (is_active_sidebar('top-banner')): ?>
<?php dynamic_sidebar('top-banner'); ?>
<?php endif; ?>    

The php tags are closed here in each of the lines to facilitate you to add additional html elements around the widget. Here's an example.

<?php if (is_active_sidebar('top-banner')): ?>    
    <div class="container">
        <div class="main-search-wrapper">
            <?php dynamic_sidebar('top-banner'); ?>
        </div>
    </div>
<?php endif; ?>  

In this way, you can create multiple custom widgets for your theme or just create widget holders and add external wordpress to them.