Help with custom widget

Question

I've tried methods of creating a custom widget and have had no luck. I am looking to 'widgetize" a template and allow an end-user to only update text in the widgetized areas. It seems like this is pretty cut and dry looking at the codex, but I can't seem to get anything to output. The widget appears in the admin panel and I am able to store the text, just no output. I'm sure I'm missing something glaringly obvious.

Here's the plugin: (code updated)

class Header_Slide extends WP_Widget {

/**
 * Register widget with WordPress.
 */
function __construct() {
    parent::__construct(
        'header_slide', // Base ID
        __('Header Slide', 'text_domain'), // Name
        array( 'description' => __( 'Use this widget to edit the first slider section', 'text_domain' ), ) // Args
    );
}

/**
 * Front-end display of widget.
 *
 * @see WP_Widget::widget()
 *
 * @param array $args     Widget arguments.
 * @param array $instance Saved values from database.
 */
public function widget( $args, $instance ) {

    echo $args['before_widget'];

    ?>

    <div id="form_slider" data-anchor="form_slider">
        <ul class="form-bxslider list-unstyled">                
            <li>
                <div class='list-forstart fin_1'>
                    <h2 class='h-Bold'>
                        <?php           
                        if ( ! empty ($instance['headline1'])) {
                            echo $instance['headline1'];                        
                        };
                        ?>
                    </h2>
                    <p class='desc'>
                        <?php
                        if (!empty ($instance['blurb1'])) {                     
                            echo $instance['blurb1'];
                        };
                        ?>
                    </p>
                </div>
                <div class='img-slider hidden-xs slide-man1 fin_2'></div>
            </li>
            <li>
                <div class='list-forstart fin_1'>
                    <h2 class='h-Bold'>
                        <?php
                            if (!empty ($instance['headline2'])) {
                                echo $instance['headline2'];
                            };
                        ?>
                    </h2>
                    <p class='desc'>
                        <?php
                            if (!empty ($instance['blurb2'])) {                     
                                echo $instance['blurb2'];
                            };
                        ?>
                    </p>
                </div>
                <div class='img-slider hidden-xs slide-man2 fin_2'></div>
            </li>
            <li>
                <div class='list-forstart fin_1'>
                    <h2 class='h-Bold'>
                        <?php
                            if (!empty ($instance['headline3'])) {
                                    echo $instance['headline3'];
                            };
                        ?>
                    </h2>
                    <p class='desc'>
                        <?php
                            if (!empty ($instance['blurb3'])) {                     
                                echo $instance['blurb3'];
                            };
                        ?>
                    </p>
                </div>
                <div class="img-slider hidden-xs slide-man3 fin_2"></div>
            </li>
        </ul>
         <div class="bx-controls bx-has-pager bx-has-controls-direction" id='dafault_pager'>
            <div class="bx-pager bx-default-pager">
                <div class="bx-pager-item">
                    <a class="bx-pager-link  active" data-slide-index="0" href="#"><span></span></a>
                </div>
                <div class="bx-pager-item">
                    <a class="bx-pager-link  " data-slide-index="1" href="#"><span></span></a>
                </div>
                <div class="bx-pager-item lastItem">
                    <a class="bx-pager-link " data-slide-index="2" href="#"><span></span></a>
                </div>
            </div>
        </div>

        <div class="clearfix visible-xs visible-md"></div>

    </div>
<?php

echo $args['after_widget'];                 

}

/**
 * Back-end widget form.
 *
 * @see WP_Widget::form()
 *
 * @param array $instance Previously saved values from database.
 */
public function form( $instance ) {
    if ( isset( $instance[ 'headline1' ] ) ) {
        $headline1 = $instance[ 'headline1' ];
    }
    else {
        $headline1 = __( 'New Headline1', 'text_domain' );
    }
    if ( isset( $instance[ 'blurb1' ] ) ) {
        $blurb1 = $instance[ 'blurb1' ];
    }
    else {
        $blurb1 = __( 'New Blurb1', 'text_domain' );
    }
    if ( isset( $instance[ 'headline2' ] ) ) {
        $headline2 = $instance[ 'headline2' ];
    }
    else {
        $headline2 = __( 'New Headline2', 'text_domain' );
    }
    if ( isset( $instance[ 'blurb2' ] ) ) {
        $blurb2 = $instance[ 'blurb2' ];
    }
    else {
        $blurb2 = __( 'New Blurb2', 'text_domain' );
    }
    if ( isset( $instance[ 'headline3' ] ) ) {
        $headline3 = $instance[ 'headline3' ];
    }
    else {
        $headline3 = __( 'New Headline3', 'text_domain' );
    }
    if ( isset( $instance[ 'blurb3' ] ) ) {
        $blurb3 = $instance[ 'blurb3' ];
    }
    else {
        $blurb3 = __( 'New Blurb3', 'text_domain' );
    }
    ?>
    <p>
    <label for="<?php echo $this->get_field_id( 'headline1' ); ?>"><?php _e( 'Headline1:' ); ?></label> 
    <input class="widefat" id="<?php echo $this->get_field_id( 'headline1' ); ?>" name="<?php echo $this->get_field_name( 'headline1' ); ?>" type="text" value="<?php echo esc_attr( $headline1 ); ?>">
    </p>
    <p>
    <label for="<?php echo $this->get_field_id( 'blurb1' ); ?>"><?php _e( 'Blurb1:' ); ?></label> 
    <input class="widefat" id="<?php echo $this->get_field_id( 'blurb1' ); ?>" name="<?php echo $this->get_field_name( 'blurb1' ); ?>" type="text" value="<?php echo esc_attr( $blurb1 ); ?>">
    </p>
    <p>
    <label for="<?php echo $this->get_field_id( 'headline2' ); ?>"><?php _e( 'Headline2:' ); ?></label> 
    <input class="widefat" id="<?php echo $this->get_field_id( 'headline2' ); ?>" name="<?php echo $this->get_field_name( 'headline2' ); ?>" type="text" value="<?php echo esc_attr( $headline2 ); ?>">
    </p>
    <p>
    <label for="<?php echo $this->get_field_id( 'blurb2' ); ?>"><?php _e( 'Blurb2:' ); ?></label> 
    <input class="widefat" id="<?php echo $this->get_field_id( 'blurb2' ); ?>" name="<?php echo $this->get_field_name( 'blurb2' ); ?>" type="text" value="<?php echo esc_attr( $blurb2 ); ?>">
    </p>
    <p>
    <label for="<?php echo $this->get_field_id( 'headline3' ); ?>"><?php _e( 'Headline3:' ); ?></label> 
    <input class="widefat" id="<?php echo $this->get_field_id( 'headline3' ); ?>" name="<?php echo $this->get_field_name( 'headline3' ); ?>" type="text" value="<?php echo esc_attr( $headline3 ); ?>">
    </p>
    <p>
    <label for="<?php echo $this->get_field_id( 'blurb3' ); ?>"><?php _e( 'Blurb3:' ); ?></label> 
    <input class="widefat" id="<?php echo $this->get_field_id( 'blurb3' ); ?>" name="<?php echo $this->get_field_name( 'blurb3' ); ?>" type="text" value="<?php echo esc_attr( $blurb3 ); ?>">
    </p>        
    <?php 
}

/**
 * Sanitize widget form values as they are saved.
 *
 * @see WP_Widget::update()
 *
 * @param array $new_instance Values just sent to be saved.
 * @param array $old_instance Previously saved values from database.
 *
 * @return array Updated safe values to be saved.
 */
public function update( $new_instance, $old_instance ) {
    $instance = array();
    $instance['headline1'] = ( ! empty( $new_instance['headline1'] ) ) ? strip_tags( $new_instance['headline1'] ) : '';
    $instance['blurb1'] = ( ! empty( $new_instance['blurb1'] ) ) ? strip_tags( $new_instance['blurb1'] ) : '';
    $instance['headline2'] = ( ! empty( $new_instance['headline2'] ) ) ? strip_tags( $new_instance['headline2'] ) : '';
    $instance['blurb2'] = ( ! empty( $new_instance['blurb2'] ) ) ? strip_tags( $new_instance['blurb2'] ) : '';
    $instance['headline3'] = ( ! empty( $new_instance['headline3'] ) ) ? strip_tags( $new_instance['headline3'] ) : '';
    $instance['blurb3'] = ( ! empty( $new_instance['blurb3'] ) ) ? strip_tags( $new_instance['blurb3'] ) : '';

    return $instance;
}

} // class Header_Slide
function register_widgets() {
register_widget( 'header_slide' );
}
add_action( 'widgets_init', 'register_widgets' );

`

on the output page I have:

<?php the_widget( 'header_slide'); ?>

Answer 1

Your code looks much better and all your bugs are fixed :-). (Caveat: I did not go through your code line by line, just quickly tested it though)

There are however two problems left that you've missed, and that all come from when you've renamed your widget

• register_widget( 'header_slide' ); should be register_widget( 'Header_Slide' );

• the_widget( 'header_slide'); should be the_widget( 'Header_Slide');

Please see the_widget() and how it is used. Just for example, the following

the_widget( 'Header_Slide', 'headline1=HEADLINE1&blurb1=BLURB1');

will output

HEADLINE1

BLURB1

I would however not use the_widget() to display a widget, I would rather create a sidebar and then drop my widget in there.

You can register a sidebar conditionally for a specific page of template