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.

1. In the K2 RC2/styles folder, I created another folder “simplyhis” and an empty text file “simplyhis.css”
2. I edited simplyhis.css to add the following:

   #header {height:230px;}

3. Under Presentation -> Themes -> K2 Options, I went down to the Style section (referenced in Step #7 of this post). I selected the simplyhis.css style sheet.
4. Under the Header section on the same page, I uploaded and chose my header file here. This keeps it from resizing my header image for me.
5. Click the Update Options.

If you don’t know much about CSS, don’t worry. I’ll be getting into some very basic CSS so you’ll be able to make basic changes to a WordPress theme.

For my WordPress blog, simply His, I decided to build upon the theme K2. The version I just download and installed is the Release Candidate 2. This is the latest as of October 5, 2007. You should always check their site [ getk2.com ] to make sure you get the latest version.

1. Go to http://getk2.com/download/
2. Click on first download link displayed on this page. [ Download? ]
3. Unzip the .zip file. [ Zip? ]
4. FTP the contents of the zip file (everything including the main folder) to your blog’s theme directory. [ FTP? ]
   * Your blog’s theme directory should be located in /domainname.com/wp-content/themes/
5. In WordPress Admin, select Presentation -> Themes.
6. You should see the name “K2.0 Release Candidate 2″ and a thumbnail picture. Click on the picture or the text to select the theme.
7. Under Presentation -> Themes, you will see additional choices once K2.0 has been selected. Click on K2 Options.
   1. Advanced Navigation — This adds some nifty navigation to make your blog faster and easier to navigate.
   2. Archives Page — This lets readers access archived posts easier.
   3. Live Commenting — Makes it easier for people to comment without having to reload the page.
   4. Sidebar Management — By now you’ve probably heard of widgets. K2 has a Sidebar Manager that comes with the theme or you can choose to use WordPress’ Widget manager. I chose WordPress’ Widgets here because I’m most familiar with how they work.
   5. Columns — This is so cool! You can instantly change from a Single Column (which puts the sidebars below the main column) to Two Columns to Three Columns. The only drawback I see here is the Three Columns choice puts the main content (bigger) column in the middle. There is not an easy way to move it — say to have a main content column on the left and two smaller columns on the right. Easy is relative in that you *can* do this, but it will take some editing of some php files to set it up.
   6. Asides — Here you can choose to select a category as asides or not to use this at all. I have chosen No Asides right now.
   7. Style — Choosing No Style here simply takes all of the K2 design defaults. If you wanted to, you can create your own style sheet, ftp it into the Styles folder inside the K2 theme folder and choose it here. This style sheet would be loaded after the other style sheets so you could override or change things that you didn’t like in the default style. There are 2 sample style sheets here if you care to look at them.
   8. Header — Here you can upload an image for your header. Since I have chosen the 2 column layout, it tells me the default header size is 780×200px. If I try to upload an image larger than that, then it will ask me to crop it. You can also easily setup a randomized header image here. You can either upload one image at a time through this section or you can FTP images into a special folder. The special folder is found in /wp-content/themes/K2 Release Candidate 2/images/headers/. You can also rename the default Blog tab — for example if you wanted to call it Home.
8. Click the Update Options button when you are finished.

1. Find the file where you downloaded it to your computer.
2. Right-click the .zip file and select Extract All.
3. You will be asked where you want to save the extracted files, so select a place and remember where it’s putting the files. I generally take the default.
4. When finished, you can have the computer automatically open the folder holding the contents of the .zip file by keeping the box checked “Show Extracted Files” and clicking the Finish button.

When you first open FileZilla, you will want to store your website information.

1. Go to File -> Site Manager.
2. Click New Site.
3. Enter a name for the site.
4. Under Site details, you will want to put the following information:
   • Host: This is usually in the form of ftp.website.com where website.com is your domain name.
   • Port: Keep the defaults for this.
   • Server type: Use FTP unless you know for sure your web host has specified something else.
   • Log On Type: Select Normal.
   • User: Put your FTP username.
   • Password: Put your FTP password here.
5. Click the Connect button.
6. You will see that your window is divided into 2 parts. The first part on the left says “Local Site”. You will see a listing of the files and folders on your computer. Browse to the folder where the files are you want to upload.
7. On the right side, you will see under “Remote Site” a list of all the folders/files on your website. Open the folder where you want to put the files you are uploading.
8. Click and drag from the left side “Local Site” to the right side “Remote Site” and the files will begin transferring.