Tutorial: How to Add a Double Sidebar Layout

By default the Total theme doesn’t include a double sidebars layout because it can create conflicts with built-in layout and site width settings. If the theme had the double sidebars layout it would take away from other functionalities the theme currently offers. That said, Total has a lot of great built-in functions that will allow you to add the double sidebars functionality if wanted!

Step 1 – Remove customizer site width settings

All the site width settings settings for the content and sidebar are intended to be used with a singular sidebar. So it’s best to remove these to prevent any confusion to the end user, we’ll do this by hooking into the ‘wpex_customizer_sections’ filter to remove any settings we don’t want.

add_filter( 'wpex_customizer_sections', function( $sections ) {
	
	// Array of sections to remove from the Customizer layout tab
	$remove_sections = array( 'wpex_layout_desktop_widths', 'wpex_layout_medium_widths', 'wpex_layout_tablet_widths', 'wpex_layout_phone_widths' );

	// Loop through and remove sections
	foreach( $remove_sections as $section ) {
		unset( $sections[$section] );
	}

	// Return sections
	return $sections;

} );

Step 2 - Add new layout option

Now we want to hook into the 'wpex_get_post_layouts' filter (available only in Total 4.2.2) to add our new layout option. If you are using an older version go to Total/framework/arrays.php and edit the wpex_get_post_layouts function to include the filter like this (this article was written prior to the addition of the filter).

add_filter( 'wpex_get_post_layouts', function( $layouts ) {
	$layouts['double-sidebar'] = __( 'Double Sidebar', 'total' );
	return $layouts;
} );

You should now have the double sidebar layout as an option to choose from in the Customizer and also in the page settings, example:

Step 3 - Register new widget area to use for the second sidebar

Now you want to register a new widget area to use for the secondary sidebar. Total has a built-in filter you can use to add your new widget areas instead of using 'register_sidebar'.

add_action( 'wpex_register_sidebars_array', function( $sidebars ) {
	$sidebars['sidebar_secondary'] = __( 'Secondary Sidebar', 'total' );
	return $sidebars;
} );

You should now have a new widget area "Secondary Sidebar:

Step 4 - Display secondary sidebar

Now you can add widgets to your new Secondary Sidebar but it won't display anywhere so you need to use theme hooks to insert your sidebar to your pages whenever the current page is set to the "double-sidebar" layout.

add_action( 'wpex_hook_primary_after', function() {
	$current_layout = wpex_content_area_layout();
	if ( 'double-sidebar' == $current_layout && is_active_sidebar( 'sidebar_secondary' )  ) {
		echo '<div id="secondary-sidebar" class="wpex-clr">';
			dynamic_sidebar( 'sidebar_secondary' );
		echo '</div>';
	}
}, 20 );

Step 5 - Move default sidebar so it loads before your content

If you want your double sidebar layout to have a sidebar on the left, your content in the middle and a sidebar on the right you will want to move the default sidebar HTML so it loads before your page/post content. This will also make it so on mobile the left sidebar displays above the content.

add_action( 'init', function() {
	remove_action( 'wpex_hook_primary_after', 'wpex_get_sidebar_template' );
	add_action( 'wpex_hook_primary_before', 'wpex_get_sidebar_template' );
} );

Step 6 - Enable the default sidebar for your new double-sidebar layout

In Total the main sidebar will not display unless you are using the left or right sidebar and since you added a new one named double-sidebar the main sidebar will not display unless you tell it to which you can do easily with this code:

add_filter( 'wpex_has_sidebar', function( $bool ) {
	if ( 'double-sidebar' == wpex_content_area_layout() ) {
		$bool = true;
	}
	return $bool;
} );

Of course if you prefer you could just go back to step 3 and register 2 sidebar areas instead of 1 to be used exclusively for your double sidebar pages.

Step 7 - Add Custom CSS for your Double Sidebar Layout

Now you have everything in place the only thing left is adding CSS for your layout. Below is an example of what you could use, simply modify the percentages to what fits your needs:

@media only screen and (min-width: 768px) {
    
    body.content-double-sidebar #sidebar {
        float: left;
        width: 20%;
        max-width: none;
    }

    body.content-double-sidebar #primary {
        float: left;
        width: 60%;
        padding: 0 40px;
        max-width: none;
    }

    body.content-double-sidebar #secondary-sidebar {
        float: left;
        width: 20%;
        max-width: none;
    }

}