Adding a sticky footer in the Roots WordPress theme

Note: It has been brought to my attention that his post may be out of date. It is based on the Roots theme as it stood at the time of commit 332b990 (made on October 17th 2012).

When I setup this WordPress blog, I had a look around at the existing responsive base themes that were out there and decided to opt for Roots. The reason I did this was basically because there were a few different front-end frameworks that were available that I wanted to try out, such as Twitter Bootstrap and HTML5 Boilerplate, and it seemed like a good way to take both of those out for a spin at the same time!

I wanted to add a sticky footer to the bottom of the site and found that the information out there (for Twitter Bootstrap) didn’t seem to quite fit for Roots. So, here is how I did it:

Firstly, make some changes to the HTML for your footer. In templates/footer.php, change

<footer id="content-info" role="contentinfo">
  <?php dynamic_sidebar('sidebar-footer'); ?>
  <p>&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p>
</footer>

to

<footer id="footer">
  <div id="content-info" role="contentinfo">
    <?php dynamic_sidebar('sidebar-footer'); ?>
    <p>&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p>
  </div>
</footer>

Next, add the CSS

html { height: 100%; }
body { height: 100%; }

and remove the following line from assets/css/app.css:

body.top-navbar { padding-top: 60px }

Then, add

#wrap { min-height: 100% }
#content {
  padding-top: 60px;
  padding-bottom: 2.15em;
}
#footer {
  height: 2.15em;
  margin-top: -2.15em;
}

Notice that the height and negative margin-top of #footer are the same as the padding-bottom for #content (they don’t have to be 2.15 em, you can set them to whatever you like!).

Again in assets/css/app.css, remove

@media (max-width: 979px) {
  /* Fix top padding when using the responsive grid with the fixed topbar */
  body.top-navbar {
    padding-top: 0;
  }
}

and replace with

@media (max-width: 979px) {
  /* Fix top padding when using the responsive grid with the fixed topbar */
  #content {
    padding-top: 0;
  }
}

Finally, look in assets/css/less/responsive-767px-max.less for

@media (max-width: 767px) {
 ...
 // Negative indent the now static "fixed" navbar
 .navbar-fixed-top,
 .navbar-fixed-bottom,
 .navbar-static-top {
   margin-left: -20px;
   margin-right: -20px;
 }
 ...
}

and add selectors for the footer to get

@media (max-width: 767px) {
  ...
  // Negative indent the now static "fixed" navbar
 .navbar-fixed-top,
 .navbar-fixed-bottom,
 .navbar-static-top,
 #footer {
   margin-left: -20px;
   margin-right: -20px;
 }

 #footer {
   padding-left: 10px;
   padding-right: 10px;
 }
 ...
}

This should give you a sticky footer at the bottom of your Roots theme (although I haven’t quite figured out how to get it to work when the admin menu is showing at the top of the screen because I’ve logged in – you have to scroll down to see the footer in that case).

3 Responses to “Adding a sticky footer in the Roots WordPress theme”

  1. MachineUser

    Definitely appreciate the tutorial but I believe it is now out of date. Most of the code referenced in your tutorial no longer exists in the cited documents and cannot be found. Definitely looking for a responsive, bootstrap-based theme that I can apply a sticky footer to!

    Reply
    • admin

      Thanks for your comment: I have looked into the git log for the point at which I cloned the Roots repository and added a note at the top of the post. Hopefully that will help anyone struggling to do this to pinpoint any additional changes that may be required (and at which commit the above code ceased to work).

      Reply

Leave a Reply to Donna McMaster

Click here to cancel reply.

Unable to load the Are You a Human PlayThru™. Please contact the site owner to report the problem.