How do you force a sidebar widget to have a container div around all child widgets?

My theme creates several widget areas for the end user. However, I’ve got a slight problem in that, if multiple widgets are dropped onto any sidebar container, the resulting code in “view source” is not wrapped in a single container div.

For example, here’s what it looks like

Read More

Start of a single widget container:

<div class="name-of-my-widget">
    <h4>Widget title</h4>
    <div class="textwidget">
        contents of widget 1
    </div>
</div>

<div class="name-of-my-widget">
    <h4>Widget title</h4>
    <div class="textwidget">
        contents of widget 2
    </div>
</div>

What do I need to do to the way I’m creating this widget so that a single wrapper div encloses all of the widgets added to the container?

if ( function_exists('register_sidebar') )
register_sidebar(array(
    'name' => 'Inside Header Area',
    'id' => 'inside-header-widget',
    'before_widget' => '<div class="test-sidebar  %2$s">',
    'after_widget' => '</div>', 
    'before_title' => '<h4>',
    'after_title' => '</h4>',
));

Related posts

Leave a Reply

1 comment

  1. Sidebar functionality doesn’t handle wrapping container, you need to add that on template level. Here is example markup of sidebar-primary.php template (taken from Hybrid theme and simplified a bit):

    if ( is_active_sidebar( 'primary' ) ) : ?>
    
        <div id="primary" class="sidebar aside">
    
            <?php dynamic_sidebar( 'primary' ); ?>
    
        </div><!-- #primary .aside -->
    
    <?php endif; ?>
    

    Also I highly recommend Justin’s Sidebars in WordPress tutorial.