How to Add a Sidebar to Storefront WooCommerce Theme

Storefront comes shipped with 1 sidebar. We want to add more sidebars so that we can provide relevant content based on the page content.

Here are the steps (refer back to video for clarification if needed):

  1. Copy sidebar.php from your storefront theme and place it in your child theme. Change the name of the file to sidebar-yourNewSidebar.php and alter the code on that page for your new sidebar name. My example:
<?php
/**
 * The sidebar containing the second sidebar area.
 *
 * @package storefront
 */

if ( ! is_active_sidebar( 'sidebar2' ) ) {
    return;
}
?>

<div id="secondary" class="widget-area" role="complementary">
    <?php dynamic_sidebar( 'sidebar2' ); ?>
</div><!-- #secondary -->
  1. In functions.php file of child theme, add the following code to register your sidebar (obviously change the names to what your sidebar is called):
add_action( 'widgets_init', 'register_matts_sidebars' );

function register_matts_sidebars() {
    register_sidebar(array(
        'id' => 'sidebar2',
        'name' => __( 'Sidebar 2', 'storefront' ),
        'description' => __( 'Matts Custom Sidebar.', 'storefront' ),
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h4 class="widgettitle">',
        'after_title' => '</h4>',
    ));
}
  1. Find the template files that you want to override and copy them to your child theme. Comment out (or delete) the previously registered sidebar and add your new sidebar:
// get_sidebar('sidebar2');
// do_action( 'storefront_sidebar' );

That should be it. Add sidebars and override your storefront theme template files to your heart’s content. đŸ™‚ This is also a good example of why it’s good to hire a web developer that’s versed in SEO.