Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

?>
share|improve this question
    
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' ); –  splashingpixels Sep 5 '13 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 '13 at 13:41
add comment

1 Answer 1

up vote 1 down vote accepted

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
    }

}
share|improve this answer
    
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. –  user2619611 Sep 5 '13 at 14:42
    
that is weird, when you drag widget at that time wordpress save that position via ajax. –  Strik3r Sep 5 '13 at 16:50
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.