Now I have removed my Christmas theme formatting, I am ready to work more on my blog design.. Having made the move to Wordpress from Blogger not long before I added the festive colors and images, I had not spent any time on the real theme. I know I am doing this backwards - most sane people would decide on a theme before showing their blog face in public. The reason, I want to talk through the process I am going through as I do my design as a way of teaching anyone who may be interested.

To alleviate the problem of those resource hungry social networking widgets making page load time slow, I have now relegated them to the footer. Not being a php expert - (not much past the “hello dolly” stage) I had to search for a way of doing this. I had to piece together various bits of information here and there so I thought it an idea to put it all together for your edification and delight. (I am wondering how many left after reading the last part, thinking how boring). Anyone using anything other than Wordpress may as well take their leave at this point too, although I would much rather you click on recent posts or archives and stay a while longer on this blog of course.

Rather than having to add widget codes directly into my footer.php, I have added “sidebar” elements into the footer. This means I can add widgets to them from the Wordpress dashboard widget page, which gives me more flexibility if I change their content..

How to add a sidebar to a Wordpress footer

Firstly I had to tell Wordpress to insert new sidebars into my theme by altering the footer.php file.

As I already have two sidebars and wanted 3 columns in the footer, I needed to let the Wordpress architects know that instead of two sidebars I now needed 5. (the architects are those that work on the basic structure and design - in my imagination that is). For this I had to alter the functions.php file in my theme folder.

Edit functions.php:

Find the section in your theme folder’s functions php file that says something similar to the following- except the number will not be 5 yet:, it may be 1 or 2. Change the number to reflect how many sidebar elements you want in total (that is the number of sidebar(s) in your sidebar area plus how many you want in your footer) . If you do not have a functions.php file but have a widget enabled theme create the functions.php file including all of the code below.

<?php

if ( function_exists('register_sidebar') )

    register_sidebars(5,array(

        'before_widget' => '',

        'after_widget' => '',

        'before_title' => '<h4>',

        'after_title' => '</h4>',

    ));

?>

Now the architects have drawn up their plans, the construction team come in to put the new sidebars in place. They need to build the new “sidebar” elements into the footer. I added mine at the very top of the footer straight after:

<div id="footer">

Add to footer.php:

<div id="footer-sidebar" class="secondary">

   <div id="footer-sidebar1">

     <?php if ( !function_exists('dynamic_sidebar')

      || !dynamic_sidebar(3) ) : ?>

     <?php endif; ?>

   </div>

   <div id="footer-sidebar2">

     <?php if ( !function_exists('dynamic_sidebar')

      || !dynamic_sidebar(4) ) : ?>

     <?php endif; ?>

   </div>

   <div id="footer-sidebar3">

     <?php if ( !function_exists('dynamic_sidebar')

      || !dynamic_sidebar(5) ) : ?>

     <?php endif; ?>

   </div>

</div> <!-- Close footer-sidebar -->

<div style="clear-both"></div>

I gave my new elements the id of “footer-sidebar” but you could call them anything you like as long as the name is unique - that is, different to any other id name you have in your theme.

That done, when your site loads, the builders come in and add the sidebars into the footer. Imagine how busy they are grabbing all the bits needed to put your page together.

The problem is the building is is still very basic. Now we need some interior designers to add a bit of style and finesse. Crack open your style.css file and pretty up the sidebars so they sit side by side of a width that is going to suit the sort of content you want in them. I made mine all the same width, measured so they stretch the full width of the footer: I gave the whole footer a border. I could have added borders around each sidebar, added background color etc, but wanted to keep it simple for these instructions.

Add to style.php

#footer-sidebar {

  border: 1px solid #cccccc;

  display:block;

  height: 260px;

}

#footer-sidebar1 {

  float: left;

  width: 300px;

  margin-right:20px;

  }

#footer-sidebar2 {

  float: left;

  width: 300px;

  margin-right:20px;

 }

#footer-sidebar3 {

  float: left;

  width: 300px;

 }

Note that the divisions have the same names as I gave them when adding them to footer.php

As, by the time you read this, I may have altered the formatting of the footer once more to add extra styling elements here is an image of what it looks like after adding the above styling.