The Underscores (_s) theme with Sass and Gulp Part 12: the page template

==================================================================

On this page:

  1. Get to know the page template.
  2. Create a page layout with a custom left-aligned sidebar.

==================================================================

69. Get to know the page template.

Github repo branch: part12_69

==================================================================

70. Create a page layout with a custom left-aligned sidebar.

Github repo branch: part12_70

  1. First, I register a new sidebar. And I do that down in functions.php.
  2. Next, I took the file called sidebar.php and copied it to make a new file, sidebar-page.php.
  3. Change page.php.
  4. Change content-page.php.
  5. Make a change in inc/template-functions.php
  6. Changed sass/layout/_global.scss

69.1 Register a new sidebar in functions.php.

register_sidebar( array(
'name'          => esc_html__( 'Page Sidebar', 'pre_underscores' ),
'id'            => 'sidebar-2',
'description'   => esc_html__( 'Add page sidebar widgets here.', 'pre_underscores' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget'  => '</section>',
'before_title'  => '<h2 class="widget-title">',
'after_title'   => '</h2>',
) );

69.2 Copy the fike called sidebar.php and paste it in a new file, sidebar-page.php.

I've made some very small changes. I'm pointing at sidebar-2 instead of sidebar-1, both up in the test to make sure we have content, and down here where we display the dynamic sidebar. Then I change the ID for aside to page-secondary, so we will never have an issue with two sidebars with the same ID, and I also added an additional class here, page-sidebar, just in case I ever want to target it specifically with some CSS.

<?php
  /**
  * The page sidebar containing the main widget area.
  *
  * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
  *
  * @package pre_underscores
  */
if ( ! is_active_sidebar( 'sidebar-2' ) ) {
  return;
  }
  ?>
<aside id="page-secondary" class="widget-area page-sidebar" role="complementary">
  <?php dynamic_sidebar( 'sidebar-2' ); ?>
  </aside><!-- #secondary -->
  

69.3 Change page.php.

In page.php, the only thing I've done is remove the reference to the regular sidebar because on this page I only want to display the new sidebar, not the old one.

<?php
  /**
  * The template for displaying all pages.
  *
  * This is the template that displays all pages by default.
  * Please note that this is the WordPress construct of pages
  * and that other 'pages' on your WordPress site may use a
  * different template.
  *
  * @link https://codex.wordpress.org/Template_Hierarchy
  *
  * @package Pre Underscores
  */
get_header(); ?>
 <div id="primary" class="content-area">
  <main id="main" class="site-main" role="main">
 <?php
  while ( have_posts() ) : the_post();
 get_template_part( 'template-parts/content', 'page' );
 endwhile; // End of the loop.
  ?>
 </main><!-- #main -->
  </div><!-- #primary -->
<?php
  get_footer();
  

69.4 Change content-page.php.

Then on content-page.php, all the way down here at the bottom before the comments, I call in sidebar-page.php. I've also made two other changes to content-page.php. Off the top here, I've added in the code for the_post_thumbnail. This is the featured image code that you'll find in content-single.php, exactly the same, works exactly the same way.

And the only other thing I've done is append the post-content class to the <div> that wraps around the content. If you think back to when we created the layout for the single post, we used post-content to float content to the left, and then we used the sidebar widget area class to float content to the right. And here we'll do the exact same thing using the same CSS. Now that the sidebar is being displayed in the page template, I can go to my browser. Here I'll navigate to my development environment outside of Browsersync so I can gain access to the Customizer

<?php
  /**
  * Template part for displaying posts.
  *
  * @link https://codex.wordpress.org/Template_Hierarchy
  *
  * @package pre_underscores
  */
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <header class="entry-header">
  <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
  </header><!-- .entry-header -->
  
  <?php
  if ( has_post_thumbnail() ) { ?>
  <figure class="featured-image full-bleed">
  <?php
  the_post_thumbnail('pre_underscores-full-bleed');
  ?>
  </figure><!-- .featured-image full-bleed -->
  <?php } ?>
 
  <div class="entry-content post-content">
  <?php
  the_content();
 wp_link_pages( array(
  'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'pre_underscores' ),
  'after'  => '</div>',
  ) );
  ?>
  </div><!-- .entry-content .post-content -->
  
  <?php
  get_sidebar( 'page' );
  ?>
  
  <?php
  // If comments are open or we have at least one comment, load up the comment template.
  if ( comments_open() || get_comments_number() ) :
  comments_template();
  endif;
  ?>
  </article><!-- #post-## -->
  

69.5 Make a change in inc/template-functions.php

In templatepfunctions.php I added the following code:


// Add a class telling us if the page sidebar is in use.
if ( is_active_sidebar( 'sidebar-2' ) ) {
$classes[] = 'has-page-sidebar';
}

69.6 Changed sass/layout/_global.scss

I made a few changes in sass/layout/_global.scss

  • Then, in global.scss, I co-opt the original styling that we used for the single post, and apply it to Pages as well. Scrolling down here, you see I've changed the markup a tiny little bit. It used to say .single, and then inside .single we had has-sidebar nested. I've changed that to target .single.has-sidebar, and also .page. Inside of .page, I grab the .hentry, which is the article. Inside the article we have three elements: the entry-header, the post-content, and the widget-area. You'll remember inside content-page.php, I have entry-header at the top. Then I added the class post-content to the div that wraps around the content, and then we have the widget area down here and get_sidebar because sidebar-page has the exact same markup as regular sidebar, and inside the layout, I set .hentry to flex, then set entry header to full width, post content to the large ratio, and widget area to the small ratio.
  • In the .page class I added flex-direction: row-reverse; That will automatically flip the order of the two elements, so that the sidebar settles on the left. It'll still be laid out in the same way, you'll just have the last item first and the first item last.
  • To finalize the page layout, I've created an additional rule that targets when we not have the class .has-page-sidebar, and here I justify the contents inside hentry to flex-end. The result of that is when we don't have a sidebar, the content stays on the right-hand side and we just get a big empty space on the left-hand side. That's a design choice, and you can disagree with that layout and change it if you want to. I want it to do this to show you how you can use the same layout for multiple different purposes.
.site-content {
  padding: 1em;
 @media screen and (min-width: $query__small) {
  padding: 2em;
  }
  }

.site-content {
  max-width: $size__max-width;
  margin: 0 auto;
  }
/* Single posts */
  @media screen and (min-width: $query__medium) {
  .single.has-sidebar,
  .page {
 .hentry {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
 .entry-header {
  width: 100%;
  flex: 1 0 100%;
  }
 .post-content {
  width: $size__ratio-large;
  }
 .widget-area {
  width: $size__ratio-small;
  }
  }
 }
 .page {
  &.has-page-sidebar {
  .hentry {
  flex-direction: row-reverse;
  }
  }
  &:not(.has-page-sidebar) {
  .hentry {
  justify-content: flex-end;
  }
  }
  }
  }

@media screen and (min-width: $query__medium) {
  .single {
  &.no-sidebar {
 .post-content__wrap {
  display: flex;
  justify-content: space-between;
 .entry-meta {
  width: 20%;
  }
 .post-content__body {
  width: 70%;
  }
  }
 }
  }
  }
  

==================================================================

Leave a comment