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 –>
2. 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>’,
));
}
3. 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:
eg. I changed the archive.php file at the bottom:
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.
