[DIY] How to add a second row of widgets to the Studio theme (step-by-step)

I’ve started tinkering with the Studio Theme and I wanted a second row of widgets at the bottom of the theme. Because Studio’s already been set up for a child theme (and because the code is pretty nicely modular), it was pretty straightforward to add a second row. Here are the steps:

1. In studio-child, create a new directory called ‘library’. Inside that directory, create a directory called ‘components’.

2. From studio/library/components, copy widget-section.php and place it into studio-child/library/components.

3. Edit studio-child/library/components/widget-section.php and add the following code to the end of the file (be sure to get rid of extra spaces, just in case):

<div id="lower-widget-wrapper"><!-- start #lower-widget-wrapper -->
<div id="lower-widgets"><!-- start #widgets -->
<div id="lower-content-blocks-widget">
<div class="content-block"><!-- first widget area -->
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar('widgetfour-area') ) : ?>
<?php endif; ?>
</div>
<div class="content-block"><!-- second widget area -->
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar('widgetfive-area') ) : ?>
<?php endif; ?>
</div>
<div class="content-block-end"><!-- third widget area -->
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar('widgetsix-area') ) : ?>
<?php endif; ?>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<!-- end #lower-footer-widgets -->

4. Edit studio-child/functions.php and place the following code inside the php tags (this overrides the code in the parent theme):

if ( ! function_exists( 'studio_widgets_init' ) ) :
function studio_widgets_init() {
global $themename, $shortname, $options, $options2, $options3, $bp_existed, $multi_site_on;
register_sidebar(
array(
'name' => __( 'Sidebar Blog', 'studio' ),
'id' => 'sidebar-blog',
'description' => 'Blog page Sidebar',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widgettitle">',
'after_title' => '</h3>'
)
);

register_sidebar(
array(
'name' => __( 'Sidebar Page', 'studio' ),
'id' => 'sidebar-page',
'description' => 'Page Sidebar',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widgettitle">',
'after_title' => '</h3>'
)
);

register_sidebar(
array(
'name' => __( 'Sidebar 404', 'studio' ),
'id' => 'sidebar-404',
'description' => '404 Sidebar',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widgettitle">',
'after_title' => '</h3>'
)
);

register_sidebar(
array(
'name' => __( 'Sidebar Search', 'studio' ),
'id' => 'sidebar-search',
'description' => 'Search Sidebar',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widgettitle">',
'after_title' => '</h3>'
)
);

register_sidebar(
array(
'name' => __( 'Sidebar Archive', 'studio' ),
'id' => 'sidebar-archive',
'description' => 'Archive Sidebar',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widgettitle">',
'after_title' => '</h3>'
)
);

register_sidebar(
array(
'name' => __( 'Sidebar Single', 'studio' ),
'id' => 'sidebar-single',
'description' => 'Single Sidebar',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widgettitle">',
'after_title' => '</h3>'
)
);

register_sidebar(
array(
'name' => __( 'Footer widget one', 'studio' ),
'id' => 'widgetone-area',
'description' => 'Footer widget area one',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widgettitle">',
'after_title' => '</h3>'
)
);

register_sidebar(
array(
'name' => __( 'Footer widget two', 'studio' ),
'id' => 'widgettwo-area',
'description' => 'Footer widget area two',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widgettitle">',
'after_title' => '</h3>'
)
);

register_sidebar(
array(
'name' => __( 'Footer widget three', 'studio' ),
'id' => 'widgetthree-area',
'description' => 'Footer widget area three',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widgettitle">',
'after_title' => '</h3>'
)
);

register_sidebar(
array(
'name' => __( 'Footer widget four', 'studio' ),
'id' => 'widgetfour-area',
'description' => 'Footer widget area four',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widgettitle">',
'after_title' => '</h3>'
)
);

register_sidebar(
array(
'name' => __( 'Footer widget five', 'studio' ),
'id' => 'widgetfive-area',
'description' => 'Footer widget area five',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widgettitle">',
'after_title' => '</h3>'
)
);

register_sidebar(
array(
'name' => __( 'Footer widget six', 'studio' ),
'id' => 'widgetsix-area',
'description' => 'Footer widget area six',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widgettitle">',
'after_title' => '</h3>'
)
);

if($bp_existed == 'true') {
register_sidebar(
array(
'name' => __( 'BuddyPress sidebar', 'studio' ),
'id' => 'sidebar-members',
'description' => 'BuddyPress sidebar',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widgettitle">',
'after_title' => '</h3>'
)
);
}

}
endif;

5. Edit studio-child/style.css and place the following in the file (be sure to place it outside of the comments):

#lower-widgets{width:980px;margin-left:auto;margin-right:auto;text-align:center;}
#lower-content-blocks-widget{padding:20px 0px;text-align:left;}

6. Make sure you correctly set the permissions for all new files and directories.

And that should do you. There’s now a new widget section. It’s identified with its own ‘lower-widgets-wrapper’ id, so you can, probably, separately style it. Have fun!