This was first published on Open Source Maven on October 10, 2007.
I’m so excited! I just can’t hide it! {Imagine Pointer Sisters singing}
Lorelle on WordPress wrote “Customizing Your WordPress Theme Footer” back on September 30th. She gave some great examples on how to customize and use the footer of your theme for more than just a basic link back to WordPress. I thought of a different way and I’ve just figured out all the code you’d need to add to give you 2 columns at the bottom (actually outside of your technical footer div). I’ve done it here, so if you scroll to the bottom, you will see a red border on the left and a green border on the right. Here’s the code and references to the files you add them to for the K2 theme. You may be able to use this on other themes as well, but K2 is what I’m using here.
You will find the functions.php file inside the K2 Theme directory. If your theme does not have a functions.php file, create a text file with the code I’m sharing here and save it as functions.php. This code is pieced together courtesy of Automattic’s Widgetizing Themes article.
Add to functions.php:
<?php
if ( function_exists('register_sidebar') )
register_sidebars(4,array(
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h4>',
'after_title' => '</h4>',
));
?>
Notes: The number 4 is the total number of sidebars I’m using here, but because I only want the main content column and 1 right sidebar (sidebar #1), sidebar #2 is hidden. If I do add a widget to sidebar #2, it will display inline with sidebar #1. This is due to the way K2 is setup. If I change the layout options in K2 to have 3 columns, then sidebar #1 and sidebar #2 will display on either side of the main content column. The h4 tags for before and after the title are so it will pick up the styles in the default K2 style sheet. You may adjust this if you want.
In your theme folder, you will want to locate the footer.php file. Most likely you will see something along the lines of <div id=”footer”> {some various code and text} </div> — you will want to put the following before that <div>. I put the following information right after the <div class=”clear”></div> (first line) which is what you’ll see in the K2 theme.
Add to footer.php:
<div id="bottom" class="secondary">
<div id="bottom1">
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar(3) ) : ?>
<p>Dynamic Sidebar 3 not working.</p>
<?php endif; ?>
</div>
<div id="bottom2">
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar(4) ) : ?>
<p>Dynamic Sidebar 4 not working.</p>
<?php endif; ?>
</div>
</div> <!-- Close bottom -->
Notes: The first id, #bottom, is a div or box (if you want to think of it like that) containing both of the sidebars I want to put at the bottom. I will be able to add styling to #bottom so it will look uniform across the bottom (like perhaps a solid background color). The class=”secondary” continues the styles from the K2 sidebar style sheet but this can also be overridden. The first div, #bottom1, is where I call sidebar #3 to be displayed. If something is not working correctly, the text “Dynamic Sidebar 3 not working.” will be displayed instead. The second div, #bottom2, is where sidebar #4 is called. It will display similar text if something happens and the widgets do not display.
For this site, I’ve created a special osm style directory with an osm.css file. If you need help in creating this with the K2 theme, follow these instructions. The following is what I added to style the divs I created above.
Add to osm.css (special style sheet):
#bottom { }
#bottom1 {
float: left;
width: 420px;
border: 1px solid red;
}
#bottom2 {
float: right;
width: 420px;
border: 1px solid green;
}
Notes: You’ll see I put a colored solid border around each of the divs (#bottom1 and #bottom2). This is so I could see where my boxes or divs where displaying at. I will be removing this line, but I’m going to leave it for instructional purposes right now. The float:left and float:right declarations tell the divs where it will line up inside the container div which is #bottom. You can change the width if you’d like one to be bigger than the other, or if you want more space in between them.
As it is right now, I do not have any padding between the border and the actual widget text. I’m going to be doing some additional styling tomorrow. I’ll take screen shots to put in this post so you can see where you’ll be if you follow these directions.
**Edited** I’m adding a screen shot of the bottom as it looked at the end of this tutorial.
Comments are closed.