I'm stuck at the beginning of my custom widget :) When I click the button that should open modal with WP media uploader it doesn't open it. I've enqueued JS for the widget in functions and custom JS loading and show no errors. I also tried to add these buttons to simple metabox and it's working but no result in widget.
Widget PHP
class Deo_Profile_Widget extends WP_Widget {
// setup the widget name, description etc.
function __construct() {
$widget_ops = array(
'classname' => "deo_profile_widget",
'desciption' => 'Custom Profile Widget',
);
parent::__construct( 'deo_profile', 'Deo Profile', $widget_ops);
}
// update of the widget
function update( $new_instance, $old_instance ) {
$instance = $old_instance;
return $instance;
}
// back-end display of widget
function form( $instance ) {
?>
<input type="hidden" id="image-hidden-field" name="custom_image_data">
<input type="button" id="image-upload-button" class="button button-primary" value="Add Image">
<input type="button" id="image-delete-button" class="button" value="Remove Image">
<?php
}
// front-end display of widget
function widget( $args, $instance ) {
echo "Hey";
}
}
add_action( 'widgets_init', function() {
register_widget( 'Deo_Profile_Widget' );
});
Widget JS
(function($){
/* WordPress Media Uploader
-------------------------------------------------------*/
var addButton = $('#image-upload-button');
var deleteButton = $('#image-delete-button');
var hiddenField = $('#image-hidden-field');
var mediaUploader = wp.media.frames.file_frame = wp.media({
title: 'Select an Image',
button: {
text: 'Use This Image'
},
multiple: false
});
addButton.on('click', function(e) {
e.preventDefault();
if ( mediaUploader ) {
mediaUploader.open();
return;
}
});
})(jQuery);
