The Underscores (_s) theme with Sass and Gulp Part 7: creating sidebars and conditional layouts

Untitled Document

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

On this page:

  1. Planning an unusual layout.
  2. Detect when the sidebar has widgets.
  3. Build the structure for displaying the sidebar.
  4. Use Flexbox to create a responsive layout.
  5. Customize the single post template for a no-sidebar layout.
  6. Use Flexbox to create a no-sidebar responsive layout.

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

36. Planning an unusual layout

Github repo branch: part7_36

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

37. Detect when the sidebar has widgets.

Github repo branch: part7_37

To create these sidebar dependent layouts, I first need to figure out a way of quickly testing whether or not a sidebar is currently active. If I got to any of my posts right now and scroll down, you'll see there is a sidebar (if you set it up in the Wordpress admin in the appearance => widgets section). It's currently displaying on the bottom of the page. The good news is we can ask WordPress whether or not a specific sidebar or widgetized area currently has widgets in it or not. That's done using a function called is_active_sidebar(). Using that function, I want to be able to control my CSS so I can provide one set of styles if we have a sidebar, and another set of styles if we don't.

To do that, I want to add an additional class to the body element when we are on single posts. Now if we go and inspect the code for the page, you'll see the body element has a ton of classes applied already. Post template defaults, single, single post, post ID, single format standard, da da da, and there's a lot a lot of different information here in the post body class. Knowing this, what I can do is create a filter that hooks into the body class and then either add a class called has sidebar, if the sidebar is currently active, or adds the class, no sidebar if we don't have a sidebar.

That way I can wrap styles in either has sidebar, or no sidebar and provide different layouts for different scenarios. In underscores, we already have a function that hooks into the body filter. You find that function in the inc/template-functions.php folder. It's called 'pre_underscores_body_classes()'. and it grabs the classes object, then adds something to it, or augments it in some way and then passes the classes object back. This function is part of a call back to the body class filter, and that's how it's applied to the front end of our site.

Here I want to add a new rule. And the rule follows the exact same format as the two rules previously. I'll start with the conditional statement. If is active sidebar, this function takes the ID of a sidebar and right now we only have one. The ID for that one is sidebar-1, and this function will return true anytime there are widgets in the sidebar, meaning the sidebar's being displayed. When that sidebar is displayed, I'll grab the classes array and add has sidebar to that array. In the opposite event, so else, I'll take the same classes array and add the class, no sidebar. So add the following code the pre_underscores_body_classes( $classes ) function

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

Save template-tags.php, and go back in the browser, and you'll see now my body has a new class: has-sidebar, meaning we currently have a sidebar on the page. That means I can now start writing styles that only apply to this page, now that the sidebar is active.

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

38. Build the structure for displaying the sidebar.

Github repo branch: part7_38

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

39. Use Flexbox to create a responsive layout.

Github repo branch: part7_39

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

40. Customize the single post template for a no-sidebar layout.

Github repo branch: part7_40

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

41. Use Flexbox to create a no-sidebar responsive layout

Github repo branch: part7_41

Leave a comment