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 }
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.
Just superb-this is what i was looking for.
thnx
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?
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
perfect..
Thanks man
{ 3 trackbacks }