0

I have registered a Widget area with the following code:

// Register Sidebars
function custom_sidebars() {

    $args = array(
        'id'            => 'footer_sidebar',
        'class'         => 'footer_sidebar',
        'name'          => __( 'Footer 3 foto ruimte', 'text_domain' ),
        'description'   => __( 'Widget ruimte voor 3 1 foto plaatje widgets', 'text_domain' ),
        'before_widget' => '<div class="col-lg-4 col-md-4 col-sm-12 singleWidgetBlock">',
        'after_widget' => '</div>'
    );
    register_sidebar( $args );

}
add_action( 'widgets_init', 'custom_sidebars' );

The before_widget and after_widget is working as expected with all widgets but one. With one widget the wrapping div doesn't show up at all.

I can't find anything in the widget code itself that would prevent this.

Has anyone else run into this problem? Or does anyone know of something that would override the before_widget and after_widget code in a widgetized area? My Google Fu is seriously lacking this time.

For completeness also the code of the widget itself below.

/**
 * Register the Widget
 */
add_action( 'widgets_init', create_function( '', 'register_widget("fcc_single_image_widget");' ) );

class fcc_single_image_widget extends WP_Widget
{
    /**
     * Constructor
     **/
    public function __construct()
    {
        $widget_ops = array(
            'classname' => 'fcc_single_image_widget',
            'description' => 'Widget that uses the built in Media library.'
        );

        parent::__construct( 'fcc_single_image_widget', 'FCC Single Image Widget', $widget_ops );

        add_action('admin_enqueue_scripts', array($this, 'upload_scripts'));
    }

    /**
     * Upload the Javascripts for the media uploader
     */
    public function upload_scripts()
    {
        wp_enqueue_script('media-upload');
        wp_enqueue_script('thickbox');
        wp_enqueue_script('single_image_widget', plugin_dir_url(__FILE__) . 'upload-media.js', array('jquery'));

        wp_enqueue_style('thickbox');
    }

    /**
     * Outputs the HTML for this widget.
     *
     * @param array  An array of standard parameters for widgets in this theme
     * @param array  An array of settings for this widget instance
     * @return void Echoes it's output
     **/
    public function widget( $args, $instance )
    {
        // Add any html to output the image in the $instance array

        ?>
        <h6 class="widget-title"><?php echo $instance['title']?></h6>
        <img class="img-responsive" id="sidewidgetTopImage" src="<?php echo $instance['image']; ?>">
        <?php
    }

    /**
     * Deals with the settings when they are saved by the admin. Here is
     * where any validation should be dealt with.
     *
     * @param array  An array of new settings as submitted by the admin
     * @param array  An array of the previous settings
     * @return array The validated and (if necessary) amended settings
     **/
    public function update( $new_instance, $old_instance ) {

        // update logic goes here
        $updated_instance = $new_instance;
        return $updated_instance;
    }

    /**
     * Displays the form for this widget on the Widgets page of the WP Admin area.
     *
     * @param array  An array of the current settings for this widget
     * @return void
     **/
    public function form( $instance )
    {
        $title = __('Widget Image');
        if(isset($instance['title']))
        {
            $title = $instance['title'];
        }

        $image = '';
        if(isset($instance['image']))
        {
            $image = $instance['image'];
        }
        ?>
        <p>
            <label for="<?php echo $this->get_field_name( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
            <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
        </p>

        <p>
            <label for="<?php echo $this->get_field_name( 'image' ); ?>"><?php _e( 'Image:' ); ?></label>
            <input name="<?php echo $this->get_field_name( 'image' ); ?>" id="<?php echo $this->get_field_id( 'image' ); ?>" class="widefat" type="text" size="36"  value="<?php echo esc_url( $image ); ?>" />
            <input class="upload_image_button" type="button" value="Upload Image" />
        </p>
        <?php
    }
}
?>
5
  • Is it just the wrapping div that doesn't show or the whole widget content?
    – cjbj
    May 12, 2016 at 13:48
  • Just the wrapper div. The widget itself shows fine. Weird thing is, if I put in any other widget thee wrapper div does show as intended. May 12, 2016 at 13:55
  • You're not echoing the wrapping divs. The register_sidebar only defines the div, but doesn't render it. You need to extract the texts and echo them.
    – cjbj
    May 12, 2016 at 14:29
  • Yes that was it! I was barking up the wrong tree. Instead of looking for reasons it didn't display for this widget I should have been looking for reasons why it would display for this widget. Thanks! For after me who run into the same problem I wrapped the content of the widget function in echo $args['before_widget']; and echo $args['after_widget']; May 12, 2016 at 14:43
  • Glad that helped. Could you accept the answer please? So your question doesn't show up later as still needing attention.
    – cjbj
    May 12, 2016 at 16:38

1 Answer 1

1

You're not echoing the wrapping divs. The register_sidebar only defines the div, but doesn't render it. You need to extract the texts and echo them, like this:

public function widget( $args, $instance ) {    

    extract( $args );

    $title         = apply_filters( 'widget_title', $instance['title'] );

    echo $before_widget;

    if ( $title ) {
        echo $before_title . $title . $after_title;
    }

    ... do widgetty things ...

    echo $after_widget;

}

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.