• Hi, I have working widget on the dashboard, which can upload images. My source was here, but in customizer the Upload image button doesn’t work. The scripts are loaded, can alert a message on click, and also tb_show() function doesn’t work on click. Here is the code:

    class My_Widget extends WP_Widget {
        function __construct() {
            parent::__construct(
                    'my_widget',
                    __('My Widget', 'my_theme'),
            );
            add_action('admin_enqueue_scripts', array($this, 'upload_scripts'));
        }
    
        public function upload_scripts() {
            global $pagenow;
            if($pagenow == 'widgets.php' || $pagenow == 'customize.php') {
                wp_enqueue_script('media-upload');
                wp_enqueue_script('thickbox');
                wp_enqueue_script('upload_media_widget', get_template_directory_uri() . '/js/upload-media.js', array('jquery'));
                wp_enqueue_style('thickbox');
            }
        }
    
        public function widget($args, $instance) {
            echo $args['before_widget'];
            ?>
            <a href="<?php echo $instance['link']; ?>" title="<?php echo $instance['title']; ?>" target="_blank">
                <div style="background-image: url(<?php echo $instance['image']; ?>)">
                    <h2><?php echo $instance['title']; ?></h2>
                </div>
                <p><?php echo $instance['description']; ?></p>
            </a>
            <?php
            echo $args['after_widget'];
        }
    
        public function form($instance) {
            $title = !empty($instance['title']) ? $instance['title'] : '';
            $description = !empty($instance['description']) ? $instance['description'] : '';
            $link = !empty($instance['link']) ? $instance['link'] : '';
            $image = !empty($instance['image']) ? $instance['image'] : '';
            ?>
            <p>
                <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label>
                <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>">
            </p>
            <p>
                <label for="<?php echo $this->get_field_id('description'); ?>"><?php _e('Description:'); ?></label>
                <textarea class="widefat" id="<?php echo $this->get_field_id('description'); ?>" name="<?php echo $this->get_field_name('description'); ?>"><?php echo esc_attr($description); ?></textarea>
            </p>
            <p>
                <label for="<?php echo $this->get_field_id('link'); ?>"><?php _e('Link:'); ?></label>
                <input class="widefat" id="<?php echo $this->get_field_id('link'); ?>" name="<?php echo $this->get_field_name('link'); ?>" type="text" value="<?php echo esc_attr($link); ?>">
            </p>
            <p>
                <label for="<?php echo $this->get_field_name('image'); ?>"><?php _e('Image:'); ?></label>
                <input name="<?php echo $this->get_field_name('image'); ?>" id="<?php echo $this->get_field_id('image'); ?>" class="widefat" type="text" size="36"  value="<?php echo esc_url($image); ?>" />
                <input class="js-upload-image-button" type="button" value="Upload Image" />
            <?php
        }
    
        public function update($new_instance, $old_instance) {
            $instance = array();
            $instance['title'] = (!empty($new_instance['title']) ) ? strip_tags($new_instance['title']) : '';
            $instance['description'] = (!empty($new_instance['description']) ) ? strip_tags($new_instance['description']) : '';
            $instance['link'] = (!empty($new_instance['link']) ) ? strip_tags($new_instance['link']) : '';
            $instance['image'] = (!empty($new_instance['image']) ) ? strip_tags($new_instance['image']) : '';
    
            return $instance;
        }
    
    }
    
    function register_my_widget() {
        register_widget('My_Widget');
    }
    add_action('widgets_init', 'register_my_widget');

    And here is upload-media.js :

    jQuery(document).ready(function($) {
        $(document).on("click", ".js-upload-image-button", function() {
            jQuery.data(document.body, 'prevElement', $(this).prev());
            window.send_to_editor = function(html) {
                var imgurl = jQuery('img',html).attr('src');
                var inputText = jQuery.data(document.body, 'prevElement');
    
                if(inputText != undefined && inputText != '')
                {
                    inputText.val(imgurl);
                }
    
                tb_remove();
            };
            tb_show('', 'media-upload.php?type=image&TB_iframe=true');
            return false;
        });
    });

    Thanks for help.

  • The topic ‘Custom widget doesn't work in customizer’ is closed to new replies.