Genesis Framework Hidden Footer

If you scroll down to the bottom of this site, you’ll see that you can scroll past the content and my site footer will be ‘revealed’. Visually, the effect is that the site content is sliding up from infront of a hidden footer, it’s pretty neat and something I’d seen implemented on a variety of other sites, so I dug into their code and implemented it myself.

This tutorial is pretty specific to sites using the Genesis Framework, as it makes use of the framework’s extensive hooks. It should be achievable with some of the other Frameworks and their hooks, but you’ll need to adapt the code to fit.

It’s pretty easy to achieve with just a few simple steps:

1. Unregister the default Genesis footer.
2. Register a new widget area.
3. Add markup for the widget area, position it after the site container using Genesis hooks.
4. Fix the widget in position at the bottom of the page with CSS.
5. Add some jQuery so we can always see the widget area.

So without any further ado, let’s get started…

1. Unregister the default Genesis footer

Genesis Framework makes this unbelievably easy, providing great functions for both our needs. To do this, just add the following code to your theme’s functions.php:

Remember, don’t include the opening <?php tag, that’s just included so the Gist shows correct syntax highlighting!

2. Register a new widget area

Again, Genesis is our friend. We can use a Genesis function to register our new widget and it will take care of attributes etc. Add this code just after the previous code in your theme’s functions.php:

3. Add markup for widget area

Next, use the genesis_after action hook to add the widget’s markup. This will position it at the very end of the page, after the site-container.

Add the following to your functions.php:

4. Fix the widget position with CSS

We need to fix the widget at the page bottom as static. Also, the effect becomes less visually successful on smaller mobile devices, so we also want to set this to only happen on screen sizes above 1024px. Given the content is already static, the best way to do this is with mobile first (min-width) css.

Adjust the following to fit your theme’s aesthetic, and add it to its style.css:

The site-container must have a background-color, and a higher z-index than the widget area (ie be infront of it). The add-hidden-footer-margin class will be added dynamically with jQuery later, this ensures that the widget isn’t hidden if the browser doesn’t load the .js for wharever reason.

5. Add jQuery to control visibility

We need to add a margin to the site-container so that the user can ‘scroll past’ the end of the container, and in doing so reveal the hidden widget area. This margin must be set at the exact height of the widget area itself, otherwise the user wouldn’t be able to scroll far enough, or would scroll too far.

This is where we use jQuery to add the class dynamically, but only if the screensize matches the mobile-first css rules.

Creat a hidden-footer.js file and place it in /wp-content/themes/your-theme/js/. The add the following code to it:

Once that is done, we need to enqueue our script properly, add the following to your functions.php:

That should be it, now you should have a footer just as cool as mine!