Adjusting sidebar layouts

Below I will show you the code for the various sidebars. How to force a layout. Then how to add a new sidebar layout.

The layout acronyms:
c = full width content.
c_sp = content left with right primary sidebar.
sp_c = content right with left primary sidebar.
c_sp_ss = content with right primary and right secondary sidebars.
sp_ss_c = content with left primary and left secondary sidebars.
sp_c_ss = content with left primary sidebar and right secondary sidebar.


Force layout

An example. In the functions.php add the following code.

// Force full width content layout.
add_filter( 'beans_layout', 'example_force_layout' );
function example_force_layout() {
return 'c';

It will then force all the pages to use full width content layout.

Force layout depending on condition.
The following uses a condition. If front page then full width, if page is contact then right sidebar, or else use left sidebar.

add_filter( 'beans_layout', 'example_force_layout' );
  function example_force_layout() {
     if ( is_front_page() ) {
        return 'c'; // Full width content
     if ( is_page(contact) ) {
        return 'c_sp'; // Content left - sidebar right
    else {
        return 'sp_c'; // Sidebar left - content right


Adding a new sidebar layout

The following is from the child themes Bench and Banks.
Download the new sidebar layout icon: add to an assets/images folder in the root of your child theme.

Add the following to your functions.php file:

// Add admin layout option. Will be seen in the customizer and in page/post option below the content area.
beans_add_smart_action( 'beans_layouts', 'banks_layouts' );
   function banks_layouts( $layouts ) {
    $layouts['banks_c'] = get_stylesheet_directory_uri() .  '/assets/images/c.png';
    return $layouts;

// To setup the document so that changes in the customizer are seen before saving then one needs to setup the add action with wp.
add_action( 'wp', 'banks_setup_document' );

function banks_setup_document() {
// Add grid min width for Banks slim content
    if ( beans_get_layout() == 'banks_c' )
    beans_add_attribute( 'beans_content', 'class', 'tm-centered-content' );

In the style.css or style.less file add:

.tm-centered-content {
   max-width: 1200px;
   margin-right: auto;
   margin-left: auto;


Remove the option to change the sidebar layout.

Remove the option to adjust the sidebar layout by removing the option inside the post and page and the customizer.

// Remove layout options from pages and posts.
beans_remove_action(  'beans_do_register_post_meta' ); // will remove the options from pages
beans_remove_action(  'beans_do_register_term_meta' ); // will remove the options from posts

// Remove layout options from the customizer.
function default_layout_remove() { 
global $wp_customize;
$wp_customize->remove_section( 'beans_layout' ); // Section name of the default layout.
add_action( 'customize_register', 'default_layout_remove', 11 );

Code I need to test:
Removes layouts.

add_filter( 'beans_layouts', 'example_modify_layouts' );

function example_modify_layouts( $layouts ) {
unset( $layouts['c_sp_ss'], $layouts['sp_c_ss'] );

return $layouts;


Filed under: Learning

No comment yet, add your voice below!

Add a Comment

Your email address will not be published. Required fields are marked *

Comment *
Name *
Email *