Sticky Footer with Ultimatum Theme

Facebooktwittergoogle_plusredditpinterestlinkedintumblrFacebooktwittergoogle_plusredditpinterestlinkedintumblr

This thorny topic has bugged me for some time, ‘How to make a sticky footer with Ultimatum Theme?’ I thought that I had an answer, but, after a few days of lengthy Skype conversations with Emmanuel ARNOUD (a fellow user of Ultimatum Theme framework), I realized a completely new approach was needed. Most CSS/HTML solutions rely on certain HTML elements on the page and for the footer to be a fixed height. But we know that the footer often has quite a bit of content, meaning that its height will vary. The only solution is to use javascript, and, in particular, jQuery. So, before going any further, make sure you have jQuery loading in WordPress. I am sorry to say that you are going to have to roll your sleeves up and do a bit of coding. For beginners this will be hard. If you know WordPress at all, you will not be using a theme directly, but instead you will be using a child theme. This is especially so if you are using a theme framework, such as the one I use; Ultimatum Theme. Assuming that you already have a custom stylesheet for your child theme (mine is called custom-style.css and sits in a css folder insider the child theme folder, and is already enqueued, see this post for more details on a custom css file and the functions.php file), this is the new css to add to it:

1
.footwrapper {width: 100%;}

Note so hard, so far. By the way, if you have either html or body set to 100% height in css, you will need to remove this ‘height:100%’ css rule. Next, if you do not have one already, you need a javascript folder inside your child theme folder on your server. It is normal to name this folder ‘js’. Inside that folder, make a text file called ‘wp-sticky-footer.js’. You can copy and paste the code from below into that file, and save it:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function positionFooter() {
  var mFoo = jQuery(".footwrapper");
  if (((jQuery(document.body).height() + mFoo.outerHeight()) < jQuery(window).height() && mFoo.css("position") == "fixed") || (jQuery(document.body).height() < jQuery(window).height() && mFoo.css("position") != "fixed")) {
    mFoo.css({ position: "fixed", bottom: "0px" });
  } else {
    mFoo.css({ position: "static" });
  }
}
jQuery(document).ready(function () {
  positionFooter();
  jQuery(window).scroll(positionFooter);
  jQuery(window).resize(positionFooter);
  jQuery(window).load(positionFooter);
});

Lastly, we need to tell WordPress to load this javascript file, that it is dependent on jQuery being loaded as well, and to load it after the page has loaded. Edit the functions.php file that you will find in your child theme folder and paste this code into the end of that file:

1
2
3
4
5
6
// sticky footer
function wp_sticky_footer() {
  wp_register_script( 'wp-sticky-footer', get_stylesheet_directory_uri() . '/js/wp-sticky-footer.js', array('jquery'), '1.0.0', true );
  wp_enqueue_script( 'wp-sticky-footer' );
}
add_action( 'wp_enqueue_scripts', 'wp_sticky_footer', 99 );

The only other note I would add here is that i found it necessary for my site, which has UberMenu installed and used for the main top navigation menu, that I had to set the ‘Menu Bar Alignment’ to Full Width and the ‘Menu Bar Width’ set to 100%. At any other settings the menu would break as the screen width became too narrow.

I hope you managed to follow this short tutorial. Bye for now.

Categories: Ultimatum.