I'm creating a small widget for wordpress 3.5 that allows you to upload images.

The widget is loaded correctly by wordpress. When I add the widget to a sidebar upload button does not work. If I update the page of keeping my widget in the sidebar, button works and I can load and save the image correctly.

To build the widget I was inspired by these links:



My widget Code:


add_action('widgets_init', 'ctUp_ads_widget');
function ctUp_ads_widget() {
    register_widget( 'ctUp_ads' );

function ctUp_wdScript(){
  wp_enqueue_script('adsScript', get_template_directory_uri() . '/js/ads.js');
add_action('admin_enqueue_scripts', 'ctUp_wdScript');

class ctUp_ads extends WP_Widget{

    function ctUp_ads() {
        $widget_ops = array( 'classname' => 'ctUp-ads' );
        $control_ops = array( 'width' => 250, 'height' => 350, 'id_base' => 'ctUp-ads-widget' );
        $this->WP_Widget( 'ctUp-ads-widget',THEMENAME .' - Ads', $widget_ops, $control_ops );

    public function widget($args, $instance){ 
        extract( $args );   
    <a href="#"><img src="<?php echo esc_url($instance['image_uri']); ?>" /></a>
    <?php }

    function update($new_instance, $old_instance) {
        $instance = $old_instance;
        $instance['text'] = strip_tags( $new_instance['text'] );
        $instance['image_uri'] = strip_tags( $new_instance['image_uri'] );
        return $instance;

  public function form($instance){ ?>
      <label for="<?php echo $this->get_field_id('text'); ?>"><?php _e('Text', THEMENAME); ?></label><br />
      <input type="text" name="<?php echo $this->get_field_name('text'); ?>" id="<?php echo $this->get_field_id('text'); ?>" value="<?php echo $instance['text']; ?>" class="widefat" />
      <label for="<?php echo $this->get_field_id('image_uri'); ?>">Image</label><br />
        <img class="custom_media_image" src="<?php if(!empty($instance['image_uri'])){echo $instance['image_uri'];} ?>" style="margin:0;padding:0;max-width:100px;float:left;display:inline-block" />
        <input type="text" class="widefat custom_media_url" name="<?php echo $this->get_field_name('image_uri'); ?>" id="<?php echo $this->get_field_id('image_uri'); ?>" value="<?php echo $instance['image_uri']; ?>">
        <a href="#" class="button custom_media_upload"><?php _e('Upload', THEMENAME); ?></a>


Js code:

    $('.custom_media_upload').click(function(e) {
        var custom_uploader = wp.media({
            title: 'Custom Title',
            button: {
                text: 'Custom Button Text',
            multiple: false  // Set this to true to allow multiple files to be selected
        .on('select', function() {
            var attachment = custom_uploader.state().get('selection').first().toJSON();
            $('.custom_media_image').attr('src', attachment.url);

Thanks in advance for help!


Check if this works for you: Put this code in

jQuery(document).ready( function(){
 function media_upload( button_class) {
    var _custom_media = true,
    _orig_send_attachment = wp.media.editor.send.attachment;
    jQuery('body').on('click',button_class, function(e) {
        var button_id ='#'+jQuery(this).attr('id');
        /* console.log(button_id); */
        var self = jQuery(button_id);
        var send_attachment_bkp = wp.media.editor.send.attachment;
        var button = jQuery(button_id);
        var id = button.attr('id').replace('_button', '');
        _custom_media = true;
        wp.media.editor.send.attachment = function(props, attachment){
            if ( _custom_media  ) {
            } else {
                return _orig_send_attachment.apply( button_id, [props, attachment] );
        return false;
media_upload( '.custom_media_upload');

Instead of link to upload you can rather use a button

  <input type="button" value="<?php _e( 'Upload Image', 'theme name' ); ?>" class="button custom_media_upload" id="custom_image_uploader"/>


Just minor changes in your js and your problem will be solved instead of

jQuery(button_class).click(function(e) {

you have to use

jQuery('body').on('click',button_class, function(e) {

as the widget is added using ajax. Even your previous code should work if you make the similar changes in js.

  $('body').on('click','.custom_media_upload',function(e) {
  • Thanks Dot1 for your response! I tried to replace the widget code but unfortunately it still does not work. This only works if reloading the page with the widget activated. I do not understand what is wrong!
    – Danilo
    May 6 '13 at 15:49
  • At the moment I'm developing locally with xampp. If you want I can create a zipped file with the widget and you load it on dropbox
    – Danilo
    May 6 '13 at 16:13
  • Yes that will do, just the plugin part and not the whole wordpress.
    – Kumar
    May 6 '13 at 16:15
  • dl.dropboxusercontent.com/u/5490925/wpads.zip I put the widget inside the theme calling up from the functions.php file - Thanks!
    – Danilo
    May 6 '13 at 16:29
  • 1
    Happy to Help :)
    – Kumar
    May 7 '13 at 19:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.