How to create my own sidebar in Twenty Eleven child theme?

Question

When I go to configure widgets in Twenty Eleven theme, there are 5 "sidebars" available:

• Main sidebar
• Showcase sidebar
• 1st col of footer
• 2nd col of footer
• 3rd col of footer

In a child theme, I'd like to support sidebar on posts which is quite easy using these instructions but at the same time, main sidebar on the homepage should be different from the sidebar on the single pages.

Can I create a new "sidebar area" so that widgets can be dragged and dropped to it in the admin section? Or should I maybe use something like the 3rd column of a footer area (which I don't use in my blog) to support this? Would I them replace get_sidebar() with something different in the modified single.php file?

Answer 1

I think I understand what looking for. I've put together some code I've taken from parts of my themes to give you an example.

For the functions.php:

<?php
add_action( 'after_setup_theme', 'ideatree_init' );
if ( ! function_exists( 'ideatree_init' ) ):
function ideatree_init() {
// REGISTER THE NAV MENUS (3 in this case)
add_action( 'init', 'register_my_menus' );
function register_my_menus() {
register_nav_menus(
    array(
        'main' => 'main' ,
        'secondary' => 'secondary',
        'tertiary' => 'tertiary'
        )
    );
}
// REGISTER THE SIDBARS
if ( !function_exists('ideatree_widgets_init') ) {
function ideatree_widgets_init() {
    register_sidebar( array(
        'name' => __( 'main-widget', 'ideatree'),
        'id' => 'main-widget',
        'description' => 'The Main widget', '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' => 'showcase-widget', 'ideatree',
        'id' => 'showcase-widget',
        'description' => 'The showcase-widget', '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' => 'First Footer Widget', 'ideatree',
        'id' => 'first-footer-widget',
        'description' => 'The first footer widget', 'ideatree' ,
        'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<h3 class="widgettitle">',
        'after_title' => '</h3>',
    ) );
    register_sidebar( array(
        'name' => 'Second Footer Widget', 'ideatree',
        'id' => 'second-footer-widget',
        'description' => 'The second footer widget', 'ideatree',
        'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<span class="widgettitle">',
        'after_title' => '</span>',
    ) );
    register_sidebar( array(
        'name' => 'Third Footer Widget', 'ideatree',
        'id' => 'third-footer-widget',
        'description' => 'The third footer widget', 'ideatree',
        'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<h3 class="widgettitle">',
        'after_title' => '</h3>',
    ) );
}
add_action( 'widgets_init', 'ideatree_widgets_init' );
}
//===============\\ VARIOUS WP THEME SUPPORTS //===================
    if ( ! isset( $content_width ) ) $content_width = 600;
      add_theme_support( 'post-thumbnails' );
      add_image_size( 'bigmutha',580, 180, true ); //Can be used for Portfolio etc...
      add_theme_support('automatic-feed-links');
  }
endif;
?> 

For the sidebar.php:

<div id="sidebar">

  <?php /** Home Page Sidebar */
    if ( is_page('Home') ) { 
    ?>  
      <div id="main-sidebar">
        <?php if ( ! dynamic_sidebar( 'main-widget' ) ) : 
          endif; ?>
      </div>

  <?php /** showcase page sidebar */ }
    if ( is_page('showcase') ) { 
    ?>
    <div id="showcase-sidebar">
        <?php if ( ! dynamic_sidebar( 'showcase-widget' ) ) : 
          endif; ?>
    </div>
  <?php } ?>

</div>

The footer.php file:

<div id="footer">
  <div class="left-footer">
    <?php if ( function_exists ( dynamic_sidebar(3) ) ) : ?>
        <?php dynamic_sidebar (3); ?>
    <?php endif; ?>
  </div>
  <div class="middle-footer">
    <?php if ( function_exists ( dynamic_sidebar(4) ) ) : ?>
        <?php dynamic_sidebar (4); ?>
    <?php endif; ?>
  </div>
  <div class="right-footer">
    <?php if ( function_exists ( dynamic_sidebar(5) ) ) : ?>
        <?php dynamic_sidebar (5); ?>
    <?php endif; ?>
  </div>
</div><!-- End Footer -->
<?php wp_footer(); ?>
</body>
</html>

You should try this out on a testing server first. As I mentioned, this is plucked from two different themes and hasn't been tested together. It should work for you though. Let me know if you have any questions.