I'm trying to follow the instructions in this "How to show different sidebars for posts and pages in WordPress" tutorial to use different sidebars for different types of pages. In particular, I'm using a child theme for the Woocommerce Storefront theme, and I want to use their regular sidebar for all shop pages that have products (the default template), and I want to use my own sidebar (showing blog categories instead of product categories) for a "News" page that has my blog posts. I figured using the "Template-driven approach" in the tutorial would be my best option, but I'm definitely open to other ways.
I registered my sidebar (as 'blog-sidebar'), configured its widgets, and created a blog-page.php with Template Name: News & Events, and edited my page to use that template. At the end of my custom template, just before the footer, I included get_sidebar('blog-sidebar');
Then I copied sidebar.php into my child theme folder and started by replacing 'sidebar-1' with 'blog-sidebar' like this:
if ( ! is_active_sidebar( 'blog-sidebar' ) ) {
return;
}
?>
<div id="secondary" class="widget-area" role="complementary">
<?php dynamic_sidebar( 'blog-sidebar' ); ?>
</div><!-- #secondary -->
This makes my custom sidebar show up correctly, but of course it's also replacing the Woocommerce sidebar on the shop pages (which I'm guessing is 'sidebar-1'). So I tried this, adapting the instructions in the tutorial:
if ( (is_page_template('blog-page.php') ) && ( is_active_sidebar( 'blog-sidebar' ))) {
?>
<div id="secondary" class="widget-area" role="complementary">
<?php dynamic_sidebar( 'blog-sidebar' ); ?>
</div><!-- #secondary -->
<?php
}
elseif ( is_active_sidebar( 'sidebar-1' )) {
?>
<div id="secondary" class="widget-area" role="complementary">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</div><!-- #secondary -->
<?php
}
That just shows the default shop sidebar on every page though, so I guess my is_page_template('blog-page.php')
isn't working. I've researched this for hours and found that it doesn't work in the loop, but I couldn't find a solution that applied to what I'm trying to do (or maybe I just didn't know how to apply it correctly - still learning!). I would really, really appreciate it if you could help me figure this out!
EDIT: To register my custom sidebar, I added this at the end of the functions.php in my child theme:
function sf_child_theme_widgets_init() {
register_sidebar(
array(
'name' => __( 'Blog Sidebar', 'sf_child_theme' ),
'id' => 'blog-sidebar',
'description' => __( 'Widgets in the blog sidebar', 'sf_child_theme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
)
);
}
add_action( 'widgets_init', 'sf_child_theme_widgets_init' );
The default sidebar comes from the parent theme.
EDIT 2:
Here is the full code of blog-page.php. I just copied the code from the parent's page.php and changed the sidebar call from do_action( 'storefront_sidebar' );
to get_sidebar('blog-sidebar');
<?php
/**
* Template Name: News & Events
*
* The template for displaying blog pages.
*
*
* @package storefront-child
*/
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
while ( have_posts() ) :
the_post();
do_action( 'storefront_page_before' );
get_template_part( 'content', 'page' );
/**
* Functions hooked in to storefront_page_after action
*
* @hooked storefront_display_comments - 10
*/
do_action( 'storefront_page_after' );
endwhile; // End of the loop.
?>
</main><!-- #main -->
</div><!-- #primary -->
<?php
get_sidebar('blog-sidebar');
get_footer();
?>