Changing the global column layout of the Customizr theme

With the hooks API, Customizr offers a simple way to change the global layout of your website . The following snippet explains how to create different column layouts for your content and sidebars, and apply them to specific contexts on your website.

Customizr theme layouts

As explained here, the theme proposes four different layouts that you can easily set up from the customizer options and on a post/page basis.

1 One column full width. See full width layout demo.
2 Two columns with sidebar on the left. See left sidebar layout demo.
3 Two columns with sidebar on the right. See right sidebar layout demo.
4 Three columns with two sidebars. See three columns layout demo.

The theme is based on the 12 columns Twitter Bootstrap grid. The default layout is 1/4 | 3/4 or 3/4 | 1/4 with a sidebar.

• More about grid and columns in Customizr here
• More infos about the Bootstrap Grid System here

Creating a new layout

The Customizr layout is defined in an array you can hook into with the tc_global_layout  filter. In this example, I apply a 1/3 | 2/3 layout.

add_filter('tc_global_layout', 'my_custom_layout' );
function my_custom_layout( $layout ) {
    $my_layout      = array(
        'r' => array ('content' => 'span8' , 'sidebar' => 'span4'),//sidebar on the right
        'l' => array ('content' => 'span8' , 'sidebar' => 'span4'),//sidebar on the left
        'b' => array ('content' => 'span4' , 'sidebar' => 'span4'),//both : two sidebars
        'f' => array ('content' => 'span12' , 'sidebar' => false),//full width : no sidebars
    );

    //sets new values for content and sidebar (checks if there are new values to set first)
    foreach ($layout as $key => $value) {
        $layout[$key]['content']   = isset( $my_layout[$key]['content']) ? $my_layout[$key]['content'] : $layout[$key]['content'];
        $layout[$key]['sidebar']   = isset( $my_layout[$key]['sidebar']) ? $my_layout[$key]['sidebar'] : $layout[$key]['sidebar'];
    }
    return $layout;
}

Applying different layouts depending on the context

Now let’s say you need a specific layout for your categories, another one for pages, and the default one for the rest of your website. You can use WordPress conditional tags to do it as follow :

add_filter('tc_global_layout', 'my_custom_layout' );

function my_custom_layout( $layout ) {
    $my_layout_for_pages      = array(
        'r' => array ('content' => 'span8' , 'sidebar' => 'span4'),
        'l' => array ('content' => 'span8' , 'sidebar' => 'span4'),
        'b' => array ('content' => 'span4' , 'sidebar' => 'span4'),
        'f' => array ('content' => 'span12' , 'sidebar' => false),
    );

    $my_layout_for_categories      = array(
        'r' => array ('content' => 'span6' , 'sidebar' => 'span6'),
        'l' => array ('content' => 'span6' , 'sidebar' => 'span6'),
        'b' => array ('content' => 'span6' , 'sidebar' => 'span3'),
        'f' => array ('content' => 'span12' , 'sidebar' => false),
    );

    if ( is_category() ) {
        $my_layout = $my_layout_for_categories;
    } else if ( is_page() ) {
        $my_layout = $my_layout_for_pages;
    } else {
        return $layout;
    }

    //sets new values for content and sidebar (checks if there are new values to set first)
    foreach ($layout as $key => $value) {
        $layout[$key]['content']   = isset( $my_layout[$key]['content']) ? $my_layout[$key]['content'] : $layout[$key]['content'];
        $layout[$key]['sidebar']   = isset( $my_layout[$key]['sidebar']) ? $my_layout[$key]['sidebar'] : $layout[$key]['sidebar'];
    }

    return $layout;
}

Hope this will help you doing awesome web designs with the theme!