Multi-Column Footer (Using WordPress)

FairyBlogMother's picture

They have: 20 posts

Joined: Apr 2009

Hi there. I really like the three-column footer on Zen Habits (http://www.zenhabits.net); however, I've been finding it tough to determine how to implement something similar on our blog. I think I need to do this with a combination of a three-column footer layout plus some WordPress plug-ins. If someone can point me in the right direction, I'd greatly appreciate it. Thank you.

Serenity, Simplicity, Happiness... Adventure! http://www.questforbalance.com

greg's picture

He has: 1,581 posts

Joined: Nov 2005

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>).

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

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:

<div id="homepagefooter" class="chunkyfooter">
<?php if ( !function_exists('dynamic_sidebar')
        || !
dynamic_sidebar('Homepage footer') )
?>

</div>

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.

He has: 629 posts

Joined: May 2007

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).

Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;

They have: 3 posts

Joined: Jun 2009

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?

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

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

It should just appear there when you put the PHP code to define a dynamic sidebar into your theme. It's not a drop-down called "homepage footer", it's a drop-down including the list of dynamic sidebars available in your theme. It's under Appearance > Widgets on the right side under "Current Widgets".

FairyBlogMother's picture

They have: 20 posts

Joined: Apr 2009

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

Serenity, Simplicity, Happiness... Adventure! http://www.questforbalance.com

FairyBlogMother's picture

They have: 20 posts

Joined: Apr 2009

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

Serenity, Simplicity, Happiness... Adventure! http://www.questforbalance.com

greg's picture

He has: 1,581 posts

Joined: Nov 2005

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.

FairyBlogMother's picture

They have: 20 posts

Joined: Apr 2009

(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. : )

Serenity, Simplicity, Happiness... Adventure! http://www.questforbalance.com

FairyBlogMother's picture

They have: 20 posts

Joined: Apr 2009

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.

Serenity, Simplicity, Happiness... Adventure! http://www.questforbalance.com

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

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:

if ( function_exists('register_sidebar') )
    register_sidebar(array(
'name' => 'Sidebar 1',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h2>',
        'after_title' => '</h2>',
    ));

    register_sidebar(array(
'name' => 'Sidebar 2',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h2>',
        'after_title' => '</h2>',
    ));

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

if ( function_exists('register_sidebar') )
    register_sidebar(array(
'name' => 'Sidebar 1',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h2>',
        'after_title' => '</h2>',
    ));

    register_sidebar(array(
'name' => 'Sidebar 2',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h2>',
        'after_title' => '</h2>',
    ));

register_sidebar(array(
'name' => 'Homepage footer',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h2>',
        'after_title' => '</h2>',
    ));

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

FairyBlogMother's picture

They have: 20 posts

Joined: Apr 2009

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

Serenity, Simplicity, Happiness... Adventure! http://www.questforbalance.com

FairyBlogMother's picture

They have: 20 posts

Joined: Apr 2009

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

FairyBlogMother's picture

They have: 20 posts

Joined: Apr 2009

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:

<?php
if ( !function_exists('dynamic_sidebar')
        || !
dynamic_sidebar('Homepage footer') )
?>

Thanks! --A

Serenity, Simplicity, Happiness... Adventure! http://www.questforbalance.com

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

It actually depends on how your theme is set up. Try it at the start of your footer.php file. You may have to make some other changes to the template files to get this to look right.

FairyBlogMother's picture

They have: 20 posts

Joined: Apr 2009

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

Serenity, Simplicity, Happiness... Adventure! http://www.questforbalance.com

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

Now that the footer is in your widgets admin area you can add widgets to it there. Once you've done that, take a look at the code that was generated on your page. You'll see each widget wrapped in a div tag with some unique identifiers as I described above. You can then use these to target those div's with CSS. Take a look at the code on my site to see how I did mine.

greg's picture

He has: 1,581 posts

Joined: Nov 2005

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.

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

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.

They have: 3 posts

Joined: Jun 2009

its good!

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

thanks for the share.

FairyBlogMother's picture

They have: 20 posts

Joined: Apr 2009

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). : )

Serenity, Simplicity, Happiness... Adventure! http://www.questforbalance.com

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

I'm glad it worked out for you!

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.