This 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.
works fine on classifiedEngine theme. Thanks
Thanks this worked on the genesis theme. Was looking for this.
Thank you a lot ! Awesome publication !
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!
I used your code. The result was exactly what i was looking for without complicated codes and plugins. Just a big thank!!!!!
I am going to apply this trick..
Thanks
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
Hi John,
Thanks a lot, This is a great topic!
I didn’t find anything on google
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!!!
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
Thanks a lot man! Just implemented your code on my site and Im really satisfied. Check it out if you want. Cheers!
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!
This worked great. I am just trying to figure out one small piece of this. Is there anyway to get rid of the bullet points in the footer?
Kevin, you can use CSS to suggest that there be no bullets, but not all Web browsers will necessarily honor it.
Here is the CSS documentation to create the no bullet style:
http://htmlhelp.com/reference/css/classification/list-style-type.html
Cheers,
John P.
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
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
How did you fix the problem? I have the same issue.
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?
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.
John:
Thanks for the quick fix. The off-center columns I had in my footer were driving me crazy!
hi mate. I have done all but there is error when I put code in footer.php
This post is serious cool. I very like this post. I have been searching for it.
Currently, I been switching from blogspot to wordpress. This tutorial sure helps me a lot. I already know how to do 3 column footer in blogspot, just now I just want to try 3 column footer in wordpress. Its really works. I appreciate more if this 3 column can be widgetized in your next post. Thank you very much.
Thank, i will try to do that, my blog http://www.arquigrafico.con need that!
I am using thesis theme.
Thanks John, it´s basic to css coders but usefull stuff to ppl like me with weak memory
This is great…thank you soooo much for posting…it’s the first link I came to upon doing a search for this topic on google and it’s the last place I had to look!! my new site redesign is going to look great with the type of footer!
GREAT…
Thanks for the help.
was wasting my time
Thanks. I just copied the style to my website footer. Now it is looking much better.
Thank you ! :)
Hello John,
Your tutorial has been very useful for mu purposes, so I have translated it into french on my blog:
http://hongservane2.free.fr/?page_id=694
Please let me know if you want more official aknowledgements on the page. Thanks a lot for sharing,
Hgsvn
It is a good article,thanks for your sharing.
I was looking for the same code for making my footer better. Thanks a lot for sharing Great tutorial.
Great tutorial – I’ll be sure to keep coming back.
-Josh
Wow this is what I,ve been loooking for this last 2 days.., so I manage to add the column but I’ve lost a sight here how or where I use the column…., any ideas…
Thanks.
Thanks a lot. This was exactly what I was looking for.
You saved me a lot of time!!!
Hello John,
I implemented this trick in my blog, I would like to do some fine tuning in this, Can you please visit my site and suggest how I can include these three columns before the copyright message band.
Also please guide how I can add stuff like recent posts,recent comment etc.
Thanks
Awesome tutorial! I had tried copying the css & stuff from another theme, but it didn’t work at all. Your quick and easy tutorial worked like a charm!
Would someone please be kind enough to explain what to change to make these columns center justified.
Thank you.
it worked perfectly!!! nice and great, all i need to do is tweak the colors, fonts, and background to make it a little more cunning :)
thanks!
I’ll have to give this a try and my style, if I can figure it out..lol
Awesome, i’ve been trying to figure out how to simply integrate a nice footer into my site for a while now, thanks!
This is exactly what I was looking for … and BTW it worked on my site … the platform is Squarespace, so I wasn’t sure if it would work.
Of course, now I have to go work on it, as it currently still says “more stuff here.”
Thanks again!
Tanya Ryno
LIFT Magazine
wow thats what i was looking for, it is really stated in a good fashion,
Thank you
Johnny