Skip to content

How to Add a Sidebar to Storefront WooCommerce Child Theme

First you need to create a child theme called storefront-child if you don’t have one. Refer to https://codex.wordpress.org/Child_Themes

For storefront-child you don’t need to enqueue child theme stylesheet – it is done by the parent theme class-storefront.php

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.

<?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 (change the names to what your sidebar is called):

add_action( 'widgets_init', 'register_new_sidebars' );

function register_new_sidebars() {

  register_sidebar(array(
    'id' => 'sidebar2',
    'name' => __( 'Sidebar 2', 'storefront' ),
    'description' => __( 'Sidebar 2.', '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 and add your new sidebar:

get_sidebar('sidebar2');

——

More info – https://www.youtube.com/watch?v=7p2DCPkleZI

Published inCodingWordpress

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

*