How to Create 5 column footer widget in thesis theme

The footer is very important part of any blog.In this tutorial I am sharing the thesis hook code for 5 columns widgetized footer.You can add the footer hook in your custom functions file of your thesis wordpress theme.

Footer is the place for copyright note or some other little information and links but It’s not only for these,It is the place for many tasks.I mean footer is a showcase of the blog.Attractive and stunning footer catches the eyes of blog readers as well as first visitor.So why don’t you pick an idea to design your blog footer.

Snapshot of the footer created with thesis footer hook.

You can see the footer of technogati.com.It’s based on thesis theme.We have created this footer in 5 columns in widgetized mode.All things are edited from Wordress widget panel.

Copy the following code and paste into your custom functions file in thesis wordpress theme.

function myFooter() { ?>

    <div id="container">
<div id="foot">
<div class=" ">
<ul class="sidebar_list">

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

dynamic_sidebar('Footer 1') ){    ?>

                    <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>

                    <? } ?>

                </ul>

            </div>

            <div class=" ">

                <ul class="sidebar_list">

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

dynamic_sidebar('Footer 2') ) { ?>

                    <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>

                    <? } ?>

                </ul>

            </div>

            <div class=" ">

                <ul class="sidebar_list">

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

dynamic_sidebar('Footer 3') ) { ?>

                    <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>

                    <? } ?>

                </ul>

            </div>

<div class=" ">

                <ul class="sidebar_list">

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

dynamic_sidebar('Footer 4') ) { ?>

                    <li class="widget">

                        <div class="widget_box">

                            <h3><?php _e('Footer 

Widget 4', '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>

                    <? } ?>

                </ul>

            </div>

<div class=" ">

                <ul class="sidebar_list">

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

dynamic_sidebar('Footer 5') ) { ?>

                    <li class="widget">

                        <div class="widget_box">

                            <h3><?php _e('Footer 

Widget 5', '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>

                    <? } ?>

                </ul>

            </div>

            <div id="copyright">

                <ul class="sidebar_list">

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

dynamic_sidebar('Footer Copyright') ) { ?>

                    <li class="widget">

                        <div class="widget_box">

                            <h3><?php _e('Copyright', 

'thesis'); ?></h3>                                    

                        </div>

                    </li>

                    <? } ?>

                </ul>

                <!-- Please do not remove these lines. If you have a 

developers license, you may remove the thesis copyright, but do not remove the copyright unless you 

have paid the $5 fee. Feel free to remove these comment lines however -->

                        </div>

        </div>

    </div>

    <? }

        add_action('thesis_hook_after_html', 'asnioFooter');

        remove_action('thesis_hook_footer', 'thesis_attribution');

        remove_action('thesis_hook_footer', 'thesis_admin_link');

        register_sidebar(array('name'=>'Footer 1', 'before_title'=>'<h3>', 

'after_title'=>'</h3>'));

        register_sidebar(array('name'=>'Footer 2', 'before_title'=>'<h3>', 

'after_title'=>'</h3>'));

        register_sidebar(array('name'=>'Footer 3', 'before_title'=>'<h3>', 

'after_title'=>'</h3>'));

register_sidebar(array('name'=>'Footer 4', 'before_title'=>'<h3>', 'after_title'=>'</h3>'));

register_sidebar(array('name'=>'Footer 5', 'before_title'=>'<h3>', 'after_title'=>'</h3>'));

        register_sidebar(array('name'=>'Footer Copyright', 'before_title'=>'<h3>', 

'after_title'=>'</h3>'));

Now give the style to your 5 columns footer.

Copy the following CSS code and paste it into your custom CSS file.

#foot {
    background: #EEF6E4;
    border-top: 0.3em solid #eeeeee;
    color: #606060;float:center;
    font-size: 12px;
    margin: 15px auto;
    overflow: hidden;

}

    #foot a { color: #606060; text-decoration: none;display:block,float:left; }

        #foot a:hover {color: #316AB1;text-decoration:none; }

    #foot span.cat, #foot h3 { /* controls all blue headings */
        color: #585D5F; font-size: 13px; font-weight: bold; letter-spacing: 1px;border:none;margin-left: 20px; }

    #foot h5 { font-size: 25px;}

    #foot ul li ul { list-style-type: none; margin-left: 20px;font-size:11px;line-height: 10px; }

    #foot ul.sidebar_list { padding: .8em 10px 0 0; }

    #foot li.widget .widget_box { background: none; border: 0;margin-left: 20px;width:120px;float:center}

    #foot .textwidget p { line-height: 22px; margin-bottom: 11px;font-size:11px;padding:2px;align:justify;}

    #foot .col { float: left; list-style: none;
        margin-top: 4px; width: 14.3%; }

    #cats {
        background: #F8F8F8;border:solid 0px #F61489;
        list-style: none;
        margin-top: 13px;
        overflow: hidden;
        padding: 10px 0 7px 10px;
    }

        #cats li {
            float: left;
            font-size: 11px;
            line-height: 1.8em;font-weight:bold;
            margin: 0 2px 5px 0;
            width: 150px;
        }

#copyright {
    border-top: 1px dotted #D6EAF9;
    clear: both;color:#B8BAB3;margin-left: 10px;
    font-size: 10px;
    letter-spacing: 1.3px;
    line-height: 4px;
    padding-top: 2px;
}

    #copyright p { font-size: 10px; }

    #copyright ul.sidebar_list, #copyright .textwidget, #copyright li.widget .widget_box, #copyright li.widget {margin:0px; padding: 0; }

/***************************************************************************/

It’s done now…..

Final Thoughts

Did you think it was more technical than what it really was? Would you use this technique on your site? If so, then let us know so that we can give you feedback.