Name Input from widget displays Sidebar name instead of saved data

Question

I wasn't sure how to title this question,so I apologize. Let me first state that I have no experience with this type of code but I really need to this feature for my website, so I appreciate all the help anyone can provide!

Anyway, I recently got a solution to a previous issue I had which can be found here//

Create Image Uploader for Widget

It worked perfectly, but the new* issue now is that I wanted to add a "Name" input and a way to display default text that would show up on the front end.

I found a tutorial here//

http://wp.tutsplus.com/tutorials/creative-coding/building-custom-wordpress-widgets/

it uses if ( $name ) printf( '<p>' . __('Hey their Sailor! My name is %1$s.', 'example') . '</p>', $name ); to display the name. So I tried to add it into my functions.php.

and came up with this//

// register sidebar
if (function_exists('register_sidebar')) {
register_sidebar(
    array(
    'name' => 'Left Sidebar',
    'id' => 'left-sidebar',
    'description' => 'Widget Area',
    'before_widget' => '<div id="one" class="two">',
    'after_widget' => '</div>',
    )
);
}

// register widget
add_action('widgets_init', 'eotw_widget');
function eotw_widget() {
register_widget( 'eotw_w' );
}

// add admin scripts
add_action('admin_enqueue_scripts', 'ctup_wdscript');
function ctup_wdscript() {
wp_enqueue_media();
wp_enqueue_script('ads_script', get_template_directory_uri() . '/js/ads.js', false,    '1.0', true);
}

// widget class
class eotw_w extends WP_Widget {

function eotw_w() {
    $widget_ops = array('classname' => 'eotw-w');
    $this->WP_Widget('eotw-w-widget', 'EOTW', $widget_ops);
}

function widget($args, $instance) {
    extract($args);

    // widget content
    echo $before_widget;


    if ( $name )
        printf( '<p>' . __('Hey there Sailor! My name is %1$s.', 'example') . '</p>', $name );
?>
    <img class="eotw-edit" src="<?php echo esc_url($instance['image_uri']); ?>" />

<?php
    echo $after_widget;

}

function update($new_instance, $old_instance) {
    $instance = $old_instance;
    $instance['name'] = strip_tags( $new_instance['name'] );
    $instance['image_uri'] = strip_tags( $new_instance['image_uri'] );
    return $instance;
}

function form($instance) {
?>

<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>
<p>
    <label for="<?php echo $this->get_field_id('image_uri'); ?>">Image</label><br />

    <?php
        if ( $instance['image_uri'] != '' ) :
            echo '<img class="custom_media_image" src="' . $instance['image_uri'] . '" style="margin:0;padding:0;max-width:100px;float:left;display:inline-block" /><br />';
        endif;
    ?>

    <input type="text" class="widefat custom_media_url" name="<?php echo $this->get_field_name('image_uri'); ?>" id="<?php echo $this->get_field_id('image_uri'); ?>" value="<?php echo $instance['image_uri']; ?>" style="margin-top:5px;">

    <input type="button" class="button button-primary custom_media_button" id="custom_media_button" name="<?php echo $this->get_field_name('image_uri'); ?>" value="Upload Image" style="margin-top:5px;" />
</p>

<?php
    }
}
?>

The image is displayed on front end and so is//

Hey there Sailor! My name is.

But instead of the "name" inserted into the input field the "Left Sidebar" name is displayed instead.

I'm not sure how to fix this. So my question is, where did I go wrong? What part of the code can I alter in order for the data from the name input to be displayed correctly instead of the name of the sidebar? Please Help.

Answer 1

Okay so it works now. The data from the name input is now displayed on front end along with the uploaded image. I honestly can't explain why... but I basically just copied some lines from the tutorial link I posted and pasted it where it belongs and everything started to work the way it should.

Here is the new* code//

// widget class
class eotw_w extends WP_Widget {

function eotw_w() {
    $widget_ops = array('classname' => 'eotw-w');
    $this->WP_Widget('eotw-w-widget', 'Editor of the Week', $widget_ops);
}

function widget($args, $instance) {
    extract($args);
$title = apply_filters('widget_title', $instance['title'] );
    $name = $instance['name'];
     $image_uri = $instance['image_uri'];

    // widget content
    echo $before_widget;
            if ( $title )
        echo $before_title . $title . $after_title;


    if ( $name )
        printf( '<p>' . __('This weeks EOTW is %1$s ', 'example') . '</p>', $name );
?>
    <img class="eotw-edit" src="<?php echo esc_url($instance['image_uri']); ?>" />

<?php
    echo $after_widget;

}

function update($new_instance, $old_instance) {
    $instance = $old_instance;
    $instance['title'] = strip_tags( $new_instance['title'] );
    $instance['name'] = strip_tags( $new_instance['name'] );
    $instance['image_uri'] = strip_tags( $new_instance['image_uri'] );
    return $instance;
}

function form($instance) {  
        //Set up some default widget settings.
    $defaults = array( 'title' => __('Editor of the Week', 'example'), 'name'     => __('Bilal Shaheen', 'example'));
    $instance = wp_parse_args( (array) $instance, $defaults ); ?>

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

<p>
    <label for="<?php echo $this->get_field_id('name'); ?>">name</label><br />
    <input type="text" name="<?php echo $this->get_field_name('name'); ?>" id="<?php echo $this->get_field_id('name'); ?>" value="<?php echo $instance['name']; ?>" class="widefat" />
</p>
<p>
    <label for="<?php echo $this->get_field_id('image_uri'); ?>">Image</label><br />

    <?php
        if ( $instance['image_uri'] != '' ) :
            echo '<img class="custom_media_image" src="' . $instance['image_uri'] . '" style="margin:0;padding:0;max-width:100px;float:left;display:inline-block" /><br />';
        endif;
    ?>

    <input type="text" class="widefat custom_media_url" name="<?php echo $this->get_field_name('image_uri'); ?>" id="<?php echo $this->get_field_id('image_uri'); ?>" value="<?php echo $instance['image_uri']; ?>" style="margin-top:5px;">

    <input type="button" class="button button-primary custom_media_button" id="custom_media_button" name="<?php echo $this->get_field_name('image_uri'); ?>" value="Upload Image" style="margin-top:5px;" />
</p>

<?php
}
}
?>