Blazer Six Blog: Building a Better Image Widget with the New WordPress Media Manager

class-blazersix-image-widget.php

<?php
/**
 * Abbreviated image widget class.
 */
class Blazer_Six_Widget_Image extends WP_Widget {
	/**
	 * Setup widget options.
	 *
	 * Allows child classes to override the defaults.
	 *
	 * @see WP_Widget::construct()
	 */
	function __construct( $id_base = false, $name = false, $widget_options = array(), $control_options = array() ) {
		$id_base = ( $id_base ) ? $id_base : 'blazersix-widget-image';
		$name = ( $name ) ? $name : __( 'Image', 'blazersix-widget-image-i18n' );
		
		$widget_options = wp_parse_args( $widget_options, array(
			'classname'   => 'widget_image',
			'description' => __( 'An image from the media library', 'blazersix-widget-image-i18n' )
		) );
		
		$control_options = wp_parse_args( $control_options, array( 'width' => 300 ) );
		
		parent::__construct( $id_base, $name, $widget_options, $control_options );
	}
	
	/**
	 * Default widget front end display method.
	 */
	function widget( $args, $instance ) {
		// Return cached widget if it exists.
		// Filter and sanitize instance data
		$content = $this->render( $args, $instance );
		// Cache the generated content.
	}
	
	/**
	 * Generate the widget output.
	 */
	function render( $args, $instance ) {
		// Generate content.
		return $content;
	}
}

class-slide-widget.php

<?php
/**
 * Abbreviated slide widget class extending image widget.
 */
class Slide_Widget extends Blazer_Six_Widget_Image {
	/**
	 * Setup widget options.
	 */
	function __construct() {
		$widget_options = wp_parse_args( $widget_options, array(
			'classname'   => 'widget_slide',
			'description' => 'Add a slide to the homepage slider'
		) );
		
		parent::__construct( 'slide', 'Slide', $widget_options );
	}
	
	/**
	 * Generate the widget output.
	 */
	function render( $args, $instance ) {
		// Generate content.
		return $content;
	}
}

media-control-frame.js

jQuery(function($) {
	mediaControl = {
		// Initializes a new media manager or returns an existing frame.
		// @see wp.media.featuredImage.frame()
		frame: function() {
			if ( this._frame )
				return this._frame;

			this._frame = wp.media({
				title: 'Frame Title',
				library: {
					type: 'image'
				},
				button: {
					text: 'Button Text'
				},
				multiple: false
			});
			
			this._frame.on( 'open', this.updateFrame ).state('library').on( 'select', this.select );
			
			return this._frame;
		},
		
		select: function() {
			// Do something when the "update" button is clicked after a selection is made.
		},
		
		updateFrame: function() {
			// Do something when the media frame is opened.
		},
		
		init: function() {
			$('#wpbody').on('click', '.blazersix-media-control-choose', function(e) {
				e.preventDefault();
				
				mediaControl.frame().open();
			});
		}
	};
	
	mediaControl.init();
});

media-control-snippet.php

<p class="blazersix-media-control"
	data-title="Choose an Image for the Widget"
	data-update-text="Update Image"
	data-target=".image-id"
	data-select-multiple="false">
    
	<?php echo wp_get_attachment_image( $image_id, 'medium', false ); ?>
    
	<input type="hidden" name="image_id" id="image_id" value="<?php echo $image_id; ?>" class="image-id blazersix-media-control-target">
	
    <a href="#" class="button blazersix-media-control-choose">Choose an Image</a>
    
</p>

wp-widget-snippet.php

<?php
class WP_Widget {
    function __construct( $id_base = false, $name, $widget_options = array(), $control_options = array() ) {
        // ...
    }
}