Widget for a featured area with selectable content and using WP image upload.

upload-media.js

jQuery(document).ready(function($) {
    $(document).on("click", ".upload_image_button", function() {

        jQuery.data(document.body, 'prevElement', $(this).prev());

        window.send_to_editor = function(html) {
            var imgurl = jQuery('img',html).attr('src');
            var inputText = jQuery.data(document.body, 'prevElement');

            if(inputText != undefined && inputText != '')
            {
                inputText.val(imgurl);
            }

            tb_remove();
        };

        tb_show('', 'media-upload.php?type=image&TB_iframe=true');
        return false;
    });
});

widget.php

<?php
	
// ADD THIS LINE TO FUNCTIONS.PHP (remove the #)
# require_once 'widget.php';	
	
// Custom Widget
/* This wouldn't be possible without the help of Paul Underwood
Source: http://www.paulund.co.uk/add-upload-media-library-widgets
Be sure to include the javascript for this!
/**
 * Register the Widget
 */
add_action( 'widgets_init', create_function( '', 'register_widget("pu_media_upload_widget");' ) );

class pu_media_upload_widget extends WP_Widget
{
    /**
     * Setup the widget name, class and description
     **/
    public function __construct()
    {
        $widget_ops = array(
            'classname' => 'pu_media_upload',
            'description' => 'Widget that uses the built in Media library.'
        );

        parent::__construct( 'pu_media_upload', 'Featured Image Widget', $widget_ops );
		# Enqueues scripts (for the uploader)
        add_action('admin_enqueue_scripts', array($this, 'upload_scripts'));
        add_action('admin_enqueue_styles', array($this, 'upload_styles'));
    }

    /**
     * Upload the Javascripts for the media uploader
     */
    public function upload_scripts()
    {
	    # Enqueueing scripts again, jQuery, media-uploader and thickbox (for the uploader)
        wp_enqueue_script('jquery');
        wp_enqueue_script('media-upload');
        wp_enqueue_script('thickbox');
        wp_enqueue_style('thickbox');
        # Ensure this link is consistent with your file structure.
        wp_enqueue_script('upload_media_widget', get_template_directory_uri() . '/js/upload-media.js');
    }

    /**
     * Add the styles for the upload media box
     */
    public function upload_styles()
    {
	    # Again, for the image uploader
        wp_enqueue_style('thickbox');
    }

    /**
     * Outputs the HTML for this widget.
     *
     * @param array  An array of standard parameters for widgets in this theme
     * @param array  An array of settings for this widget instance
     * @return void Echoes it's output
     **/
    public function widget( $args, $instance )
    {
        # Add any html to output the image in the $instance array
        # Declaring variables - this is all for the display side of things
        $title = apply_filters( 'widget_title', $instance['title'] );
        $image = $instance['image'];
        $description = $instance['description'];
        $link_target = $instance['link_target'];
        $custom_url = $instance['custom_url'];
        $css_class = $instance['css_class'];
        
        // Define the URL Location
        $url = '';
        if ( !empty( $custom_url ) ){
	        $url = $custom_url;
        } elseif ( !empty( $link_target ) ){
	        $url = get_the_permalink($link_target);
        }
        
		// Start writing to the screen
		# This is the beginning of the widget. Defined at the theme level in the Sidebar Declaration.
        echo $args['before_widget'] . '<div class="' . $css_class . '">';
            // If URL is NOT empty. We display the link (defined in lines 72-77)
	        if ( !empty ( $url ) ){
		        echo '<a href="' . $url . '">';
	        }
	        // If $image isn't empty, write it to screen
			if ( !empty( $image ) ) {
		        echo '<img class="img-responsive" src="' . $image . '" alt="' . $title . '" />';
	        }
	        // If $title isn't empty, write it to screen -- uses the defined before/after_title in Sidebar Declaration.
	        if ( !empty( $title ) ) {
		        echo $args['before_title'] . $title . $args['after_title'];
	        }
	        // Outputs the $description, with auto "P" (wraps it in paragraph tags)
	        if ( !empty( $description ) ) {
		        echo wpautop($description, true);
			}
			// Outputs the end of the link, again if not empty. (defined in lines 72-77)
	        if ( !empty ( $url ) ){
		        echo '</a>';
	        }
		# Wraps it all together in a nice bow. Finishes with after_widget defined in Sidebar Declaration
        echo '</div>' . $args['after_widget'];

    }

    /**
     * Deals with the settings when they are saved by the admin. Here is
     * where any validation should be dealt with.
     *
     * @param array  An array of new settings as submitted by the admin
     * @param array  An array of the previous settings
     * @return array The validated and (if necessary) amended settings
     **/
    public function update( $new_instance, $old_instance ) {

		# This updates a widget with old values to new ones. Names should match the form below
		# We strip tags so our site can be injected with anything malicious. Including the description.
		# No HTML allowed. Sorry.
        $instance = $old_instance;
        $instance['title'] = strip_tags($new_instance['title']);
        $instance['image'] = strip_tags($new_instance['image']);
        $instance['description'] = strip_tags($new_instance['description']);
        $instance['link_target'] = strip_tags($new_instance['link_target']);
        $instance['css_class'] = strip_tags($new_instance['css_class']);
        $instance['custom_url'] = strip_tags($new_instance['custom_url']);
        return $instance;
    }

    /**
     * Displays the form for this widget on the Widgets page of the WP Admin area.
     *
     * @param array  An array of the current settings for this widget
     * @return void
     **/
    public function form( $instance )
    {
		# This is where the vars are defined for the admin side. The widget display form    
		if ( $instance ){
			# If there are declarations, save them for future use in the admin area
			# These names should match below in the "value"
			$title = $instance['title'];
			$image = $instance['image'];
			$description = $instance['description'];
			$link_target = $instance['link_target'];
			$css_class = $instance['css_class'];
			$custom_url = $instance['custom_url'];
		} else {
			# If not, they should be blank.
			$title = '';
			$image = '';
			$textarea = '';
			$description = '';
			$link_target = '';
			$css_class = '';
			$custom_url = '';
		}

?>
		<?php # This is the admin display form ?>
		<?php # Widget Title ?>
        <p>
            <label for="<?php echo $this->get_field_name( 'title' ); ?>"><?php _e( 'Feature Title:' ); ?></label>
            <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
        </p>
		<?php # Image Uploader ?>
        <p>
            <label for="<?php echo $this->get_field_name( 'image' ); ?>"><?php _e( 'Feature Image: (max 261px)' ); ?></label>
            <input name="<?php echo $this->get_field_name( 'image' ); ?>" id="<?php echo $this->get_field_id( 'image' ); ?>" class="widefat" type="text" size="36"  value="<?php echo esc_url( $image ); ?>" />
            <input class="upload_image_button button right" type="button" value="Upload Image" style="margin-top:5px;" />
        </p>
        <?php # Description, should you want it ?>
        <p style="clear:both;">
		   <label for="<?php echo $this->get_field_name('description'); ?>"><?php _e( 'Feature Description:' ); ?></label>
		   <textarea name="<?php echo $this->get_field_name('description');?>" id="<?php echo $this->get_field_id('description');?>" class="widefat" type="text" rows="8" style="resize:vertical;" value="<?php echo esc_textarea( $description ); ?>" ><?php echo esc_textarea( $description ) ?></textarea>
        </p>
        <?php # If you want to link to a page, use this ?>
        <p>
        <label for="<?php echo $this->get_field_id('link_target'); ?>"><?php _e('Link Target:'); ?></label>
        <?php wp_dropdown_pages(array(
        	'id' => $this->get_field_id('link_target'),
        	'name' => $this->get_field_name('link_target'),
        	'selected' => $instance['link_target']
        	
        	)); ?>
	   </p>
	   <?php # Custom URL, should you not want to link to a page ?>
	   <p>
		   <label for="<?php echo $this->get_field_name('custom_url'); ?>"><?php _e('Custom URL (Overrides Link Target'); ?></label>
		   <input class="widefat" id="<?php echo $this->get_field_id('custom_url'); ?>" name="<?php echo $this->get_field_name('custom_url'); ?>" type="text" value="<?php echo esc_attr( $custom_url ); ?>" />
	   </p>
	   <?php # Select box for the Bootstrap Classes ?>
	   <p>
		   <label for="<?php echo $this->get_field_name('css_class'); ?>"><?php _e('CSS Class:' ); ?></label>
		   <select name="<?php echo $this->get_field_name('css_class'); ?>" id="<?php echo $this->get_field_id('css_class'); ?>" type="text" value="<?php echo esc_attr( $css_class ); ?>">
			   <option value="col-xs-12 col-sm-12 col-md-3" <?php echo ($css_class=='col-xs-12 col-sm-12 col-md-3')?'selected':'' ?>>1/4 Desktop - Full Mobile</option>
			   <option value="col-xs-12 col-sm-12 col-md-6" <?php echo ($css_class=='col-xs-12 col-sm-12 col-md-6')?'selected':'' ?>>1/2 Desktop - Full Mobile</option>
			   <option value="col-xs-12 col-sm-12 col-md-12" <?php echo ($css_class=='col-xs-12 col-sm-12 col-md-12')?'selected':'' ?>>Full Width Desktop and Mobile</option>
		   </select>
	   </p>
    <?php
    }
}
?>