0

I can show the color picker, I can change the color and see the save button watching that, however nothing is saved to DB and I'm getting

Undefined index: my_color", file: "wp-content/plugins/my_plugin/my_color.php", line: 53

This is my widget:

<?php
class widget007 extends WP_Widget {

    function __construct() {
        add_action('admin_print_styles-widgets.php', array( $this, 'load_color_picker_style' ) );
        $args = array(
            'name' => esc_html__( 'widget007', 'txt-domaine' ),
            'description' => esc_html__( 'Something', 'txt-domaine' )
        );
        parent::__construct( 'my_widget007', '', $args );
    }

    function load_color_picker_style() {
        wp_enqueue_style( 'wp-color-picker' );
        wp_enqueue_script( 'wp-color-picker' ); 
    }

    function form( $instance ) {
        $my_color = ! empty( $instance['my_color'] ) ? $instance['my_color'] : '';
        ?>
        <p>  
            <label for="<?php echo esc_attr( $this->get_field_id( 'my_color' ) ); ?>">Color</label>
            <input class="color-picker" type="text" id="<?php echo esc_attr( $this->get_field_id( 'my_color' ) ); ?>" name="<?php echo esc_attr( $this->get_field_id( 'my_color' ) ); ?>" value="<?php echo $my_color; ?>" />
        </p>
        <script>
            ( function( $ ){
                function initColorPicker( widget ) {
                    widget.find( '.color-picker' ).wpColorPicker( {
                        change: _.throttle( function() { // For Customizer
                            $(this).trigger( 'change' );
                        }, 3000 )
                    });
                }

                function onFormUpdate( event, widget ) {
                    initColorPicker( widget );
                }

                $( document ).on( 'widget-added widget-updated', onFormUpdate );

                $( document ).ready( function() {
                    $( '#widgets-right .widget:has(.color-picker)' ).each( function () {
                        initColorPicker( $( this ) );
                    } );
                } );
            }( jQuery ) );
        </script>
        <?php
    }

    function update( $new_instance, $old_instance ) {
        $instance = $old_instance;
        $instance['my_color']  =  $new_instance['my_color'];
        return $instance;
    }
}

add_action( 'widgets_init', function(){
    register_widget( 'widget007' );
});

1 Answer 1

0

Please try this modified code:

class widget007 extends WP_Widget {

        function __construct() {
            add_action('admin_print_styles-widgets.php', array( $this, 'load_color_picker_style' ) );
            $args = array(
                'name' => esc_html__( 'widget007', 'txt-domaine' ),
                'description' => esc_html__( 'Something', 'txt-domaine' )
            );
            parent::__construct( 'my_widget007', '', $args );
        }

        function load_color_picker_style() {
            wp_enqueue_style( 'wp-color-picker' );
            wp_enqueue_script( 'wp-color-picker' ); 
            wp_enqueue_script( 'underscore' );
        }

        function form( $instance ) {
            $my_color = esc_attr( $instance[ 'my_color' ] );
            ?>
            <p>  
                <label for="<?php echo $this->get_field_id( 'my_color' ); ?>">Color</label>
                <input type="text" name="<?php echo $this->get_field_name( 'my_color' ); ?>" class="color-picker" id="<?php echo $this->get_field_id( 'my_color' ); ?>" value="<?php echo $my_color; ?>" />
            </p>
            <script>
                ( function( $ ){
                    function initColorPicker( widget ) {
                        widget.find( '.color-picker' ).wpColorPicker( {
                            change: _.throttle( function() { // For Customizer
                                $(this).trigger( 'change' );
                            }, 4000 )
                        });
                    }

                    function onFormUpdate( event, widget ) {
                        initColorPicker( widget );
                    }

                    $( document ).on( 'widget-added widget-updated', onFormUpdate );

                    $( document ).ready( function() {
                        $( '#widgets-right .widget:has(.color-picker)' ).each( function () {
                            initColorPicker( $( this ) );
                        } );
                    } );
                }( jQuery ) );
            </script>
            <?php
        }

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

            return $instance;
        }
    }

    add_action( 'widgets_init', function(){
        register_widget( 'widget007' );
    });
1
  • Thank you! Yeah it works and the reson why mine didn't is because of this name="<?php echo esc_attr( $this->get_field_id( 'my_color' ) ); ?>" so get_field_id here should be get_field_name.. stupid mistake cost me a lot of time lol thanks again : )
    – pickos7
    Jun 6, 2019 at 14:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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