Wordpress widget won't update when save is clicked - php

Question

So this is my first attempt a creating a widget that has a functionality of creating a simple image rollover effect (if anyone wants it when it's done, leave me a message).
Now I downloaded a sample widget and made some changes, I still haven't touched the html part for the output so ignore that bit. Now my problem is, when I click save, the values in the fields go back to their default values, and they did not do this on the sample widget. Here's my code:
<?php
/**
* Plugin Image: Rollover Widget
* Description: A widget that creates a rollover image effect with a hyperlink.
* Version: 0.1
* Author: Zak Elas
* Author URI:
*/
add_action( 'widgets_init', 'my_widget' );
function my_widget() {
register_widget( 'MY_Widget' );
}
class MY_Widget extends WP_Widget {
function MY_Widget() {
$widget_ops = array( 'classname' => 'example', 'description' => __('A widget that creates a rollover image effect with a hyperlink. ', 'example') );
$control_ops = array( 'width' => 300, 'height' => 350, 'id_base' => 'Rollover Widget' );
$this->WP_Widget( 'example-widget', __('Example Widget', 'example'), $widget_ops, $control_ops );
}
function widget( $args, $instance ) {
extract( $args );
//Our variables from the widget settings.
$link = apply_filters('widget_link', $instance['link'] );
$image = $instance['image'];
$rollover_image = $instance['rollover_image'];
echo $before_widget;
// Display the widget link
if ( $link )
echo $before_link . $link . $after_link;
//Display the name
printf( '<p>' . __('Hey their Sailor! My name is %1$s.', 'example') . '</p>', $image );
printf( '<p>' . __('Hey their Sailor! My name is %1$s.', 'example') . '</p>', $rollover_image );
echo $after_widget;
}
//Update the widget
function update( $new_instance, $old_instance ) {
$instance = $old_instance;
//Strip tags from link and name to remove HTML
$instance['link'] = strip_tags( $new_instance['link'] );
$instance['image'] = strip_tags( $new_instance['image'] );
$instance['rollover_image'] = strip_tags( $new_instance['rollover_image'] );
return $instance;
}
function form( $instance ) {
//Set up some default widget settings.
$defaults = array( 'link' => __('Example', 'example'), 'image' => __('/images/editorial.png', 'example') , 'rollover_image' => __('/images/editorial.png', 'example') );
$instance = wp_parse_args( (array) $instance, $defaults ); ?>
<p>
<label for="<?php echo $this->get_field_id( 'link' ); ?>"><?php _e('link', 'example'); ?></label>
<input id="<?php echo $this->get_field_id( 'link' ); ?>" name="<?php echo $this->get_field_name( 'link' ); ?>" value="<?php echo $instance['link']; ?>" style="width:100%;" />
</p>
<p>
<label for="<?php echo $this->get_field_id( 'image' ); ?>"><?php _e('image', 'example'); ?></label>
<input id="<?php echo $this->get_field_id( 'image' ); ?>" name="<?php echo $this->get_field_name( 'image' ); ?>" value="<?php echo $instance['image']; ?>" style="width:100%;" />
</p>
<p>
<label for="<?php echo $this->get_field_id( 'rollover_image' ); ?>"><?php _e('rollover_image:', 'example'); ?></label>
<input id="<?php echo $this->get_field_id( 'rollover_image' ); ?>" name="<?php echo $this->get_field_name( 'image' ); ?>" value="<?php echo $instance['rollover_image']; ?>" style="width:100%;" />
</p>
<?php
}
}
?>
And here is the sample widgets code
<?php
/**
* Plugin Name: A simple Widget
* Description: A widget that displays authors name.
* Version: 0.1
* Author: Bilal Shaheen
* Author URI: http://gearaffiti.com/about
*/
add_action( 'widgets_init', 'my_widget' );
function my_widget() {
register_widget( 'MY_Widget' );
}
class MY_Widget extends WP_Widget {
function MY_Widget() {
$widget_ops = array( 'classname' => 'example', 'description' => __('A widget that displays the authors name ', 'example') );
$control_ops = array( 'width' => 300, 'height' => 350, 'id_base' => 'example-widget' );
$this->WP_Widget( 'example-widget', __('Example Widget', 'example'), $widget_ops, $control_ops );
}
function widget( $args, $instance ) {
extract( $args );
//Our variables from the widget settings.
$title = apply_filters('widget_title', $instance['title'] );
$name = $instance['name'];
$show_info = isset( $instance['show_info'] ) ? $instance['show_info'] : false;
echo $before_widget;
// Display the widget title
if ( $title )
echo $before_title . $title . $after_title;
//Display the name
if ( $name )
printf( '<p>' . __('Hey their Sailor! My name is %1$s.', 'example') . '</p>', $name );
if ( $show_info )
printf( $name );
echo $after_widget;
}
//Update the widget
function update( $new_instance, $old_instance ) {
$instance = $old_instance;
//Strip tags from title and name to remove HTML
$instance['title'] = strip_tags( $new_instance['title'] );
$instance['name'] = strip_tags( $new_instance['name'] );
$instance['show_info'] = $new_instance['show_info'];
return $instance;
}
function form( $instance ) {
//Set up some default widget settings.
$defaults = array( 'title' => __('Example', 'example'), 'name' => __('Bilal Shaheen', 'example'), 'show_info' => true );
$instance = wp_parse_args( (array) $instance, $defaults ); ?>
//Widget Title: Text Input.
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e('Title:', 'example'); ?></label>
<input id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" style="width:100%;" />
</p>
//Text Input.
<p>
<label for="<?php echo $this->get_field_id( 'name' ); ?>"><?php _e('Your Name:', 'example'); ?></label>
<input id="<?php echo $this->get_field_id( 'name' ); ?>" name="<?php echo $this->get_field_name( 'name' ); ?>" value="<?php echo $instance['name']; ?>" style="width:100%;" />
</p>
//Checkbox.
<p>
<input class="checkbox" type="checkbox" <?php checked( $instance['show_info'], true ); ?> id="<?php echo $this->get_field_id( 'show_info' ); ?>" name="<?php echo $this->get_field_name( 'show_info' ); ?>" />
<label for="<?php echo $this->get_field_id( 'show_info' ); ?>"><?php _e('Display info publicly?', 'example'); ?></label>
</p>
<?php
}
}
?>

Answer 1

The id_base should match the first argument for WP_Widget, and it should be lower case, no spaces:
$control_ops = array(
'width' => 300,
'height' => 350,
'id_base' => 'rollover_image_id'
);
$this->WP_Widget(
'rollover_image_id',
__('Example Widget', 'example'),
$widget_ops,
$control_ops
);
And you have a get_field_name( 'image' )
where it should be get_field_name( 'rollover_image' ).

Answer 2

Change this line
$this->WP_Widget( 'example-widget', __('Example Widget', 'example'), $widget_ops, $control_ops );
to this
$this->WP_Widget( 'my_widget', __('Example Widget', 'example'), $widget_ops, $control_ops );
consructor id (which was example-widget and I have corected to my_widget) must be namespaced form (lowercase, nospace) of class name (which is MY_Widget).
This will work insaAllah.