WordPress function breaks widget's markup?

Question

Here's a standard function creating widget, it displays Widget's title and echoes "test" below it:

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

        echo $before_widget;

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

             echo 'test';

        echo $after_widget;
    }

It creates perfect output:

<li id="widgets-id" class="widget widgets-class">
   <h2 class="widgettitle">Title</h2>
   test
</li>

But when I replace echo 'test'; with wp_list_pages(); things start to look nasty because widget's body is being displayed after the tag that closes the widget:

  <li id="widgets-id" class="widget widgets-class">
       <h2 class="widgettitle">Title</h2>
       <!-- Hey, I wanted this data to be put here! -->
   </li>
   <li class="page_item page-item-number">
     <a href="#">Paage title</a>
   <li>
   (...)

Any ideas how to fix it? I've been trying with multiple wp_list_pages() arguments, but nothing seems to help.

Answer 1

wp_list_pages does not wrap it's output in a ul or ol tag. That's up to you.

In other words, if you just call wp_list_pages, it's going to spit out a bunch of li tags, which your browser assumes is wrong and "corrects" the html as it sees fit. Try this:

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

    echo $before_widget;

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

    echo '<ul>';
    wp_list_pages();
    echo '</ul>';

    echo $after_widget;
}