{"id":1627,"date":"2017-08-18T22:07:09","date_gmt":"2017-08-18T20:07:09","guid":{"rendered":"http:\/\/www.kavdesign.net\/blog\/?p=1627"},"modified":"2017-08-18T22:16:04","modified_gmt":"2017-08-18T20:16:04","slug":"how-to-add-a-sidebar-to-storefront-woocommerce-child-theme","status":"publish","type":"post","link":"https:\/\/www.kavdesign.net\/blog\/coding\/how-to-add-a-sidebar-to-storefront-woocommerce-child-theme\/","title":{"rendered":"How to Add a Sidebar to Storefront WooCommerce Child Theme"},"content":{"rendered":"

First you need to create a child theme called storefront-child<\/em>\u00a0if you don’t have one. Refer to\u00a0https:\/\/codex.wordpress.org\/Child_Themes<\/p>\n

For storefront-child<\/em> you don’t need to enqueue child theme stylesheet – it is done by the parent theme class-storefront.php<\/p>\n

<\/p>\n

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.<\/p>\n

<?php<\/code>
\n \/**<\/code>
\n * The sidebar containing the second sidebar area.<\/code>
\n *<\/code>
\n * @package storefront<\/code>
\n *\/<\/code><\/p>\n

if ( ! is_active_sidebar( 'sidebar2' ) ) {<\/code>
\n\u00a0 \u00a0 return;<\/code>
\n }<\/code>
\n ?><\/code><\/p>\n

<div id=\"secondary\" class=\"widget-area\" role=\"complementary\"><\/code>
\n\u00a0 \u00a0 <?php dynamic_sidebar( 'sidebar2' ); ?><\/code>
\n <\/div><!--\u00a0#secondary\u00a0--><\/code><\/p>\n

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):<\/p>\n

add_action( 'widgets_init', 'register_new_sidebars' );<\/code><\/p>\n

function register_new_sidebars() {<\/code><\/p>\n

\u00a0 register_sidebar(array(<\/code>
\n\u00a0 \u00a0 'id' => 'sidebar2',<\/code>
\n\u00a0 \u00a0 'name' => __( 'Sidebar 2', 'storefront' ),<\/code>
\n\u00a0 \u00a0 'description' => __( 'Sidebar 2.', 'storefront' ),<\/code>
\n\u00a0 \u00a0 'before_widget' => '<div id=\"%1$s\" class=\"widget %2$s\">',<\/code>
\n\u00a0 \u00a0 'after_widget' => '<\/div>',<\/code>
\n\u00a0 \u00a0 'before_title' => '<h4 class=\"widgettitle\">',<\/code>
\n\u00a0 \u00a0 'after_title' => '<\/h4>',<\/code>
\n\u00a0 ));<\/code>
\n }<\/code><\/p>\n

3. Find the template files that you want to override and copy them to your child theme and add your new sidebar:<\/p>\n

get_sidebar('sidebar2');<\/code><\/p>\n

——<\/p>\n

More info –\u00a0https:\/\/www.youtube.com\/watch?v=7p2DCPkleZI<\/p>\n","protected":false},"excerpt":{"rendered":"

First you need to create a child theme called storefront-child\u00a0if you don’t have one. Refer to\u00a0https:\/\/codex.wordpress.org\/Child_Themes For storefront-child you don’t need to enqueue child theme<\/p>\n

Continue readingHow to Add a Sidebar to Storefront WooCommerce Child Theme<\/span><\/a><\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[9,82],"tags":[209,433],"class_list":["post-1627","post","type-post","status-publish","format-standard","hentry","category-coding","category-wordpress","tag-sidebar","tag-woocommerce","entry"],"_links":{"self":[{"href":"https:\/\/www.kavdesign.net\/blog\/wp-json\/wp\/v2\/posts\/1627","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kavdesign.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kavdesign.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kavdesign.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kavdesign.net\/blog\/wp-json\/wp\/v2\/comments?post=1627"}],"version-history":[{"count":4,"href":"https:\/\/www.kavdesign.net\/blog\/wp-json\/wp\/v2\/posts\/1627\/revisions"}],"predecessor-version":[{"id":1631,"href":"https:\/\/www.kavdesign.net\/blog\/wp-json\/wp\/v2\/posts\/1627\/revisions\/1631"}],"wp:attachment":[{"href":"https:\/\/www.kavdesign.net\/blog\/wp-json\/wp\/v2\/media?parent=1627"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kavdesign.net\/blog\/wp-json\/wp\/v2\/categories?post=1627"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kavdesign.net\/blog\/wp-json\/wp\/v2\/tags?post=1627"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}