Sage 8.5.0 - Only display sidebar on mobile if using specific custom page template

sage
1

My site currently features a custom page template that hides the sidebar and displays the page content at full-width. The sidebar features a custom navigation widget which displays the subpage navigation tree to various depths. The hidden sidebar navigation causes an issue on mobile where users are not able to access any subpages of pages that use the full-width page template as there is no navigation displayed.

I was thinking that I could add some sort of conditional to the sidebar that checks to see if my custom No Sidebar page template is being used and then includes a bootstrap hidden-md-up class on the sidebar if true.

I’m not sure if this is the best solution. And if so, where to add this conditional so that it properly hides the sidebar on desktop.

2

Can’t you just use WP’s is_page_template() to determine what to show in the sidebar?

Also are you using Sage 8’s display_sidebar() function in setup.php to determine under which conditions the sidebar displays at all?

3

I am currently using Sage 8’s dislay_sidebar() function in setup.php to determine under which conditions to display the sidebar. That is where the problem begins. I currently have the sidebar hidden when using my custom No Sidebar page template. Including the custom page template in the exceptions list results in the containers that hold the sidebar and the generated submenu not being included in the page layout. This would not be a problem except that I need to display the sidebar on the page template when viewed on mobile. This isn’t possible as currently coded because the sidebar container and submenu code won’t be generated.

I tried the following solution in base.php and was successful in displaying the sidebar on mobile only. A new issue arose in that the inclusion of the sidebar in the page layout decreases the flexbox width of the page content container to make room to display the sidebar.

    <?php if ( is_page_template('template-custom.php') ) { ?>

      <div class="wrap container-full" role="document">
        <div class="content row">
          <?php if (Setup\display_sidebar()) : ?>
            <aside class="sidebar hidden-md-up">
              <?php include Wrapper\sidebar_path(); ?>
            </aside><!-- /.sidebar -->
          <?php endif; ?>

    <?php } else { ?>

      <div class="wrap <?php echo (Setup\display_sidebar()) ? 'container' : 'container-full';?>" role="document">
        <div class="content row">
          <?php if (Setup\display_sidebar()) : ?>
            <aside class="sidebar">
              <?php include Wrapper\sidebar_path(); ?>
            </aside><!-- /.sidebar -->
          <?php endif; ?>
    
    <?php } ?>
4

For Sage 8 and Bootstrap 4 here’s how I’d do it:

The Template

In base.php get rid of the conditional and just include the sidebar all the time.

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

           ...

        </div> <!-- /.content -->
      </div> <!-- /.wrap -->

The CSS

In _global.scss probably

.sidebar {
  .template-custom & {
    @extend .d-md-none, .d-lg-none, .d-xl-none;
  }
}

Ultimately you need to include the sidebar on both templates, since you’re showing it on mobile even on the full-width one. So all you really need to change is the styling.

1 Like
5

MWDelaney, thank you for your suggestions. The CSS change you suggested was the spark that led to my solution.

The Sidebar

In setup.php I removed my custom page template from the sidebar exceptions.

function display_sidebar() {
  static $display;

  isset($display) || $display = !in_array(true, [
    // The sidebar will NOT be displayed if ANY of the following return true.
    // @link https://codex.wordpress.org/Conditional_Tags
    is_404(),
    is_front_page(),
//    is_page_template('template-custom.php'),
  ]);
  
  return apply_filters('sage/display_sidebar', $display);
}

The Template

In base.php I added the conditional for the page template check to the display_sidebar() section so a specific class is added if my custom page template is active. My class mobile-sidebar-only features the CSS that MWDelaney suggested.

<div class="wrap <?php echo (Setup\display_sidebar()) ? 'container' : 'container-full';?>" role="document">
  <div class="content row">
    <?php if (Setup\display_sidebar()) : ?>
      <?php if ( is_page_template( 'template-custom.php' ) ) { ?>
        <aside class="sidebar mobile-sidebar-only">
      <?php } else { ?>
        <aside class="sidebar">
      <?php } ?>
        <?php include Wrapper\sidebar_path(); ?>
      </aside><!-- /.sidebar -->
    <?php endif; ?>

    <main class="main">
      <?php include Wrapper\template_path(); ?>
    </main><!-- /.main -->
  </div><!-- /.content -->
</div><!-- /.wrap -->

In the event that multiple page templates need to be included in the conditional, I can change it to an array:

<?php if ( is_page_template( array( 'template-custom.php', 'template-this-one.php', 'template-that-one.php' ) ) ) { ?>

The CSS

In _grid.scss, the flexbox column widths for both the sidebar and main sections are generated using the make-col mixin. I updated the CSS to define the column widths differently at the md breakpoint if my custom page template class is active. I renamed the .template-custom class that hides the sidebar at the md breakpoint to .mobile-sidebar-only in the event that another custom page template needs to have this functionality. I wouldn’t want to create specific classes for each instance if it isn’t absolutely necessary.

.main {
  margin-top: 2.5rem;
  @include make-col-ready();
  @include media-breakpoint-up(md) {
    @include make-col($main-md-columns);
    .sidebar-primary & {
      @include make-col($main-md-columns - $sidebar-md-columns);
    }
    .sidebar-primary.page-template-template-custom & {
      @include make-col($main-md-columns);
    }
  }
}
.sidebar {
  @include make-col-ready();
  @include media-breakpoint-up(md) {
    @include make-col($sidebar-md-columns);
  }
  @include media-breakpoint-up(lg) {
    padding-right: 80px;
  }

  &.mobile-sidebar-only {
    @extend .d-md-none, .d-lg-none, .d-xl-none;
  }
}

Thank you again to both Simeon and MWDelaney for your help in creating a solution!