4

I have some problems adding the wpColorPicker to a Widget. Does anyone have a working sample? It only works when I click on 'Save' or reload the page, but when I drag a new widget to the area it will not activate. Anyone any ideas? Below you can find my code so far.

class SampleWidget extends WP_Widget 
    {

        /**
         * Register widget with WordPress.
         */
        public function __construct () 
        {
            parent::__construct
            (
                'sample_widget',
                'Sample',
                array( 'description' => __( 'A sample description'), )
            );  

            add_action( 'admin_enqueue_scripts', array( &$this, 'admin_enqueue_scripts' ) );
        }

        public function admin_enqueue_scripts ( $hook_suffix )
        {
            if ( $hook_suffix != 'widgets.php' ) return;

            wp_enqueue_style( 'wp-color-picker' );          
            wp_enqueue_script( 'wp-color-picker' ); 
        }

        /**
         * Front-end display of widget.
         *
         * @see WP_Widget::widget()
         *
         * @param array $args     Widget arguments.
         * @param array $instance Saved values from database.
         */
        public function widget( $args, $instance ) 
        {
            extract( $args );

            echo $before_widget;
            echo $after_widget;
        }

        /**
         * Sanitize widget form values as they are saved.
         *
         * @see WP_Widget::update()
         *
         * @param array $new_instance Values just sent to be saved.
         * @param array $old_instance Previously saved values from database.
         *
         * @return array Updated safe values to be saved.
         */
        public function update( $new_instance, $old_instance ) 
        {
            $instance = array();
            return $instance;
        }

        /**
         * Back-end widget form.
         *
         * @see WP_Widget::form()
         *
         * @param array $instance Previously saved values from database.
         */
        public function form ( $instance ) 
        {
            ?>
            <p>  
                <label for="<?php echo $this->get_field_id( 'background-color' ); ?>">Achtergrondkleur:</label>
                <input type="text" id="<?php echo $this->get_field_id( 'background-color' ); ?>" name="<?php echo $this->get_field_name( 'background-color' ); ?>" value="<?php echo esc_attr( $backgroundColor ); ?>" />                              
            </p>

            <script type="text/javascript">
            jQuery(document).ready(function($){
                $('#<?php echo $this->get_field_id( 'background-color' ); ?>').wpColorPicker();
            });
            </script>
            <?php
        }
    }

2 Answers 2

3

Here is the code I used for one of my projects:

<?php
function load_color_picker_style() {
    wp_enqueue_style( 'wp-color-picker' );
}
    add_action('admin_print_scripts-widgets.php', 'load_color_picker_script');
    add_action('admin_print_styles-widgets.php', 'load_color_picker_style');
?>

///Javascript

jQuery(document).ready(function($){
    function updateColorPickers(){
        $('#widgets-right .wp-color-picker').each(function(){
            $(this).wpColorPicker({
                // you can declare a default color here,
                // or in the data-default-color attribute on the input
                defaultColor: false,
                // a callback to fire whenever the color changes to a valid color
                change: function(event, ui){},
                // a callback to fire when the input is emptied or an invalid color
                clear: function() {},
                // hide the color picker controls on load
                hide: true,
                // show a group of common colors beneath the square
                // or, supply an array of colors to customize further
                palettes: ['#ffffff','#000000','#ff7c0b']
            });
        }); 
    }
    updateColorPickers();   
    $(document).ajaxSuccess(function(e, xhr, settings) {

        if(settings.data.search('action=save-widget') != -1 ) { 
            $('.color-field .wp-picker-container').remove();    
            updateColorPickers();       
        }
    });
 });

The only requirement is that the input you want to be a colorpicker has to have the class name of, well, color-picker.

2
  • Where do you place this? I added the class color-picker and copied your code, but it didn't work. So I figured it was because you wrote wp-color-picker in the updateColorPicker method so I changed that to color-picker and now I see two color pickers .
    – Mark
    Apr 19, 2013 at 20:08
  • Added the corresponding php snippet. I added it to the functions.php file. Apr 20, 2013 at 3:20
2

I think what you really want to be doing is binding to the "sortstop" event which is triggered after a widget is dropped into a droppable sidebar area.

jQuery('div.widgets-sortables').bind('sortstop', function(event,ui) {
    // This javascript code within here will be run after you've dropped a sidebar widget
});

This hasn't been tested, but I reckon is probably the right avenue to pursue.

2
  • 1
    I thought that too and even explored ajaxsuccess but couldnt get it to work at creation. Perhap you can give it a try>
    – Mark
    Apr 19, 2013 at 5:47
  • Does it work in Theme Customizer? On Theme Customizer page where is no .widgets-sortables class. So #widgets-right will be better selector. Jan 2, 2016 at 16:09

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.