Tutorial: Add 3 Centered Columns to WordPress Footer

John P.

OMB 3 Column FooterThis post describes how to add variable width, centered columns of stuff to the Worpress footer. Not sure what I mean? Well, look at the bottom of this site.

  • These columns are fluid width, so it works in different browser resolutions and as you resize the page the columns resize.
  • The columns maintain their centering on the page even as it is resized.
  • You can put anything you want in the columns, though I’ve got text and lists in them for demonstration purposes.
  • It should work with other blogging platforms as well as plain old HTML Web sites.


First, you need to add the following three lines of code to your Stylesheet (you can put them anywhere, but I suggest at the very end). Depending on the theme you are using it is likely either called stylesheet.css or stylesheet.php.

#footercolumns {padding:2em 0 0 10%}
#footercolumns .block {float:left; width:30%; margin:0 0 0 2.5%}
#footercolumns .first, * html #footercolumns .first{clear:both; margin:0}


Next, add the following code to your page footer. In WordPress it is called Footer.php and you should add these before the </body> code.

<div id="footercolumns">
<div class="inside">
<div class="block first">
<h3>First Column of Stuff</h3>
<ul>
<li>Here is some stuff.</li>
<li>And some more stuff</li>
<li>Still more stuff</li>
</ul>
</div>
<div class="block">
<h3>Second Column of Stuff</h3>
<ul>
<li>Here is some stuff.</li>
<li>And some more stuff</li>
<li>Still more stuff</li>
</ul>
</div>
<div class="block">
<h3>Third Column of Stuff</h3>
<ul>
<li>Here is some stuff.</li>
<li>And some more stuff</li>
<li>Still more stuff</li>
</ul>
</div>
</div>
</div>
<br clear="all" />

Now, I can’t guarantee this will work for 100% of the themes out there, but it should work for most of them. Keep in mind that if you are using a fixed width theme, especially one that is not centered, this may look strange. In that case you may want to switch to a more flexible and accessible theme like my Rapid Access.

Comments

  1. says

    This was the best tutorial that I’ve found yet and I’ve tried a lot to get this footer links/sitemap to work. This is the first clear concise guide that worked. Many thanks!

  2. says

    Hi mate,

    I have a question. is it possible to get 2 columns and the left one bigger and the right one normal
    So you have one column (1/2) and 1 column on the place of 3

    I hope you can help me

  3. evelkova says

    Hey, John
    Very nice tutorial! I just have one question, and I would greatly appreciate if you would be able to answer me, but how did you set a color to the footer. I have tried several things, but nothing happens..
    Thanks a lot in advance!!!

  4. says

    Many thanks John. I’ve googling and most of the tutorial are talking about creating footer widgetized and this tutorial is very helpful for me

  5. says

    This is great! Working on a client footer that needs a little love. I added a div height for the #footercolumns to push the second footer down which worked perfectly. Thank you!

  6. says

    Hey @Mads; how did you get your columns to align right because I’m having the same problem. Also, what is the name of your content slider. I love that one. Thanks

    And John, if you could tell me, it would be great. Why my columns are appearing as
    column 1

    column 2

    column 3

    instead of

    column 1 columns 2 colums 3

    Do you know what may have caused this error? I am using wordpress 3.0.1

  7. says

    Hey John! I have tried using this guide, but it just wont work. I get the three colums like this:

    column 1

    column 2

    column 3

    instead of

    column 1 columns 2 colums 3

    Do you know what may have caused this error? I am using wordpress 3.0.1

  8. says

    How about in the Thesis Theme? I’ve tried to use the code and put it in the footer.php but the result is, the stuff is appearing in my header and not in the footer. Any help?

    • says

      Roceller,

      First, install the Thesis OpenHook Plugin.

      Then, down at the very bottom of the plugin configuration you will see areas for Before Footer, Footer, and After Footer. Try putting the code in one of those and you should be good to go. :-)

      John P.

Leave a Reply

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