A few people asked (OK, OK, two people asked) how to achieve the ‘hidden area’ we have at the bottom of this site at the time of writing.
Incase I amend our site design – very likely, here is a demo so you can see what we’re talking about (you can fork the code yourself via codepen by changing the view to editors view and changing the CSS and JS).
You can see the effect working on screen widths 1200px or wider, the widget area is fixed at the bottom of the screen and only becomes visible once the user has scrolled passed all the other content on the page.
There are a couple ways of doing this, this is not the exact method we used, but if you are intending to add this to a client’s site and the height of the widget area will be unknown, then this is our recommended method;
Let’s get into it;
Here are the steps we need to do,
- Register a new widget area
- Add markup for the widget area, positioned after the site-container
- Conditionally place the widget area on selected pages (optional)
- Add styling to fix the widget area to the bottom of the screen
- Add some jQuery to ensure we can always see the full widget area
1. Register a new widget area
To register a widget area named ‘hidden-footer’, add this to your functions.php
2,3. Add markup for widget area
We now need to decide where & when this widget area appears throughout the site.
We need it to appear at the bottom of all other content and outside of the site-container. We’ll choose for it to appear on every page apart from the front page.
Add the code below to your functions.php file;
4. Add basic styling
We want the hidden/fixed effect to only happen on large screens (1200px and higher) and to remain as static content on smaller screens. Mobile first CSS is the easiest way of achieving this as the content is already static.
Tip: The site-container must have a background and have a higher z-index than the widget area. The ‘.add-margin’ class, as you will see as you read on, is added by the jQuery we add. This is needed to ensure that the widget content isn’t hidden if the browser doesn’t load the js. If the js isn’t loaded, then the content remains static – and visible!
5. Add some jQuery
To allow the widget area to become visible at the bottom, we need to add a margin to the site container. This allows the user the ability to scroll passed the end of the container and to see the widget area in all it’s glory.
However, we don’t want them to scroll too far or not enough, it must be the exact height of the widget area itself.
This is where jQuery helps us.
Create a file named ‘hidden-footer.js’ and place in /wp-content/themes/your-theme/js/. Add the following to the file;
This code is telling the browser to wait until the full document is loaded, then to get the height of the widget area. Then to use this value to determine how much margin is applied to the bottom of the site container. If the browser is resized, as the content in the widget area could cause the height to change, the calculation is done again.
To get this js file enqueued, on every page of your site apart from the front page, add this to your functions.php file;
Now just add some content to your new widget area and you’re ready to go.
Tip 2: This effect can look great when the widget area has a smallish height, for horizontal menus, short call to actions, for example, but is not recommend if the widget area starts to become nearly as high as the browser window. This can cause a bad user experience as it forces the user to scroll quite far before being able to read the content at top of the widget.
I hope this inspires you to try something similar on a future project. Let me know on twitter if you do!