Changing the global column layout of the Customizr theme

Note :This snippet works only with the Classical style option. More about the theme style option here

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.


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 :


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

Related Snippets you may also like

31 thoughts on “Changing the global column layout of the Customizr theme

  • Twitchetts

    Hi Nicolas! We are about to work with an ad network that requires us to have a 300 pixel width side bar. We do not use side bars on our home page just in our posts and pages. I am no a huge coder… what is the easiest way to change All of our side bars to 300 pixel width without messing up the rest of our site?

  • Hedp Kbl

    Can I move feature image area to the left, and want to show sidebar upcoming event to show at the right or a sidebar should start under timeline, not under feature image area. Can anyone help, kindly show me how to do it. Thank You. Love Customizr Theme.
    picture attached.

    Thank You

  • Ivan Borisov

    It’s prossible apply layout for specific category, for example
    Grid is default layout, but for category “quotes” i want apply alternate thumbnails layout

  • Margot

    Hello Nicolas,
    Is it possible to create a new layout like this for the header? It would be nice if I could change the width of logo (for instance 1 column) and navbar (11 column) for different websites.
    Thanks, also for this great theme

  • Kyle Martin

    Asymmetrical sidebars? I want the left sidebar to span-2, content to span-7, and right to span-3. This allows for a menu on the right and larger items like a calendar on the left.

    Dropped your above code into my child theme’s function.php file and it worked great for symmetrical changes. But because both left and right are simply “sidebar”, I can’t change them independently.


      • Kyle Martin

        this is the line that’s controlling my world. if I drop sidebar down to span2, then both shrink together.
        I’ve also waded through the stylesheet to see if some width determined left from right.
        Don’t know what I’m missing.

        • Giorgio25b

          Hi Kyle not sure what you are experiencing, but I just tried it on my local test site and it works only if you do:

          content 8 + sidebar 2 = 12, bec the sidebars are x2 😉

          The total can not be different than 12!
          Hope it helps

  • David

    Hi Nicolas, love the theme. Just one issue, every time I try to put a widget on the right sidebar it ends up at the bottom like a footer. I use the theme’s sidebars and custom sidebars, but I still get the same results. Have any ideas?

    Thanks in advance

  • Sugaboss

    Hi Nicolas, I really appreciate this great theme for its beauty, flexibility and support.
    I am not a programmer and usually just copy and paste any CSS from forum or support web to solve my problems.
    Is it possible to change the 1st default layout (which is 1 column full width) into 1 column but 80% of the screen width?
    Any help is really appreciate

    • Nicolas Post author

      Hi Bookstart, you might want to customize this part of the css :

      Hope this helps!

      • Sugaboss

        Thank you for your reply Nicolas

        My objective for this modification is to have different color for general web background and page/post background.
        previously I used this modification in my CSS:

        /* narrow the fornt page */
        max-width: 1170px;
        margin: 0 auto;
        footer#footer {
        max-width: 1170px;
        margin: 0 auto;

        And your solution resulted the same. When I change the general website background … the background of the featured page and any other page/post is also changing as the general website background. Some people suggest me to modify the container of the page/post but I do nt know how. Thanks … any help is really appreciated.

  • Leon

    Hi guys, I guess this is a silly question but I’m a newbie: where do i need to paste this code to make it work? I don’t know what the tc_global_layout filter is.

    Thank you

  • Nicolas Post author

    Hi Brooke, you can play with the featured pages hook controling the featured pages by row called ‘tc_fp_per_line’ which has a value of 3 by default.
    Hope this helps!

    • Brooke Babington

      This worked perfectly – thank you very, very much! I made a copy of the class-content-featured_pages.php file in my child theme and adjusted the span array defaults for tc_fp_per_line.

      Another question: Is there a way to have the sections resize to fill larger screens? When I view the page on my 13″ laptop it seems to reflect my span1, span10, span1 layout, but when I look at it on my mac the contents are constrained to the centre of the page. It still reflects the span1, span10, span1 layout but does not extend to either edge of the screen.

      Thanks again!

  • Brooke Babington

    Hi there, terrific theme – I love its flexibility and your support!
    I have changed the global layout of my front page to span1, span10, span1 (with right and left sidebars) and have moved the featured pages block to hook ‘__after_article’ so that the sidebars run the whole length of the front page.

    My problem now is that the featured pages are set to span6 (at 2 blocks per line) and so they overflow the right sidebar. Could you tell me how to resize the featured pages blocks to be span5 so that they can fit within my new span1, span10, span1 global layout?

    Thanks so much in advance! Brooke

  • Daniel Alvares

    I reduced the span of the columns but the main wrapper did not reduced and the elements are no longer centered on the page. How to adjust the size of the main wrapper? And how to keep the elements centered on the page?

  • dave

    Is it possible to add content shadow boxes in this theme? I want to make the shadow boxes bring out the content.

  • Ducktape

    Hi Nicolas,

    Is there a way to have fix width page (i.e. text + sidebar = max 960px) with a 75% – 25% ratio will keeping the rest in full width ???



  • Jake

    Is it possible to modify this code so that it will modify the ratios depending on the size of the screen you are viewing It on?

Comments are closed.