0

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
    }
}

?>
2
  • In your rollover image, your name is wrong, you have the name set to echo $this->get_field_name( 'image' ); when it should be echo $this->get_field_name( 'rollover_image' );
    – user23654
    Sep 5, 2013 at 12:18
  • If you need to write "so ignore that bit", then please remove that bit upfront so it's less to read and your chance to find someone willing to read through increases.
    – kaiser
    Sep 5, 2013 at 13:41

1 Answer 1

1

In $control_ops = array( 'width' => 300, 'height' => 350, 'id_base' => 'example-widget' ); id_base should be without space and in your rollover image, your name is wrong, you have the name set to echo $this->get_field_name( 'image' ); when it should be echo $this->get_field_name( 'rollover_image' );

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 ) ;

        $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' , 'image'          => '/images/editorial.png' , 'rollover_image' => '/images/editorial.png' ) ;
        $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 ( 'rollover_image' ) ; ?>" value="<?php echo $instance[ 'rollover_image' ] ; ?>" style="width:100%;" />
        </p>



        <?php
    }

}
2
  • Thanks that fixed it, now I have a different problem, when I refresh the widget area, my widget will not stay in the place that I put it. Sep 5, 2013 at 14:42
  • that is weird, when you drag widget at that time wordpress save that position via ajax.
    – Faishal
    Sep 5, 2013 at 16:50

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.