Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Blazer Six Blog: Building a Better Image Widget with the New WordPress Media Manager
<?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;
}
}
<?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;
}
}
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();
});
<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>
<?php
class WP_Widget {
function __construct( $id_base = false, $name, $widget_options = array(), $control_options = array() ) {
// ...
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.