Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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:

http://stackoverflow.com/questions/13863087/wordpress-custom-widget-image-upload

http://stackoverflow.com/questions/13847714/wordpress-3-5-custom-media-upload-for-your-theme-options/13901303#13901303

My widget Code:

<?php

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

function ctUp_wdScript(){
  wp_enqueue_media();
  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){ ?>
    <p>
      <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" />
    </p>
    <p>
      <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>
    </p>
    <?php
  }


}

Js code:

jQuery(function($){
    $('.custom_media_upload').click(function(e) {
        e.preventDefault();
        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);
            $('.custom_media_url').val(attachment.url);
            $('.custom_media_id').val(attachment.id);
        })
        .open();
    });
});

Thanks in advance for help!

share|improve this question
add comment

1 Answer

up vote 1 down vote accepted

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  ) {
               jQuery('.custom_media_id').val(attachment.id); 
               jQuery('.custom_media_url').val(attachment.url);
               jQuery('.custom_media_image').attr('src',attachment.url).css('display','block');   
            } else {
                return _orig_send_attachment.apply( button_id, [props, attachment] );
            }
        }
        wp.media.editor.open(button);
        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"/>

Update:

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) {
share|improve this answer
    
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. –  sven 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
    
Thank you very much for your help and your time! –  Danilo May 6 '13 at 17:44
show 6 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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