Make the Footer ‘Sticky‘

Notice:: Since Customizr 3.4.6 and Customizr-Pro 1.2.0 a new option has been added to make the footer sticky. Navigate through Appearance -> Customize -> Footer and you’ll find it 😉

June 2015 update: CSS moved from child-theme style.css (or custom-css box) to inline style through tc_user_options_style filter, due to an unwanted side effect while editing posts/pages in backend. Thanks to @Ted Cumpston and @solid for reporting this.

Feb 2015 update: Handle wp-admin bar in js.

Dec 2014 update: Fix some js typos.

Dec 2014 update: CSS reduced, Javascript Code added .

The aim of this snippet is to ensure the footer stays at the bottom of the window when your whole page content doesn’t reach the window height

Sometimes happens that someone feels the need to have a sticky footer. 🙂

As you know, Customizr is built on Twitter Bootstrap. Let’s follow its example to have a sticky footer.

What we need?

1. A div to wrap the whole page content, except the footer.
2. Some css rules.

Let’s start:

1) Add the wrap div!

In your child theme functions.php add this simple snippet:

/* Add a wrap div to the whole content except the footer */

add_action( '__before_header' , 'my_wrap_start' );
function my_wrap_start(){
    echo '<div id="wrap">';
}

add_action( '__before_footer' , 'my_wrap_end' );
function my_wrap_end(){
    /* close #wrap and add a useful div avoiding the footer
     * overlaps the page content under certain circumstances
     */
    echo '<div id="push"></div></div><!--#wrap-->';
}

2) Write some js to make all this work!

In your child theme functions.php add this snippet:

add_action('wp_footer', 'sticky_footer', 9999);
function sticky_footer(){?>
    <script type="text/javascript">
        jQuery(document).ready(function(){
            ! function($){
                "use strict";
                var $wrap = $('#wrap'),
                    $footer = $('footer#footer'),
                    $reset_margin_top = $('#tc-reset-margin-top'),
                    $html = $('html'),
                    $body = $('body'),
                    $push = $('#push'),
                    isCustomizing = $('body').hasClass('is-customizing'),
                    isUserLogged = ! isCustomizing && ( $('body').hasClass('logged-in') || 0 !== $('#wpadminbar').length ),
                    stickyEnabled = $body.hasClass('tc-sticky-header'),
                    resizeBodyHtml = isUserLogged || stickyEnabled,

                    $window_width = $(window).width();
                
                function resize_body_html(timeout){
                    if ( ! resizeBodyHtml )
                        return;

                    setTimeout(function(){
                        if ( isUserLogged ){
                            $html.css('height', '100%');
                            $html.css('height', parseInt($html.css('height')) - $('#wpadminbar').height() );
                        }

                        if ( stickyEnabled ){
                            $body.css('height', '100%');
                            $body.css('height', parseInt($body.css('height')) - parseInt( $reset_margin_top.css('marginTop') ) );
                        }
                    }, timeout ) ;
                }

                function render_sticky_footer(){
                    var $push_height = parseInt( $footer.css('height') ) + parseInt( $footer.css('borderTopWidth') ) + parseInt( $footer.css('borderBottomWidth') ) + 1,
                        $wrap_b_margin = -1 * $push_height;
 
                    $wrap.css('marginBottom', $wrap_b_margin );
                    $push.css('height', $push_height );
                }
 
                render_sticky_footer();
                resize_body_html(50);
 
                $(window).resize(function(){
                    setTimeout( function(){
                        // re-render on resizing only if an "interesting" resing occurred
                        if ( Math.abs($(window).width() - $window_width) > 50 ){
                            render_sticky_footer();
                            $window_width = $(window).width();
                        }
                        resize_body_html(50);
                    }, 100);
                });
            }(window.jQuery);
         });    
    </script>
<?php
}

3) Let’s “rule” our Customizr sticky footer!

In your child theme functions.php add this snippet.

add_filter('tc_user_options_style', 'tc_sticky_footer_style');
function tc_sticky_footer_style	( $_css ){
    $_css = sprintf("%s\n%s",
    $_css,
    "
    html, body { height: 100%;}
    #tc-page-wrap { height: 100%; }
    #wrap { 
        min-height: 100%;
        height: auto !important;
        height: 100%;
        margin: 0 auto;
    }\n"
  );
  return $_css;
}

Enjoy!