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' );
});
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' );
    });
|improve this answer|||||
  • 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 '19 at 14:51

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.