Dynamic Sidebar and XHTML Validity?

Question

My question is concerning dynamic sidebars and wrapping the dynamic sidebar code in the <ul> tag.

When I have widgets/dynamic sidebar enabled do not add widgets to the sidebar, and do not wrap the dynamic sidebar php code in the <ul> tag my theme it is XHTML valid. But when I add a widget it is invalid and requires the <ul> tag to make it valid! How do I make it valid in all circumstances?

<?php if ( !function_exists('dynamic_sidebar')
        || !dynamic_sidebar() ) : ?>
<?php endif; ?>

Answer 1

I've had similar issues in the past with custom sidebars. It was caused by the improper use of the <ul> and <li> tags. I was adding them in the sidebar.php file and not inside the function. Now I use this code and with 6 active widgets I have no errors. Take a look at the code and let me know if you have any questions:

functions.php

<?php
  // REGISTER THE SIDBARS
  if (!function_exists( 'ideatree_widgets_init' )) {
   function ideatree_widgets_init() {
    register_sidebar(array(
      'name' => __( 'Primary Widget Area', 'ideatree' ), 
      'id' => 'primary-widget-area', 
      'description' => 'The primary widget area', 'ideatree', 
      'before_widget' => '<ul><li id="%1$s" class="widget-container %2$s">', 
      'after_widget' => '</li></ul>', 
      'before_title' => '<h3 class="widgettitle">', 
      'after_title' => '</h3>',)
      );
    register_sidebar(array(
      'name' => 'Secondary Widget Area', 'ideatree', 
      'id' => 'secondary-widget-area', 
      'description' => 'The secondary widget area', 'ideatree', 
      'before_widget' => '<ul><li id="%1$s" class="widget-container %2$s">', 
      'after_widget' => '</li></ul>', 
      'before_title' => '<h3 class="widgettitle">', 
      'after_title' => '</h3>',)
      );

      }
    add_action('widgets_init', 'ideatree_widgets_init');
    }
  ?>

sidebar.php

<div class="wrapper sidebar">
  <div id="upper-sidebar">
    <?php if ( ! dynamic_sidebar( 'primary-widget-area' ) ) : ?>
    <?php endif; ?>
  </div><!-- END UPPER-SIDEBAR -->
  <div id="lower-sidebar">
    <?php if ( ! dynamic_sidebar( 'secondary-widget-area' ) ) : ?>
    <?php endif; ?>
  </div><!-- END LOWER-SIDEBAR -->
</div><!-- END SIDEBAR -->