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 }