Sage Sidebars - The Wp Geek

In this tutorial, we will be adding a new sidebar called “sidebar-post”, and assign both the primary and new sidebar to various pages.

Register a new sidebar

We will register the new sidebar in the setup file – this is located in app/setup.php around line 80. I will add the new “Post Sidebar” to the end of this code, so it now looks like this:

add_action('widgets_init', function () {
    $config = [
        'before_widget' => '<section class="widget %1$s %2$s">',
        'after_widget' => '</section>',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    ];
    register_sidebar([
        'name' => __('Primary', 'sage'),
        'id' => 'sidebar-primary',
    ] + $config);
    register_sidebar([
        'name' => __('Footer', 'sage'),
        'id' => 'sidebar-footer',
    ] + $config);
        register_sidebar([
        'name' => __('Post Sidebar', 'sage'),
        'id' => 'sidebar-side-post',
    ] + $config);
});

Our new sidebar is now registered in our widget area, go to Appearance/widgets in your admin panel to make sure it all works correctly, you should see 3 sidebars :

By default Sage does nothing with these, it sets them up and steps away. It leaves us free to develop the theme without any defaults. Our next task is to implement these sidebars so they output to various page templates. We have lots of ways we can achieve this, We need the content to be full width when no sidebar is displayed, yet split into columns when it is displayed. In previous versions of Bootstrap, this was a pain, but in Bootstrap 5 we are able to only set one column width, and the other column will fill in space. This allows for a nice elegant solution without the need for any PHP class shinanigans.

in views/layout/app.blade.php file is changed to this:

<!doctype html>
<html {!! get_language_attributes() !!}>
  @include('partials.head')
  <body @php body_class() @endphp>
    @php do_action('get_header') @endphp
    @include('partials.header')
    <div class="wrap container" role="document">

      <div class="content">
         <div class="row">
           <div class="col">
        <main class="main">
          @yield('content')
        </main>
      </div>
        @if (App\display_sidebar())
            @include('partials.sidebar')
        @endif
      </div>
</div>
</div>
    @php do_action('get_footer') @endphp
    @include('partials.footer')
    @php wp_footer() @endphp
  </body>
</html>

We have removed the sidebar aside in the if statement, and we have added div tags for the bootstrap row and column.

in assets/views/partials/sidebar.blade.php

   <aside class="sidebar col-md-4">
@php dynamic_sidebar('sidebar-primary') @endphp
  </aside>

We add the column width to this sidebar, and we let bootstrap stack the sidebar based on screen size. You can have the sidebar displaying on small screens (≥576px) using col-sm-4, I decided to display if ≥768px using col-md-4

I also want to apply some initial styling, I will put these rules into the generic stylesheet rather than creating and importing a new one, these rules have been added to: resources/assets/styles/common/_global.scss

.widget {
  padding: 10px;
  background-color: theme-color("navtop");
  margin-bottom: 20px;
}

.widget h3 {
  border-bottom-width: 3px;
  border-bottom-style: solid;
  border-bottom-color: lightgray;
}

.line {
  border-bottom-width: 3px;
  border-bottom-style: solid;
  border-bottom-color: theme-color("primary");
  display: inline-block;
  margin: 0 0 -3px 0;
  padding: 10px 3px;
}

and lastly we need to apply a new class in the app/setup.js file, in the register sidebars section (around line 80) I have added a span in the before and after title array.

add_action('widgets_init', function () {
    $config = [
        'before_widget' => '<section class="widget %1$s %2$s">',
        'after_widget' => '</section>',
        'before_title' => '<h3><span class="line">',
        'after_title' => '</span></h3>',
    ];

Your main page should be full screen without a sidebar, and the post pages should like this

If you are following along, now is a good time to make sure everything is working as you resize your browser. Check that the sidebars collapse as the screenspace is reduced, that the hamburger menu appears and we have no display issues across browser sizes.

Create Different Sidebars

We added a new sidebar called “Post Sidebar” earlier, let’s use that on the single page. Eventually, we can have different widgets for this more relevant to the post such as “by the same author” for now, let’s put some logic in resources/views/partials/sidebar.blade.php

 @if (is_single())
 <aside class="sidebar col-md-4">
@php(dynamic_sidebar('sidebar-side-post'))
 </aside>
@else
<aside class="sidebar col-md-4">
@php(dynamic_sidebar('sidebar-primary'))
 </aside>
@endif

From your admin panel add a few widgets to the Post Sidebar. You should see the new sidebar is used in the post pages.

Next, we will take a brief interlude to make a quick plugin for a new widget to style the new posts a little better. This plugin will be used for various site code as we progress through the theme building process.

Register a new sidebar

Create Different Sidebars

Leave a Reply Cancel reply