Multi-Column Footer (Using WordPress)

You shouldn't need plugins to accomplish this in Wordpress.

The archives is simply a link to the archives, the "go back in time" is just next page.
And the "62 attractive commenters" is just a link to an article. Maybe article with most comments. I couldn't be sure without seeing their source code (which I cannot do).

You could contact them and ask .

As for the styling of the three links, there are MANY ways to do that. A simple row of links with a space and a "|" character will do. They have chosen to put it in an unordered list (<ul>).

Do you mean the three-column footer on the articles page, like here?

http://zenhabits.net/2009/06/feng-shui-on-steroids-design-your-space-to-...

Although he has 4 columns there so I'm not sure what you're talking about. I have a three-column footer on my home page:

http://meganmcdermott.com

For my home page I'm using this code in my Main Index template:

If you wanted it to show on all pages you'd probably put this into your footer template. I just wanted to use mine on the home page.

This code is creating a DIV call homepagefooter. This is targeted in my CSS to get these to lay out properly.

The PHP bit says that if the dynamic sidebar function is available in Wordpress, make this a dynamic sidebar. This means that you can put widgets into this space, just as you would in a sidebar.

This section is called "Homepage footer". In my wordpress admin panel, under widgets, I have a second sidebar in the drop-down called "Homepage footer". Now I can add widgets to that space. Whether you need a plugin or not depends on what you need to put there. Mine are from the default set of widgets that come with Wordpress.

Each widget is wrapped with its own div with class="widget" and a unique ID and class so you can target them using CSS as well. Let me know if you need more help with that, or you can use Firebug to look at my CSS.

I'm not quite sure how zenhabits is creating those category blocks like that. There's probably some PHP code you can put into a text widget to grab X number of posts from a certain category.

Those blocks are DIVs of fixed width, a small margin-right, all floated left. Compute the width + margin to fit as many boxes to a row that you prefer, and you have a multi-column layout like that - any number of columns (in reason).

I've been wanting to do something similar to this, so thanks for posting your notes everyone!

Megan, I'm not sure if I completely understand how you set up the drop-down called "Homepage footer" in your WordPress admin?

Hi there. Thanks so much for the replies. I think Greg misunderstood me. I know what is there; what I don't know is how to accomplish it for myself (the code, what goes where, the design, etc.). : ) Megan may be right-on... but it will be interesting to see whether I can make it happen. Thanks very much. I'll report back w/ results or pleas for help! ; ) --A

Megan said:

This section is called "Homepage footer". In my wordpress admin panel, under widgets, I have a second sidebar in the drop-down called "Homepage footer". Now I can add widgets to that space.

I only have two sidebar sections (Sidebar 1, Sidebar 2). Question is, how can I make a third section for myself called "Footer"? I'd like to include it on all pages, not just on my homepage.

Thanks very much. --A

When you said "3 columns in footer" I presumed you meant the three links, as the site you linked to only had that in the footer - 3 links.
And I was just trying to explain/guess how the site you linked to created those links within their code.

In Wordpress you can just edit the footer page
/wp-content/wp-themes/name _of_your_theme/footer.php

And changes you make in there will be changed in all the areas where get_footer(); function is called.
Usually this function is in all areas at the bottom of the code. In index.php, archives.php, page.php, single.php, etc.
All depends on your Theme setup.

And you will have a CSS file (usually style.css) where you can edit the footer styles or add your own.

(I should mention... my web skills are limited. In addition, I'm new to WordPress.)

Sorry about that -- I misspoke, Greg. I think ZH used to have three columns (similar to Megan's homepage), but now there are something like four boxes across.

I understood Megan's response to mean that adding this php bit to my footer creates an area in the footer that I can widgetize (with unordered lists of top blog posts, top commenters, etc.) -- this is what I'm trying to do. The question I still have is... how to get this new area (footer acting as dynamic sidebar) to show up in the dropdown menu, so that I can select it and add widgets to it.

Thanks again. I feel like I'm getting closer to a solution. : )

Meet said: Megan, I'm not sure if I completely understand how you set up the drop-down called "Homepage footer" in your WordPress admin?

Megan said: It should just appear there when you put the PHP code to define a dynamic sidebar into your theme.

Mine doesn't appear there (automagically)... so I'm wondering if I put the php code in the wrong place.

Oh, now I remember, there was something else I had to do there. Sorry about that! In your theme you should have a Theme Functions file (functions.php). At the top you should see something like this:

What you need to do is add another section after that, like this:

So now you're registering a new sidebar with the name "homepage Footer".

Thanks, Megan. That worked! I named mine "footer" (because I want it on every page), and it appears in the dropdown menu... interesting thing, though... it appears twice! I'll play around with it later tonight and see what I come up with. Thanks so much for the help. --A

I must have two footers defined in there now. One is wonky/offset. Help? Gracias!

I took it out for now, but I'll put it back and try again if someone can advise me exactly WHERE in my footer.php file I need to put the code that Megan provided, above:

Thanks! --A

I found out why I had two footers... I'd just duplicated the code; but now I've removed the double. So now I have two sidebars (as before) and just one footer (acting as a sidebar). Now I need to figure out how to make three areas into which I can drop widgets (like Megan's). --A

The code Megan gave you is to go within the function.php file, not footer.php.
Wordpress automatically looks for a functions php file within your theme folder, and loads anything in that file if found.

So it would be in:
/wp-content/wp-themes/name _of_your_theme/functions.php

It is possible there is no functions.php file there, this depends on the theme you are using. If there isn't you will have to create one.

This topic has inspired the latest article at A Padded Cell:

http://www.apaddedcell.com/how-create-multi-column-wigitized-footer-word...

The article includes the instructions I posted above, as well as instructions for creating the columns using CSS.

its good!

I also like the idea. Something popped up in my mind to work with this kind of layout.

thanks for the share.

Megan, I'm so impressed (and appreciative) that you took the time to make this into a full-blown tutorial!

I finally had the chance to get back to it last night, and I was able to put in a multi-column footer with very little trouble. Now all that remains is some minor format tweaking... and for our main author to decide which of her content she'd like to feature in this new area.

Thanks so much for helping us increase the "real estate" on our site. The multi-column footer will be a great way to feature additional content right from the home page (and every page). : )

I'm glad it worked out for you!