Changing the global column layout of the Customizr theme 26

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!

  • 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?

  • Gustavo Rodrigues da Silva


    and can you give me an indication as to leave a listing of posts in columns, like the page of code snippets

    Tks! Great Theme!

  • http://Inconstruction 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 ???



  • http://Websiteisstillintheprocessofbeingbuilt. dave

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

    • Nicolas

      Hi Dave, could you provide an example of shadow boxes implementation?

  • 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?

  • 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

  • Nicolas

    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!

  • 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

      Hi Leon,
      If you are new to Customizr (and WordPress), you might want to read this short guide on how to customize Customizr.

      If you still have issues then post a new thread in the the Customizr user’s forum and we’ll do our best to help you.

      Thanks and best regards

  • 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

      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.

  • 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

    • Nicolas

      Do you use any plugins to manage your sidebars, or is it with the built-in WP feature with Customizr that you have issue?

  • 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.


    • Nicolas

      Hi Kyle,
      With this snippet you can adjust the layout span class independently for each single sidebars.

      • 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

  • 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

    • Nicolas

      Hello Margot, it’s possible but requires some coding for now.
      Thanks :)

  • 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