How to push Footer all the way down when there’s little content in Genesis

Looking for a way to push your Genesis site footer to the bottom of pages that have less content?

In this article I show how we can use jQuery based on the code by Joe Fitzsimmons for a fixed or sticky footer in Genesis.

Before:

short-page-before

After:

short-page-after

Step 1

Create a file named sticky-footer.js in your child theme’s js directory (create ‘js’ if not existing) having the following code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
jQuery(function( $ ){
$(window).load(function() {
 
function stickyFooter() {
var bodyHeight = $("body").height();
var vwptHeight = $(window).height();
if (vwptHeight > bodyHeight) {
$(".site-footer").css("position","absolute").css("bottom",0);
$(".site-footer").addClass('sticky');
}
else {
$(".site-footer").css("position","static");
$(".site-footer").removeClass('sticky');
}
} stickyFooter();
 
/*resize*/
var isIE8 = $.browser.msie && +$.browser.version === 8;
if (isIE8) {
document.body.onresize = function () {
stickyFooter();
};
} else {
$(window).resize(function () {
stickyFooter();
});
}
 
// Orientation change
window.addEventListener("orientationchange", function() {
stickyFooter();
});
 
});
});
view raw sticky-footer.js hosted with ❤ by GitHub

Ex.: wp-content/themes/genesis-sample/js/sticky-footer.js

Step 2

Add the following in child theme’s functions.php:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
<?php
//* Do NOT include the opening php tag
// Move Footer widgets and Footer outside Site Container
//* Reposition the footer widgets
remove_action( 'genesis_before_footer', 'genesis_footer_widget_areas' );
add_action( 'genesis_after', 'genesis_footer_widget_areas' );
//* Reposition the footer
remove_action( 'genesis_footer', 'genesis_footer_markup_open', 5 );
remove_action( 'genesis_footer', 'genesis_do_footer' );
remove_action( 'genesis_footer', 'genesis_footer_markup_close', 15 );
add_action( 'genesis_after', 'genesis_footer_markup_open', 11 );
add_action( 'genesis_after', 'genesis_do_footer', 12 );
add_action( 'genesis_after', 'genesis_footer_markup_close', 13 );
//* Enqueue scripts
add_action( 'wp_enqueue_scripts', 'sk_sticky_footer' );
function sk_sticky_footer() {
wp_enqueue_script( 'sticky-footer', get_bloginfo( 'stylesheet_directory' ) . '/js/sticky-footer.js', array( 'jquery' ), '1.0.0' );
}
view raw functions.php hosted with ❤ by GitHub

Step 3

Add the following in child theme’s style.css:

1 2 3
.sticky.site-footer {
width: 100%;
}
view raw style.css hosted with ❤ by GitHub

That’s it!

Source: http://josephfitzsimmons.com/home/simple-sticky-footer-using-jquery/

Uses the code here.

Stay up to date

Get tips on Genesis, WordPress, Web design & more

Join 641 other subscribers

Donate

Found this article helpful?

Comments

  1. says

    Sridhar,
    Thanks, that sounds great! There are, as you know, various CSS ways of attempting that, but I don’t know of one that is rock-solid between good and horrible browsers – to handle that, jQuery to the rescue! :-)

    I hope you’re enjoying your new home!

    Best, Dave

  2. StNick says

    Hi Srid,
    I like the way this has been thought up, creating full pages. This would even be more awesome if the div for the content would be at least stretched out to the heigth of a screen. I believe the Centric pro theme does a similar thing with it’s landing page. This way, the footer doesn’t need to ‘stick’ at the bottom through a script.

  3. Phil says

    Hi Sridhar,

    Thanks for the code – how could I achieve them same for the FOOTER WIDGETS as well as the SITE FOOTER?

    ie: the FOOTER WIDGETS and SITE FOOTER stick to the bottom of the screen?

    thanks

    Phil

    • Phitess says

      Hi Phil,

      My site-footer is 96 pixels high, so my widget area should have bottom: 96px.
      So I changed this:

      in sticky-footer.js:

      if (vwptHeight > bodyHeight) {
      $(".site-footer").css("position","absolute").css("bottom",0);
      $(".footer-widgets").css("position","absolute").css("bottom",96);
      $(".site-footer, .footer-widgets").addClass('sticky');
      }
      else {
      $(".site-footer").css("position","static");
      $(".site-footer").removeClass('sticky');
      $(".footer-widgets, .footer-widgets").css("position","static");
      }
      } stickyFooter();

      And in style.css:

      .sticky.site-footer, .sticky.footer-widgets {
      width: 100%;
      }

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>