• Skip to primary navigation
  • Skip to main content
  • Skip to footer
  • Store
  • Support
  • My Account
  • Cart

9seeds

Building Custom WordPress Solutions | Plugin Development

 
  • Custom Development
  • Themes
  • Plugins
  • About
  • Contact
  • Blog

Corey Scribner

Sticky Footer for Genesis

Posted on November 29, 2013

glue-bottleWe 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.

Sticky footer for genesis screenshot

Functions.php

//* Sticky Footer Functions
add_action( 'genesis_before_header', 'stickyfoot_wrap_begin');
function stickyfoot_wrap_begin() {
	echo '
'; } add_action( 'genesis_before_footer', 'stickyfoot_wrap_end'); function stickyfoot_wrap_end() { echo '
'; }

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 */
}
Continue Reading

Corey Scribner

    More by Corey Scribner

    Footer

    Get in Touch

    • New Project Inquiry
    • Product Support and General Inquiry
    • Store Purchase Terms and Conditions
    • Store FAQ
    • Cookie Policy
    • Privacy Policy

    Our Services

    • Custom WP Development
    • Theme Store
    • Plugin Store

    WordPress Plugins for Sale

    • Time Tracker
    • Authorize.net SIM Gateway

    WordPress Plugins for Free

    • Simple Calendar
    • WP Chargify
    • Facebook
    • Twitter
    • LinkedIn
    • WordPress
    • GitHub

    Copyright 2021 | 9seeds, LLC