CSS

I came across another excellent thread in the DIY forums on how to add sidebars and widgetize the footer. I’ve adapted it to meet my needs and thought I would share it.

I’ve added 4 sidebars to the footer. Each one is 25% the width of the footer. The function is hooked directly into the footer. Here’s the code.

/*widgetize the footer */
if ( function_exists('register_sidebar') ) register_sidebars(4,array('name'=>'Footer-Sidebar %d', 
      'before_widget' => '<li class="widget %2$s" id="%1$s">',
      'after_widget' => '</li>',
      'before_title' => '<h3>',
      'after_title' => '</h3>'
    )
  );

function footer_widget(){?>
<div id="footer-sidebar">
   <div id="footer-sidebar1">
     <?php if ( !function_exists('dynamic_sidebar')
      || !dynamic_sidebar('Footer-Sidebar 1') ) : ?>
     <?php endif; ?>
   </div>
   <div id="footer-sidebar2">
     <?php if ( !function_exists('dynamic_sidebar')
      || !dynamic_sidebar('Footer-Sidebar 2') ) : ?>
     <?php endif; ?>
   </div>
   <div id="footer-sidebar3">
     <?php if ( !function_exists('dynamic_sidebar')
      || !dynamic_sidebar('Footer-Sidebar 3') ) : ?>
     <?php endif; ?>
   </div>
   <div id="footer-sidebar4">
     <?php if ( !function_exists('dynamic_sidebar')
      || !dynamic_sidebar('Footer-Sidebar 4') ) : ?>
     <?php endif; ?>
   </div>

</div> <!-- Close footer-sidebar -->
<div style="clear-both"></div>
<?php
}
add_action('thesis_hook_before_footer','footer_widget');

Footer-Sidebars 1,2,3 and 4 will now be accessible on the Widgets page in Wordpress.

Note the new divs that were added:
footer-sidebar – This div holds the sidebars in the footer div.
footer-sidebar1
footer-sidebar2
footer-sidebar3
footer-sidebar4

Here’s the code I added for the footer sidebars in the custom.css.

/*footer widgets*/
#footer-sidebar { display:block; width:100%; height: 125px; list-style-type: none;float:left;text-align:left;}
#footer-sidebar h3{ color: #3A93CC; font-weight: bold;text-decoration: underline;line-height:1.5em;}
#footer-sidebar a {color:#000;border:none;}
#footer-sidebar a:hover{text-decoration:underline;}
#footer-sidebar1{float:left; width:25%;text-align:left;}
#footer-sidebar2{float:left; width:25%;text-align:left;}
#footer-sidebar3{float:left; width:25%;text-align:left;}
#footer-sidebar4{float:left; width:25%;text-align:left;}

If you only want 2 or 3 sidebars in the footer, just adjust the code to fit your needs.

{ 4 comments }