Twenty Sixteen child theme with enhanced customizer options

I started with Twenty Sixteen and embarked on my latest child theme project. Along the way discovered a lot of great things that can be done with a child theme given a bit of research and some creative effort.

Sticky footer with full-height div

There’s been a lot written on the subject of “sticky footers”, and Philip Walton sums it up perfectly:

Getting the footer to stick to the bottom of pages with sparse content is something just about every Web developer has tried to tackle at some point in his or her career. And, for the most part, it’s a solved problem. Yet all the existing solutions have one significant shortcoming — they don’t work if the height of your footer is unknown.

Example of a normal footer
A normal page footer: The footer creeps up the page if there’s very little content, leaving a big gap at the bottom of the screen.

Many will say that CSS is the way to go, but as Mr. Walton says, that only works if the footer is a known, fixed height. Walton introduces a method using Flexbox, which supposedly works with variable-height footers. In the limited amount of time I spent playing around with it, I wasn’t able to get the Flexbox method to work with the page structure of my Twenty Sixteen child theme, but it’s probably something I’ll look further into when I have more time. For now, I’m using the same jQuery method that I used on my previous child theme:

jQuery(document).ready(function(){
    var footer_height = jQuery("#footwrapper").height();
    jQuery("#pushwrapper").css({'padding-bottom' : footer_height });
    jQuery("#footwrapper").css({'margin-top' : -footer_height });
});

I wish I had made a note of where I found this solution a couple of years ago so I could give the proper credit – I’ve been unable to find the same solution documented since then.

I also added the following bit of (middle-of-the-night-idea) code to the same file to take care of the problem of the containing <div> not reaching down to the bottom of the page when there is little content on the page.

//Dynamically assign height of content div
jQuery(document).ready(sizeContent);
jQuery(window).resize(sizeContent);

function sizeContent() {
    var newHeight = jQuery(window).innerHeight() - (jQuery("#masthead").height() + jQuery("#footwrapper").height()) + "px";
    jQuery(".site-inner").css("min-height", newHeight);
}

Here’s what the same page look like with the sticky footer function in my child theme:

Example of the sticky footer
Sticky variable-height footer with full-height content div

Author: Galen

Combining a lifelong passion for photography with an ever growing fascination with the properties of light, Galen specializes in portrait, fashion, and fine art photography with the goal of producing dynamic, quality images through focused effort and attention to detail.

Leave a Reply

Your email address will not be published.