Sridhar Katakam

Genesis and WordPress Tutorials

How to add a fixed bottom section in Genesis

by 11 Comments

Gary wants to know:

How can I add a bottom section, that stays fixed, just like I see on the StudioPress demo pages .. such as on:

http://my.studiopress.com/themes/genesis/#demo-full

In this article I present the steps to register a custom 'fixed bottom' widget area and displaying the contents of widgets placed in this widget area and using CSS so this section always appears stuck at the bottom of screen with main content going underneath it.

2014-01-01_17-20-56

I will then take it a step further and expand it so that we register two widget areas and then place a horizontal opt-in form at the left and social icons in the right.

2014-01-01_17-21-56

Adding a simple fixed bottom section

Add the following in functions.php:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • This is an amazing tutorial, Sridhar! I won’t be using this on my own site, but I do have plans to use it on a few upcoming projects (I’ll let you know how it goes). Thanks for sharing!

    -David G.

    Reply

  • There’s a problem with the single fixed bottom code. On any view except mobile the fixed area covers up the footer-widgets and site-footer areas.

    I’m guessing that the fix is to add an equal amount of margin-bottom to the site footer to compensate for the fixed bottom height?

    Reply

    • With a fixed widget box there’s really no way I know of to determine it’s height in all cases. So if there’s a paragraph in the fixed widget box it will reflow based on screen width and the height will change. It’s a tricky problem.

      Reply

  • I want to add a fixed bottom widget that stops before the footer (instead of after). Would I just replace “genesis_after” with “genesis_before_footer”?

    Thanks,

    -David G.

    Reply
    • >