Banana Munki

A cluttered sidebar can be ugly. A good way to keep a WordPress blog looking better is a classic three column footer for your stuff. I like when blog owners show some organization sense.

I am going to show you how I added three widgetized columns to an empty footer.

1:

We are going to need the functions.php file. You can find this located in your theme folder. Path example: banana.munki.se/wp-content/themes/mytheme/functions.php. You can create this file if your theme doesn’t use one.

if ( function_exists('dynamic_sidebar') )
register_sidebar(array('name'=>'Footer widget left',
'before_widget' => '
',
'after_widget' => '

',
'before_title' => '
',
'after_title' => '

',
));
if ( function_exists('dynamic_sidebar') )
register_sidebar(array('name'=>'Footer widget middle',
'before_widget' => '
',
'after_widget' => '

',
'before_title' => '
',
'after_title' => '

',
));
if ( function_exists('dynamic_sidebar') )
register_sidebar(array('name'=>'Footer widget right',
'before_widget' => '
',
'after_widget' => '

',
'before_title' => '
',
'after_title' => '

',
));

The code above is placed/pasted into the functions.php file. It generates information needed to create and display widgets.

2:

The following piece of code should be placed where you want the three columns to be visible, the footer. Open up your footer.php and see where to place this, usually right after div id=”footer”. The footer.php file of your template can find in your theme folder. Example path: banana.munkise/wp-content/themes/mytheme/footer.php

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer widget left') ) : ?><br /> <?php endif; ?><br /> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer widget middle') ) : ?><br /> <?php endif; ?><br /> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer widget right') ) : ?><br /> <?php endif; ?><br />

The above code make the three column widgets appear on your WordPress blog.
Note: The br /’s rendered with the above code are automatically inserted within my blogpost and shouldn’t be added by you, you can safely (and should) erase them. I am sorry about this. :/

3:

The final step is to tell the columns how to behave. We want to display them horizontally, on a row next to eachother. We make this happen with CSS. Make note that you may just (most likely) need to adjust the width and/or margin to make fit with the theme that you are using. The following piece of CSS should go in your theme style.css file located in your theme folder. Example path: banana.munki.se/wp-content/themes/mytheme/style.css

.widget_footer {float: left; margin: 0 20px 20px 0; width: 300px;}

The class footer_widget was used in the first piece of code pasted into the functions.php so now we just have to use it in the style sheet to tell the columns how to behave and how to display the content of the widgets on the blog.

4:

Now you can navigate to the widget section of your WordPress installation and start organizing.

Final note:

Additionally a div clear=”both or similar may need to be inserted in the footer.php after the code to clear the float! This could depend on wheither or not your theme already have a solution.

Good luck with this. If you have any questions I’d be glad to answer them.

Happy Widgetizing!