0

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'); ?>
  • 2
    You have a lot of bugs in your code. Enable debug and fix all your bugs. Also, classnames should be uppercase, like Header_Slide Also, we are years after PHP 5.2. so you can drop add_action('widgets_init', create_function('', 'return register_widget("header_slide");')); BTW create_function() is really bad. Check the Widget API for the 5.3+ syntax – Pieter Goosen Nov 4 '14 at 4:50
  • Thanks for the reply. I was looking at an older example. Unfortunately, I still get nothing to output. No errors while debugging. – Aaron Schafer Nov 5 '14 at 1:33
0

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

  • Thanks again! Probably another trivial question, but how do you output what is entered into the widget's admin panel not just hard-coded values? e.g. the_widget( 'Header_Slide', 'headline1=$instance['headline1']&blurb1=$instance['blurb1]'); Or is this a limitation of "the_widget" and is something that a sidebar will handle? – Aaron Schafer Nov 5 '14 at 16:01
  • That is why I suggested to create a sidebar into which you can drop your widget. the_widget() is limited and non dynamic as you can see. Check the codex for register_sidebar and how it is used – Pieter Goosen Nov 5 '14 at 16:16
  • My pleasure, glad it worked out for you. Enjoy :-) – Pieter Goosen Nov 5 '14 at 16:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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