Put a CSS Sticky Footer in Your WordPress Theme

My blog doesn’t have a sticky footer and I want one. When my content isn’t long enough the footer likes to come up from the bottom of the browser. Not cool. Ryan Fiat’s CSS Sticky footer is a simple and effect way to implement sticky footers on your WordPress blog. Googling “sticky footer” I noticed though that there’s a new method being used to implement a sticky footer without the use of an empty ‘push’ div. Great! We will be using the new CSS sticky footer method to implement a footer that stays at the bottom on all browsers.

CSS Sticky Footer WordPress

Implementing a sticky footer can seem a bit tricky, but we’ll clear things up for your in this article. Googling the topic brings up a gazillion listings of creative ways people are making footers stick to the bottom of the browser. Some are better than others, but I’ve found that using Steve Hatcher’s CSS Sticky Footer (a very similar sticky footer to Ryan Fiat’s). Kinda an off topic note, but I also noticed that his site CSS Sticky Footer has been higher ranked than Ryan’s… does that mean his method is better? Hmm, well… no empty ‘push’ div makes me think so. Ok, Let’s get started!

Let’s Understand the Sticky Footer Concept First

If you’re here, you probably have a footer that likes to ride up to the bottom of your content container. The solution we will implement places the footer wrapper outside of a main wrap that holds all your general content. From there, we will use the power of cascading style sheets to force the footer to stay put at the bottom of the page using some creative and effective styles.

Open Header.php in your WordPress Theme Folder

Before we start anything let’s open our workspace up so we can work efficiently. Once you have all your tools in place navigate to your WordPress theme folder and open the header.php file.

Add the Opening Wrap DIV Tag

Before all your content and everything starts add two opening div tags above your main wrapper with the id of “container” and “wrap”:

See that I have added the “container” div after the body tag as well as “wrap”.

Open footer.php

Make sure that the “container” or “main” divs do not wrap the footer container. The footer must be outside the container div for this solution to work:

Great! Now if we look in Firebug (a tool every web developer should use) then we see that the footer is indeed outside the main container div but is still riding up the content:

Proper CSS Sticky Footer DOM

This footer is not sticking yet

Footer Empty Space

Open Your WordPress Theme’s Stylesheet and Let’s Make this Footer Stick

Now it’s time for some CSS Magic. First ensure that you have height: 100% for your body and html tags

html, body {
        height: 100%;

Now add Min-Height to the Container/Wrap (or whatever you named it)

I named mine container but in the CSS Sticky Footer example they use “wrap” so yours may be named differently. Either way, ensure it has min-height=100% on it:

#container {
	min-height: 100%;

Now for the Wrap

The “wrap” div we created will push our footer down using padding and also we’ll implement a float fix using the wonderful overflow:auto css property:

#wrap {
	padding-bottom: 150px;
}  /* must be same height as the footer */

Finally Let’s Style the Footer

Now that our container and wrap are using the appropriate CSS properties it’s time to twerk out the footer. Add the following to your CSS footer id or class:

#footer {
        position: relative;
	margin-top: -150px; /* negative value of footer height */
	height: 150px;

Some Minor Cross-browser Compliance Cleanup

As all Web Developers know, browsers do not all like to render code the same as one another. As usual, IE needs some special needs and so does Opera:

For Opera Add the Following CSS

#footer {position: relative;
	margin-top: -150px; /* negative value of footer height */
	height: 150px;

For IE Add the Following into your Head

IE doesn’t like to play nicely so in your header.php add the following in between your head tags

A Working CSS Sticky Footer

Happy Sticky Footers!

I hope you enjoyed this article! I found that sticky footers are very useful and are a common request for web designers to implement. If you are having trouble understanding this article then please comment below, we’d be happy to hear from your. If you liked it please share to your friends and don’t forget to stay in touch!

Leave a Reply

Your email address will not be published. Required fields are marked *