How to add footer widget area in Thesis Theme

In this article I will show you how to add a footer widget area in Thesis theme for WordPress. The objective of this article is to create three footer widget areas with minimal code required. So let see how to get our footer widget area. The following code will creates 3 footer widget area. I have add the required CSS code to arrange the widget areas. You can add your own CSS to adjust the styling and color if the background and text.

Update: Check out this Ultimate Thesis Options Plugin. This will help you customize your Thesis Theme too easily. Like centering menu, Right Align menu, adding a second menu, adding Footer widget areas and many more options.

The code to create the footer widget area

The below code creates a 3 column footer widget area. Put this just after the first line of your custom_functions.php file i.e just after <?php

//Add hook to thesis footer to display the Widgetized footer
add_action('thesis_hook_footer', 'customFooter');

//3 column footer widget area
function customFooter() {
?>
<div id="footerwrap">
<div class="footercol Footer1">
<ul class="sidebar_list">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer1')){ } ?>
</ul>
</div>
<div class="footercol Footer2">
<ul class="sidebar_list">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer2')) { }?>
</ul>
</div>
<div class="footercol Footer3">
<ul class="sidebar_list">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer3')){ } ?>
</ul>
</div>
<div id="clear"></div>
</div>
<?php
}

//Register the footer widget areas
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>'));

Styling the code

.custom .footercol {
    float: left;
    padding: 10px;
    text-align: left;
    width: 31%;
}
.custom #footer {
    background: none repeat scroll 0 0 #DDDDDD;
    border-top: 2px solid #888888;
    text-align: center;
}

Where to Insert the code

All you need to do is copy the code to create the footer widget area in your custom_functions.php file of your Thesis theme and copy the styling code in your custom.css file.

Steps

  1. Login to your WordPress Dashboard
  2. Goto Thesis > Custom File editor
  3. Paste the styling CSS in custom.css file and save it
  4. Select custom_functions.php file from the drop down and paste the code to create the footer here and then save it
  5. Now if you go to Appearance > Widgets, you will see that 3 extra widget area has been created names Footer1, Footer2 and Footer3

About Sudipto

Hi I started this blog to make a unique place on the internet where I can share what ever little knowledge I have. Read More about me here. This is also a revenue sharing blog and I share 100% of the revenue earned from guest articles to the respective author. If you would like to post articles into this blog then read the Guest Blogger rules.
This entry was posted in Theme Customization, Thesis Theme, Wordpress and tagged , . Bookmark the permalink.
  • Agnes Sim

    this code can use in blogspot?

    • http://letusbuzz.com sudipto

      No Agnes, this code is specifically for Thesis theme for wordpress and cannot be used for blogspot.com

  • http://www.wordpressdeveloperin.com wordpress developer

    its work well thanks buddy……………

  • Lijin Lakshmanan

    This is great!

  • http://www.cheshirescreations.com Jayne

    I have been searching for a footer code for thesis – thanks heaps….but Im getting a parse error on line 31…

    • http://letusbuzz.com sudipto

      you should take care that the code is inside

      If you still have error then you can always send me the code that you are using I will have a look

      • Jayne

        Hi Sudipto
        Thanks for the offer of help, I actually found a 4 column one which Im happy with – not sure why I got an error with this code….but all is sorted

  • http://letusbuzz.com sudipto

    If think the code didnot get pasted properly. As you know even a missing ‘ or ; can make a difference.
    If you are having problem in using the code then you can use the Ultimate Thesis Options Plugins http://wordpress.org/extend/plugins/ultimate-thesis-options/ to add footer and header widget areas

  • http://www.facebook.com/markcijo Mark Cijo

    Your Ultimate Thesis Option Plugin is good. However if you could get us some control on the  style that would be great. I am looking at sugarrae.com and was wondering how they did the  4 coulmn below the header and I am trying to do it for my blog which is under dev. Can we add color to the sidebar content area and the bg. ?

    • http://letusbuzz.com sudipto

      The plugin is under development and requested features will be added in the upcoming versions. To create the header widget areas you can use the plugin. For color and styling you need to know a little bit of CSS which you can add to your custom.css file