Home Full Width with Three Top Sidebars

I have Sage set up and I like the full width homepage. I added another base because home will be quite a bit different. It will have a header with three widgets areas explaining the product followed by portfolio thumbnails and a slider and ending in a footer with several dynamic sidebars.
How can I load three widgets on home without losing the full width display? When I allow sidebar on home in config.php:

[
        'is_404',
        //'is_front_page',
        ['is_page_template', 'template-custom.php']
      ]
    );

and use sidebar.php to load the initial sidebar

<?php
if ( !is_page('home') ) :
  dynamic_sidebar('sidebar-primary'); 
endif;
if ( is_page('home') ) :
  dynamic_sidebar('sidebar-home-top-left'); 
endif;
?>

The main content still adjusts itself to the standard sidebar. So the main content does not cover the whole width:

Should I create a new sidebar function? How? Or is there another way to fix my new base-front-page.php.

Here adjusted part of it so far:

<div class="wrap container" role="document">
      <div class="content row">
        <main class="main" role="main">
          <?php include Wrapper\template_path(); ?>
        </main><!-- /.main -->
      </div><!-- /.content -->
      <div class="content row">
        <?php if (Config\display_sidebar()) : ?>
          <aside class="sidebar" role="complementary">
            <?php include Wrapper\sidebar_path(); ?>
          </aside><!-- /.sidebar -->
        <?php endif; ?>
      </div><!-- /.content -->
    </div><!-- /.wrap -->

If you look here you’ll see we add a body class when the sidebar is being displayed.

That class adjusts the width of the page here by referencing the variables here.

So you can either adjust the function in extras to something like the following:

if (Config\display_sidebar() && is_page('home')) {
  $classes[] = 'sidebar-home-top-left';
} elseif (Config\display_sidebar()) {
  $classes[] = 'sidebar-primary';
}

Or just override the scss:

.main {
  @include make-sm-column($main-sm-columns);
  .sidebar-primary & {
    @include make-sm-column($main-sm-columns - $sidebar-sm-columns);
  }
  .home & {
    @include make-sm-column(12);
  }
}
3 Likes

Great. Thanks! I added another scss assets/styles/layouts/pages/_home.scss + @import "layouts/pages/_home"; in main.scss to load it and added the scss as suggested after I read how things were loaded. That does work. Learned something. Thanks. I have three widgets loaded now from three different sidebars. But as they are all in one

There’s nothing in-built that will help you do this. You’ll have to edit or duplicate the display_sidebar function.

We did discuss rewriting the function as a more extendible class but haven’t gotten round to it yet. A PR doing that would be very much welcomed.

I would always set the column classes in scss or less rather than in PHP. That way you can change the widths depending on what page is being loaded.

1 Like