{"id":188,"date":"2017-10-18T11:49:56","date_gmt":"2017-10-18T11:49:56","guid":{"rendered":"https:\/\/learningcurve.xyz\/?p=188"},"modified":"2017-10-18T13:10:50","modified_gmt":"2017-10-18T13:10:50","slug":"genesis-framework-hidden-footer","status":"publish","type":"post","link":"https:\/\/learningcurve.xyz\/?p=188","title":{"rendered":"Genesis Framework Hidden Footer"},"content":{"rendered":"

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.<\/p>\n

This tutorial is pretty specific to sites using the Genesis Framework<\/a>, 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.<\/p>\n

It’s pretty easy to achieve with just a few simple steps:<\/p>\n

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

    So without any further ado, let’s get started…<\/p>\n

    1. Unregister the default Genesis footer<\/h2>\n

    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<\/span>:<\/p>\n