Thesis is what you make it

Lately I have been witnessing more and more complex and beautiful designs throughout the community. Thesis is really what you make it. I’ve found I can work away at a design mock up in Photoshop, and no matter what I come up with, I can replicate it in Thesis. Of course, as designs get more complex so does the development. Thesis can’t do everything right out of the box.

How to stick your Thesis footer to the bottom of the page

On it’s own, with no custom tweaks, the Thesis footer looks and feels great. It’s exactly where one would expect it to be in terms of placement. However, while designs get more complex and more elements are thrown into the mix things tend to not sit as well. Below is a shot of the standard out of the box design of Thesis. I’ve deliberately included a small amount of content and a tiny set of widgets for the example.

As you can see everything looks and feels great. But what if we wanted to mix things up and add a light grey background to the footer? Well let’s try exactly that and see what happens:

Now the placement of that footer isn’t working so well. We would expect the footer to be shot to the bottom of the page no matter the content and window size, or at least have anything below the footer the same colour. Of course, if we had more content we would get the desired effect- however that’s not always the case. So what now? Alas, Thesis can’t be at two places at once, so we are going to have to leave the defaults, and tweak our custom files.

The CSS

I’ve based the CSS off one of the most widely used sticky footer solutions in web design, The CSS Sticky Footer by Ryan Fait. Taking his original CSS we are going to work it into our thesis site. First, open up the custom.css file located in the custom folder (found in the Thesis theme directory). If it’s named custom-sample, simply rename it to custom and proceed. Make sure you back up anything in that folder before continuing.

Once you have custom.css open, pop this code into the file:

html, .custom {
 height: 100%;
}
.custom .wrapper {
 min-height: 100%;
 height: auto !important;
 height: 100%;
 margin: 0 auto -100px; /* the bottom margin is the negative value of the footer's height */
}
.custom #footer_area, .custom .push {
 height: 100px; /* .push must be the same height as .footer */
}

Thankfully, that small bit of code is all you need in terms of CSS. Obviously you can change the height of the footer to your preference. Make sure if you change the height, to also change the .custom .wrapper margin as well (as shown in the comments). Right now you won’t get anything if you tried to refresh your Thesis page- as we haven’t created the wrapper or push containers that are referenced in the CSS.

The PHP

In that same custom folder you should find a separate file called custom_functions.php. Open that up and paste the code below:

add_action('thesis_hook_after_content_area', 'div_push');
add_action('thesis_hook_before_html', 'div_wrapper_start');
add_action('thesis_hook_after_content_area', 'div_wrapper_close');

function div_push() {
 ?>
 <div class="push"></div>
 <?php
}

function div_wrapper_start() {
 ?>
 <div class="wrapper">
 <?php
}

function div_wrapper_close() {
 ?>
 </div>
 <?php
}

Basically this code is creating some new layout containers for the site. The header and content area will now be wrapped in a wrapper container, with a push container placed inside. Our CSS now has it’s elements to call on and have something to “push” to the bottom of the page.

We’re Done!

Yep, that’s it. If you have a very content lacking site you now have no need to worry. If you refresh your site, you should have something that looks like this no matter the window size:

The only thing you may want to change, like I said before, is the height. Other then that, you’re good to launch your site and see your changes. This technique should work in all major browsers and even IE6. If you have any questions, fire them in the comments section below.