Customizing Sidebar Layouts

Within the framework, there are two fixed sidebar locations — the left sidebar and the right sidebar. The WordPress user can select from six sidebar layouts that vary how these two sidebars are displayed.

Manually Adjusting Which Sidebar Layout Is Used

Through user options, you actually have quite a bit of control for applying sidebar layouts throughout your website. See Sidebar Layouts in the user documentation. However, as you dive into trying to apply certain sidebar layouts to custom scenarios, you’ll want to turn to the themeblvd_sidebar_layout filter.

Example #1: Sidebar Layout for Single Custom Post Type

Maybe you’ve created a custom post type and you want all posts of that post type to have a certain sidebar layout that is different from the default site-wide option. Here’s how we’d do that using the themeblvd_sidebar_layout filter.

/**
 * If displaying a single post of the book
 * post type, use "Sidebar Left" layout.
 */
function my_sidebar_layout( $sidebar_layout ) {

    if ( is_singular('book') ) {
        $sidebar_layout = 'sidebar_left';
    }

    return $sidebar_layout;
}
add_filter('themeblvd_sidebar_layout', 'my_sidebar_layout');

Example #2: Sidebar Layout for Custom Post Type Archives

If you remember back in the tutorial about adjusting archive post displays, we adjusted all of our book post type archives and archives of associated taxonomies, author and genre, to all display posts as a post grid. Well, in addition to that, it might also make sense to adjust those archives use a full-width sidebar layout.

/**
 * Display book archives with full-width 
 * sidebar layout.
 */
function my_sidebar_layout( $sidebar_layout ) {

    if ( is_post_type_archive('book') || is_tax('author') || is_tax('genre') ) {
        $sidebar_layout = 'full_width';
    }

    return $sidebar_layout;
}
add_filter('themeblvd_sidebar_layout', 'my_sidebar_layout');

Removing Sidebar Layouts

It’s nice that the framework has six sidebar layouts for the user to choose from, and if a website accommodates it, this can be a great feature. But realistically, not all website designs are going to allow for all sidebar layouts to display nicely.

So, if you’d like to remove certain sidebar layouts from all options across the admin, possibly just to avoid confusion with your client managing their site, this is really easy to do.

For example, here’s how we’d simply remove the three sidebar layouts with double sidebars — Double Sidebar, Double Left Sidebars, and Double Right Sidebars.

/**
 * Remove sidebar layouts.
 */
function my_sidebar_layouts( $layouts ) {

	unset( $layouts['double_sidebar'] );
	unset( $layouts['double_sidebar_right'] );
	unset( $layouts['double_sidebar_left'] );

	return $layouts;
}
add_filter('themeblvd_sidebar_layouts', 'my_sidebar_layouts');

Sidebar Layout Column Widths

Our theme framework incorporates Bootstrap, and uses their 12-column grid system for displaying the sidebar layouts. In addition, the framework also adds a 10-column grid system, which can work along side of it. For a full table of all available grid classes when customizing sidebar layout column widths, see the table in the Grid Classes article.

Understanding How Grid Classes Are Used

You can customize the widths used on each sidebar layout’s columns by utilizing the themeblvd_sidebar_layouts filter. But to use this filter, you first need to understand how the array is setup that you’re filtering. In this array are smaller arrays that correspond to each sidebar layout.

So, let’s take a look at this Double Sidebar layout, as an example. From the above code, we get the following grid classes generated, by default.

• Content: col-md-6 — 1/2
• Left Sidebar: col-md-3 — 1/4
• Right Sidebar: col-md-3 — 1/4

Customizing the Grid Classes Used

To find all default sidebar layout information that you’ll be customizing, see the themeblvd_sidebar_layouts() function, found in /framework/includes/general.php of your theme.

Now, let’s change this Double Sidebar layout up a bit we looked at previously. — Maybe we want our content area to be wider and so then, as a result, we must make our two sidebars more narrow. We can use any classes from our table of grid classes, as long as they all add up to 100%.

The following will widen the main content to 2/3, and reduce the sidebars to 1/6 each, and maintain the default stacking point.

/** 
 * Adjust Double Sidebar layout 
 * column widths.
 */
function my_sidebar_layouts( $layouts, $stack ){
	
	$layouts['double_sidebar']['columns'] = array(
		'content' 	=> "col-{$stack}-8",
		'left' 		=> "col-{$stack}-2",
		'right' 	=> "col-{$stack}-2"
	);
	
	return $layouts;
}
add_filter('themeblvd_sidebar_layouts', 'my_sidebar_layouts', 10, 2);

Customizing Where Columns Stack For Responsiveness

And for those that are just wanting to change the responsive stacking point of your sidebar layout columns, you don’t need to actually filter the entire sidebar layouts array. There’s much simpler filter, themeblvd_sidebar_layout_stack, you can use to adjust this.

Simply return one of the following strings in your callback function.

• xs — Never collapse.
• sm — Collapse at 767px and below (mobile).
• md — Collapse at 991px and below (mobile and tablets).
• lg — Collapse at 1199px and below (mobile, tablets and small desktops).

By default, all sidebar layouts stack at 991px and below, using md. This means on tablets and mobile devices, the columns that make up your content and sidebars will stack on top of each other.

So, as example, here’s how you’d change the stacking to sm, meaning the columns only stack on mobile devices.

/** 
 * Stack sidebar layouts at mobile only.
 */
function my_sidebar_layout_stack() {
    return 'sm';
}
add_filter('themeblvd_sidebar_layout_stack', 'my_sidebar_layout_stack');