Example:
<?php
class Color_Picker_Fields_Widget extends WP_Widget {
function __construct() {
// Instantiate the parent object
$widget_ops = array(
'classname' => 'widget_color_picker_fields_entries',
'description' => esc_attr__('Color Picker Field Widget - Created by deshisoft', 'eye-theme')
);
$control_ops = array(
'width' => 275
);
parent::__construct( false, 'Color Picker Field Widget', $widget_ops, $control_ops );
}
function widget( $args, $instance ) {
extract( $args );
// Widget output
$title = apply_filters('widget_title', $instance['title']);
$color_picker = apply_filters('widget_color_picker', $instance['color_picker']);
echo $before_widget;
echo '<div style="border:1px solid #ddd; background:#f6f6f6;padding:15px;">';
echo esc_attr($title);
echo esc_attr($color_picker);
echo '</div>';
echo $after_widget;
}
function update( $new_instance, $old_instance ) {
// Save widget options
$instance = array();
$instance = $old_instance;
$instance['title'] = strip_tags( $new_instance['title'] );
$instance['color_picker'] = strip_tags( $new_instance['color_picker'] );
return $instance;
}
function form( $instance ) {
// Output admin widget options form
$title = $instance['title'];
$color_picker = $instance['color_picker']; ?>
<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 $title; ?>" /></p>
<p><label for="<?php echo $this->get_field_id( 'color_picker' ); ?>"></label><span><?php _e( 'BG color'); ?></span>
<input class="color-field" type="text" id="<?php echo $this->get_field_id( 'color_picker' ); ?>" name="<?php echo $this->get_field_name( 'color_picker' ); ?>" value="<?php echo esc_attr( $color_picker ); ?>" /></p>
<script>
// color picker
(function($){
var parent = $('body');
if ($('body').hasClass('widgets-php')){
parent = $('.widget-liquid-right');
}
jQuery(document).ready(function($) {
parent.find('.color-field').wpColorPicker();
});
jQuery(document).on('widget-added', function(e, widget){
widget.find('.color-field').wpColorPicker();
});
})(jQuery);
</script>
<?php
}
}
function color_picker_field_register_widgets() {
register_widget( 'Color_Picker_Fields_Widget' );
}
add_action( 'widgets_init', 'color_picker_field_register_widgets' );
?>
Theme Folder -> function.php
Add this line:
require get_template_directory() . '/inc/color_picker_widget.php'; // inc folder name depend on your theme.