Custom three-column widget-ready footer for Thesis

<?php
/*
* custom_functions.php
* To provide a custom three-column widget-ready footer to your Thesis theme.
*/

// Remove the existing Thesis links from the footer
remove_action('thesis_hook_footer', 'thesis_attribution');
remove_action('thesis_hook_footer', 'thesis_admin_link');

// Add three columns for our Footer widgets
add_action('thesis_hook_footer', 'customFooter');
function customFooter() {
?>

<div class="col Footer1">
<ul class="sidebar_list">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer1') ){ ?>
<li class="widget">
<div class="widget_box">
<h3><?php _e('Footer Widget 1', 'thesis'); ?></h3>
<p>You can edit the content that appears here by visiting your Widgets panel and
modifying the <em>current widgets</em> there.</p>
</div>
</li>
<?php } ?>

</ul>
</div>
<div class="col Footer2">
<ul class="sidebar_list">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer2') ) { ?>
<li class="widget">
<div class="widget_box">
<h3><?php _e('Footer Widget 2', 'thesis'); ?></h3>
<p>You can edit the content that appears here by visiting your Widgets panel and
modifying the <em>current widgets</em> there.</p>
</div>
</li>
<?php } ?>
</ul>
</div>
<div class="col Footer3">
<ul class="sidebar_list">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer3') ) { ?>
<li class="widget">
<div class="widget_box">
<h3><?php _e('Footer Widget 3', 'thesis'); ?></h3>
<p>You can edit the content that appears here by visiting your Widgets panel and
modifying the <em>current widgets</em> there.</p>
</div>
</li>
<?php } ?>
</ul>
</div>
<div class="cb"></div>

<?php
}

// Register our three new columns as "Sidebars" so they can take widgets
register_sidebar(array('name'=>'Footer1', 'before_title'=>'<h3>', 'after_title'=>'</h3>'));
register_sidebar(array('name'=>'Footer2', 'before_title'=>'<h3>', 'after_title'=>'</h3>'));
register_sidebar(array('name'=>'Footer3', 'before_title'=>'<h3>', 'after_title'=>'</h3>'));

?>

{ 5 comments… read them below or add one }

Willie Jackson December 12, 2009 at 7:51 am

Hi Anthony—

I’m working on a site for a client right now, and this is exactly what I need. Thanks for making this available.

Reply

mktanny October 27, 2009 at 3:09 am

Just superb-this is what i was looking for.
thnx

Reply

Anthony July 3, 2009 at 11:10 am

Hi Jim,

I’ve looked at the code you posted in the forum you linked to. You’ve got a single widget area there, and you intend to put 3 widgets in it.
So your CSS needs be something like:

div.col.Footer1 ul.sidebar_list { width:100%; }
div.col.Footer1 ul.sidebar_list li.widget { width:30%; padding:0; margin:0 1%; float:left; }

So width+margin makes each widget 32% of the total width, and they are set to float beside one another.

If you want to change the text alignment on individual widgets, you could do:

.Footer1 li.widget.ThisWigClass { text-align:left; }
.Footer1 li.widget.OtherWigClass { text-align:right; }

Where .ThisWigClass are the specific class of your 1st, 2nd, or 3rd widgets.

Does that make sense?

Reply

Jim June 30, 2009 at 9:00 am

I found you via DIYThesis forums (http://diythemes.com/forums/customization/8595-header-images-footer-widgets.html)
I like this… but I am a bit new at all this and I want the default to be “left align” and on my blog they are list vertically, I would like to have three listed horizontally. Can you give me the coding to change it?

Thanks
Jim

Reply

sidsevensix June 21, 2009 at 7:24 am

perfect..
Thanks man

Reply

Leave a Comment

{ 3 trackbacks }