Roots Development Tips. Help with features of the Roots framework

Posted on 19th June 2014 by Andi Wilkinson

Time to read: 6 minutes

LEGACY. Roots is Now Sage.

So in my last post I wrote my quick guide to getting roots up and running. What about some Roots Development Tips? So far after using the framework for around ten of my own sites, I love it, and I am pretty hooked. But there are a few places where I always want to create the same changes over and over. The first time I created a site with the framework, I was new to WordPress dev & I spent literally hours poring over each new problem.

This post is now completely legacy because Roots is now Sage. Personally now I am a fan of underscores.

Why won’t the menu sit over there and why won’t this custom post type paginate? Then I started to build up a knowledge bank for customising roots, and it all started to get a bit clearer. So I have written this post for new to roots development in mind. I aim to help anyone with all the things it took me ages to figure out, roots forum posts and questions on stack overflow. And yes, some of them are probably really obvious, but I will throw those in too.

My Roots Development Tips

When customising Roots, you should be adding custom css to the app.less file. You can also add to and modify the variables.less file. You can also modify many of the other files if you wish, but if you find it easier, just add changes to app.less

1. Remove that border from under your page header titles.

First, locate the type.less file. this is in your theme file under assets > less > bootstrap.

here is the culprit on line 136. Next, change it or override in app.less. Of course you can take out the headers altogether which I do and bang in your own nav.

.page-header {
padding-bottom: ((@line-height-computed / 2) - 1);
margin: (@line-height-computed * 2) 0 @line-height-computed;
border-bottom: 1px solid @page-header-border-color;

2. How to create an archive page for a custom post type.

So you have created your custom post type. Or as I did in my first roots installation made a plugin so I could display ‘portfolio items. Try as I might i could not get this page to paginate properly, and no one seemed to understand what I was asking.  So here is my original confusion in getting the custom post type to paginate.

After lots of head scratching, the answer was really simple. – Take advantage of the WordPress Template Hierarchy. Its all about the way you name your files. so lets say you have created your custom post type and called it ‘portfolio’ for arguments sake, (a common one) and you want to display it on its own page, locate the index.php file and change it out to archive-portfolio.php.

This will be the page that WordPress now uses by default as your custom archive, and the pagination will just work like it does on your blog page. To access the page you will need to go to the slug you created for the custom post type. A great site to help you easily generate Custom Post types is Generate WP. Oh and I can’t stress this enough. UPDATE THE PERMALINKS!!!  Really, it seems to be the thing that will fix most of your problems before anything else.

3. How to create columns in the footer.

widgetized multi column footer in wordpress

By default, the Roots framework has a widgetized footer area, but no columns are defined within it. This one got to me at first but its very easy. It’s just about incorporating the bootstrap framework into the php code for the widgetized footer area. In the theme folder in lib > widgets you will find the following code.

‘name’ => __(‘Footer’, ‘roots’),
‘id’ => ‘sidebar-footer’,
‘before_widget’ =>‘<section class="”widget">’,
‘after_widget’ => '</section>’,
before_title’ => ‘<h3>’,
‘after_title; =>‘</h3>’,

In this case col-sm-3 allows for 4 widgets. (remember each row will add up to 12).

4. Customising Roots to give you that ‘Stripey Bootstrap Effect’

Ok so if you dont know what I mean its probably not worth asking, but many modern sites have a very definitive look with bands of colour. for some beautiful examples, look at the Love Bootstrap website.  By default, the base.php file keeps everything in a container. This file is the theme wrapper so ll I do is take out the ‘row’ and ‘container’ classes from inside this file, and I add them where necessary.

Im not sure if this is the DRYest solution, but I haven’t found a better one yet. If you aren’t careful you might end up with an extra ‘row’ which by default has a margin of -15px left and right. So you may end up with an unsightly sideways scroll. – just make sure you don’t have any unwanted ‘rows within rows’ or ‘rowception’ … My page code might go a little like this. Ok, I know ‘greensector’ isn’t that semantic, I am making this up on the fly.

<div class="greensector">
//this will have the colour attached to it
<div class="row">// this will fix any whitespace due to the margins in place on the body
<div class="container">//this will contain the content - obviously
<p style="padding-left: 90px;">Content here.....</p>
<p style="padding-left: 60px;"></p>
<p style="padding-left: 30px;">...</p>

More Roots Development Tips

So these are a few starting tips that you may come across in multiple projects. Please look out for more posts on customising Roots and WordPress.

Want to work with me?

I can be contacted at my work desk. Drop me a line..