I previously wrote about my process for getting the Sage starter theme to work with Bootstrap 3. This was mostly focussed on initial steps and the navigation. This is part two: how to wrangle the wrapper class into shape when you’re building something other than a standard blogging theme.

The Issue

One of the things I most like about Sage is its “theme wrapper“. This puts standard header and footer code around every template that you create, without you even needing to include the get_header() and get_footer() template tags.

This is brilliant, if all of your templates need the same code wrapped around them.

I’ve been working on a theme based on Bootstrap 3 that has a front-page with some full-width “container-fluid” sections. So I need this (and possibly, in future, other templates) to have a different class on the “wrap” element that comes in Sage’s default base.php.

Options

One option is to remove the wrapper elements from base.php so that they can be defined in the individual templates according to whether or not they are needed, or so that they can be customised on a per-template basis.  This kinda defeats the point of the wrapper.

Another option is to put the logic for choosing a container class into the base.php. This is great, but this goes against the modern development practice of separating logic and templates that Sage is fighting against.

The third solution that I’ve seen it to do something akin to the second option, but sort-of move the decision making elsewhere. This originates in a Roots.io Discourse (i.e. Sage forums) thread and makes its way into a GitHub gist. The solution is to have a wrapper-class-choosing function and to push the current template name and a list of “full-width” template names to that, and let it give you back the appropriate class.

I confess that I don’t see how this is much different to putting the logic in the template – they seem equivalent to me. But hey. There’s an additional step though…keep reading!

There is another solution presented in the Discourse thread, which is applying a class to the body, as Sage does to say whether or not a page should have a sidebar. You could then style the .wrap element using SASS mixins to create the appropriate grid styles. But I’m not using this approach because I’ve decided that I’m happy with not-purely-semantic HTML and I include my grid styles in my markup, so this would confuse things.

EXCEPT…and here’s the additional step…the .main element is already conditionally styled based on the body’s class and it contains some semantic grid styles achieved by using Bootstrap SASS mixins.

My fix for this is to make the semantic grid styles on .main only apply when the page is NOT full-width. I achieve this by making my _grid.scss look like this:

Improvements

This all works for now. I think a BETTER solution is to pull the entirety of the wrapper-class logic into extras.php – i.e. have something similar to the body_class function in extras.php and just use the output of that in base.php’s .wrap element.  Perhaps something for the future.  Or maybe including the body-class approach and some base styles for that would be better.

In any case, I have a working solution. Hooray!