Corey Scribner

Sticky Footer for Genesis

Posted on November 29, 2013

We had a client request that their site’s footer be fixed to the bottom of the browser window for “short pages” or pages with little content. A good example of how to accomplish this with HTML and CSS is available at: http://css-tricks.com/snippets/css/sticky-footer/. If you’re using the Genesis framework for WordPress however, a couple more steps are required to get the sticky footer working.

For this example, we’re using the Genesis sample theme, but it should work for any theme available from StudioPress with minor CSS adjustments to .site-footer height and .page-wrap margin-bottom.

You’ll only need to work with two files: functions.php and style.css. The code for each section is listed below. Note that this solution will likely not work in IE8 or Opera, where a javascript solution may be needed (see Ryan Fait’s sticky footer example for an alternative method that is not Genesis-specific).

Your mileage may vary. Feel free to leave your modifications and suggestions in the comments.

Functions.php

//* Sticky Footer Functions
add_action( 'genesis_before_header', 'stickyfoot_wrap_begin');
function stickyfoot_wrap_begin() {
	echo '<div class="page-wrap">';
}
 
add_action( 'genesis_before_footer', 'stickyfoot_wrap_end');
function stickyfoot_wrap_end() {
	echo '</div><!-- page-wrap -->';
}

style.css

html, body {
	height: 100%;
}
 
.site-container {
	height: 100%;
}
 
.page-wrap {
	min-height: 100%;
	/* equal to footer height */
	margin-bottom: -90px; 
 
}
 
.site-inner {
	min-height: 100%;
	/* equal to footer height */
	margin-bottom: -90px; 
}
 
.site-footer, .site-inner:after {
	/* .site-footer and .site-inner:after must be same height as .site-inner */
	height: 90px; 
 
}
 
.site-footer {
	background: orange;
	/* Use this for testing */
}