The Ultimate Guide to Creating Alternate Column Layouts in Thesis


A pretty powerful part of Thesis is its great ability to easily add or remove content areas with just a few lines of code.

Sure, coding isn’t the most attractive solution to most people — but it’s honestly not tough to wrap your head around if you really want to do it.

In this tutorial, I want to go over how I created alternate sidebar layouts throughout Kolakube.

A lot of people have been asking me how I have all these different sidebars on different pages, so I figured I’d write a tutorial on how to do it.

To get an idea of how extensive you can get with creating these alternate layout schemes, I’ve taken a screenshot of the 3 places on Kolakube where I’ve used the techniques I’m about to share to create a diverse layout:

Layout 1

Click for a larger view

Layout 2

Click for a larger view

Layout 3

Click for a larger view

[note]

Recommended for This Tutorial

To follow this tutorial easily and tweak your own code later, I suggest you have an intermediate knowledge of how to customize Thesis with hooks, and use FireBug.
[/note]

Step 1: Prep A Few Numbers[return]

Before we get started any coding, we need to know a few numbers:

  • The page you want to create the custom layout out (you can grab the page ID, or a conditional tag
  • The width of your content column (found in Thesis → Design Options → Columns → content column)
  • The width of sidebar 1 (found in Thesis → Design Options → Columns → sidebar 1)

For reference throughout this tutorial, here are my settings (using the Thesis 2-column layout):

  • content: 480
  • sidebar 1: 195

Step 2: Filter All Sidebars[return]

Thanks to this handy article from DIYthemes, we can easily remove all sidebars from the layout of whatever page we specify through the use of conditional tags.

Don’t worry, we’ll add them back in the next step. Paste this code into custom_functions.php:

[php]
// Remove original sidebars
function no_sidebars() {
if (is_single())
return false;
else
return true;
}
add_filter(‘thesis_show_sidebars’, ‘no_sidebars’);
[/php]

See that code is_single()? That tells the function which page it should remove the sidebars on. is_single() controls the layout for all blog posts, so by firing this function— you’re removing the sidebars on all blog post pages. Like I said, we will be adding them back.

A few of conditional tags I use the most are (see full list in the Codex):

[php]
is_home() // homepage of blog
is_page(‘1’) // page with the ID of 1
is_single() // blog posts
[/php]

Save that file, and check out your site. You should notice that there is only your content box left in the content area, and no sidebars.

No sidebars

Click for a larger view

Step 3: Add A Custom Body Class[return]

For styling purposes, we need to add a custom body class to the page. You may know the default body class Thesis assigns to all pages is custom, as in:

[html][/html]

We need to assign another class to only whatever page we just filtered the sidebars out on. Paste this into custom_functions.php:

[php]
function kol_body_classes($classes)
{
if(is_single())
{
$classes[] = ‘single-layout’;
}
return $classes;
}
add_filter(‘thesis_body_classes’, ‘kol_body_classes’);
[/php]

See that is_single() again? That’s targeting only single post pages, since we don’t want to add this class to any other page.

You can add as many targeted body classes as you want. Just add this right before return $classes:

[php]
if(is_page(‘1’)
{
$classes[] = ‘another-class’;
}
[/php]

Now we have the following body class on all our single post pages:

[html][/html]

Still with me? Let’s go deeper:

Step 4: Adding Sidebar 1 Back[return]

Going back to the DIYthemes tutorial, we can go ahead and add back our first sidebar to the layout. Paste this into custom_functions.php:

[php]
// Restore sidebar 1 to layout
function restore_sidebar(){
if (is_home()) { ?>

custom.css file (you will have to adjust these values to your own):

[css]
.single-layout .no_sidebars #content { width: 51.4em }
[/css]

How did I get the value 51.4? Easy.

Thesis sets the #content column (the section that holds your post content) to whatever number you assign in the design options (mine is 480), and adds the margin (spacing) around the #content column to the total width.

So, if you look into the layout.css file (or use Firebug) and search for #content, you should find the width already calculated for you. Replace my value, 51.4em, with the value created for your content column.

After that, you should have a layout put together a little something like this:

One Sidebar Layout

Click for a larger view

Step 5: Play Around![return]

We’ve successfully recreated a sidebar in Thesis and are ready to roll.

What we basically did was go around in a complete circle. We removed the sidebar from the page, and then added it back. The only difference? More control.

Going back to Step 4, you’ll see that’s where the key to the customization lies. You can replace:

[php][/php]

…with anything!

What that code does is just recreates the sidebar Thesis registers. Remove that code, and place your own there — and now you’ll see the true power of this tutorial, and how easy it will be to create these alternate layout schemes, such as you see on Kolakube.

Let’s get a little more specific here…below, I’ve outlined some codes you can use to create multiple columns all in different order.

Content | Sidebar | Sidebar[return]

You must have the 3-column layout enabled in Thesis → Design Options → Columns

Replace the function from Step 4, restore_sidebar, with this function:

[php]
function content_sidebar_sidebar()
{
if(is_single())
{
?>

Alternate: Sidebar | Sidebar | Content [return]

Using the same function as above, paste this into the CSS:

[css]
.single-layout .no_sidebars #content { float: right; width: 51.3em }
[/css]

As always, adjusting the content width.

Sidebar | Content | Sidebar[return]

You must have the 3-column layout enabled in Thesis → Design Options → Columns

Replace the function from Step 4, restore_sidebar, with these functions:

[php]
// Start wrapping #column_wrap around content + sidebars on single pages

function kol_column_wrap_open()
{
if(is_single())
{
?>


#content width as explained in Step 4, and make sure the #sidebars width is the same as #sidebar_1.

Widgetizing Your Custom Sidebars [return]

If you want to make these sidebars a little more dynamic, you can very easily create new widget areas to them. Go back to any of the functions you just made, and replace any instance of:

[php]

[/php]

With this:

[php][/php]

Now, you need to add this somewhere outside of the function. I recommend placing it right after add_action():

[php]
register_sidebar(array(
‘name’ => ‘Custom Column 1’,
‘before_widget’ => ‘

‘,
‘after_widget’ => ‘

‘,
‘before_title’=>’

‘,
‘after_title’=>’


));
[/php]

Make sure the name values both match. Now, you can go into the Widgets section in WordPress and drop widgets into your new sidebars just like you would with the other Thesis sidebars!

How Have You Implemented This?[return]

Do you plan to, or have you already done something like this in Thesis? What do you think of the layout methods I created for this tutorial?

I have a feeling there will be plenty of people who need help implementing these layouts into their own site, so feel free to leave a comment below if you have any questions or issues with this tutorial!

26 comments add yours

  1. Alex,
    Fantastic tutorial and some really nice technique. I love tips that make Thesis look less out-of-the-box-Thesis-ish and your ideas here really nail that. I’m starting a design for a photographer this week and I’m going to give this a spin.

    Thanks very much

  2. Huh. I’d never thought of doing alternate positions and configurations for my sidebars. Even though I’m not running Thesis, this wouldn’t be too hard to do. On to my test server…

  3. After three years using Thesis Theme, now I feel free to say to my clients: “I can do everything”. Posts like this one showed me the road. Thanks Alex.
    Regards from Italy

  4. Wow 🙂 !

    Fantastic tutorial. Everytime I read any tutorial here, it increases my work, the reason I get tempted to implement the relevant portions to my blogs.

    Great work and I am already on it if I can implement something from this tutorial on my new or existing blogs. 🙂

  5. This is perfect for a client project I’m doing. I may be back with questions…

    Thanks for sharing again Alex – top stuff here.

  6. Firstly, let me congratulate you on your recent achievements. Your designs never fail to amaze me. Great work.
    I was just trying out the Sidebar|Content|Sidebar format and hit a bump. Even though I have followed the instructions to the word, the order remains as ‘Sidebars 2’ – ‘Sidebar 1’ followed by the ‘Content’. Help!
    Thanx.

  7. Great tutorial. Finally someone who actually isn’t just copying tutorials from other places. Your tutorial was a great help and I appreciate the hard work and time you put into this.

  8. I had the same problem as Shashank trying to use the sidebar | content | sidebar setup. For some reason, the sidebars were grouping together, even though firebug was saying otherwise in the HTML structure. I played with the PHP and the CSS for over an hour. Couldn’t figure it out. I did this on my Chronicl install.

  9. Great tutorial Alex. I’ve always wondered how to do this, not just with Thesis but with WordPress as a whole. I’ve been using Widget Logic to dynamically change the widgets depending on the post/page, but changing the whole layout was completely alien to me. Bookmarked!

  10. Hi there, i just tried this and now my pages are blank and i can;t access anything??? no idea what to do

  11. Hi Alex,

    I’ve just added these to my site but only on single post pages. I love the full width layout too much but I need some way of promoting my products.

    Thanks for the tip!
    Jonny, Lemon & Lime

  12. Alex,
    Great tutorial. How would you use this technique if all your site is 2 column but on a certain page you would like to have 3 columns?

    Jeff

  13. I did it, finally. Made my home page a simple two column display while the single page is a three column one like yours. Thanx for this walk through, very helpful.
    Cheers.

  14. Great tutorial. I don’t really understand PHP but I have limped through it. I want all of my posts to have a custom format different from the rest of a site I am working on. I copied your remove side bars code which worked great. The body code allows me to move the body around and add format using CSS. How do I add the custom_post_box filter so I can edit the post box CSS? I have spent hours trying to figure it out. Sorry I am not an advanced user. This would make my day if you could tell me what this function looks like.

Leave a Comment