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 '';
}
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 */
}
Thanks, this is perfect! Saved me a lot of headache :)
Works like a charm, many kudos for presenting this solution for Genesis. I couldn't believe sticky footer functionality wasn't available for Genesis. Thanks to you this isn't the case anymore! :)
Helped me out, too. I tried quite a few "normal" solutions being advocated and had a sense things might be a tiny bit different for us. Worked perfectly first time, and easily adapted to mobile configurations (just kept changing the height, and using .site-footer { display:table; } and .site-footer { display:table-cell;vertical-align:middle; } to center the text).
Excellent post, thanks a lot
I did not get it to work as it got stuck on the page for longer content. Here is the code that I got working: html { height: 95.5%; } body { height: 100%; } .site-container { height: 95%; } .page-wrap { min-height: 89%; margin-bottom: 3px; } .site-footer { position: absolute; width: 100%; height: 100px; } I was also inspired by this jsfiddle: http://jsfiddle.net/juroto/HL6Ad/
Nice! Thanks for sharing that!
This is a VERY interesting find. ...I'm going to play with this a bit. Thanks!!!
This is great, thank you so much! Two questions I'm wondering if you have any tips for: When I implemented the code my home page image now shows twice for some reason. Any idea why? Is there a way to make the footer taller, so there is a bit of space below my Copyright line? I would really appreciate it if you have any insight!
Adding that those two wrapper function by themselves shouldn't cause the footer to duplicate. It sounds like you have the footer hooked in twice though. Look for something hooked to genesis_footer. You should be able to control the height of the footer with CSS .site-inner and .site-footer, .site-inner:after just adjust the 90px and -90px to something else, like 200px and -200px.
Hi! Trying this sticky footer option out on my website, and I think it's "stuck" within the site container because it's showing up twice on a page: https://www.legendarymassage.com/rates/ Did I add it in the wrong place in my functions.php file? thanks!
A few people have reported seeing a double footer. Nothing in the code snippets above however would lead to that on it's own. It's possible some other code in the theme your using could. Is anything else hooked to genesis_before_footer?
Ahhhh! I did have a site footer hook to add the copyright info in genesis>simple hooks. Took that out and it got rid of the double footer. I'm still seeing that it's not executing the sticky footer here: https://www.legendarymassage.com/legendary-massage-signature-treatment/ Thank you!!!
Thanks Corey, this seems to be just what I was looking for. It works fine on the web site when testing on a computer, but it doesn't seem to be responsive. I am using the Genesis framework with Brian Gardners free BG Minimalist theme. Is there anything you can recommend? I am here http://www.alfabetprodukties.nl/testen/ for testing... and I do hope someone can help me out because my client do wants the footer to stick to the bottom... Thanks in advance, Eva
Thank you!!
Thanks a lot. Still works like a charm with latest versions of WP and Genesis + Sample at this date.