I have used a jscolor picker into my plugin. After installing a jscolor picker, the picker fetches the color in my own plugin widget. But after saving the widget section, the color picker has gone and its simply looks like a textbox with the color value. I thought that i have done a mistake in update function. But its also looks fine. What was the problem?
My code is,
<?php
class blank_widget extends WP_Widget {
function blank_widget() {
parent::WP_Widget(false, $name = __('Blank Widget', 'blank_widget') );
/** Enqueue_css Declaration */
add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_css' ) );
/** Load CSS in <head> */
add_action( 'wp_head', array( $this, 'css' ) );
$this->defaults = array(
'bg_color'=> 'd00000',
);
}
// widget form creation
function form($instance) {
$instance = wp_parse_args( (array) $instance, $this->defaults );
?>
<p>
<label for="<?php echo $this->get_field_id('bg_color'); ?>"><?php _e('Background color:', 'blank_widget'); ?></label>
<input class="color" id="<?php echo $this->get_field_id('bg_color'); ?>" name="<?php echo $this->get_field_name('bg_color'); ?>" type="text" value="<?php echo esc_attr( $instance['bg_color'] ); ?>" />
</p>
<?php
function widget($args, $instance) {
extract( $args );
echo $before_widget;
echo '<div class="site_bg">Test</div>';
echo $after_widget;
}
function update($new_instance, $old_instance) {
$instance = $old_instance;
// Fields
$instance['bg_color'] = strip_tags($new_instance['bg_color']);
return $instance;
}
function css() {
/** Pull widget settings, merge with defaults */
$all_instances = $this->get_settings();
$instance = wp_parse_args( $all_instances[$this->number], $this->defaults );
/** The CSS to output */
$css = '
.site_bg{
background: '. $instance['bg_color'].';
}
';
/** Minify a bit */
$css = str_replace( "t", '', $css );
$css = str_replace( array( "n", "r" ), ' ', $css );
/** Echo the CSS */
echo '<style type="text/css" media="screen">' . $css . '</style>';
}
}
add_action('widgets_init', create_function('', 'return register_widget("blank_widget");'));
add_action('admin_enqueue_scripts', 'pw_load_scripts');
function pw_load_scripts() {
wp_register_script('custom-js', plugin_dir_url(__FILE__).'js/jscolor.js');
wp_enqueue_script('custom-js');
}
?>
