Create 3 column widgetized footer in thesis theme

This tutorial show you how to add three column widgetized footer at end of the page. The Footer is very important for evey blogger because when I came across some blogs it gives some overview of your site. So, how can I make it? I tested this code in thesis 1.6. See my bottom of the webpage which I made for the widgetized footer. There is no need for configuration. You can simply create your footer in your own website.

See this video tutorial below. The Downloaded link for footer code is in zip format at the end of the post.

3 column widgetized footer in thesis theme.

1. Login to your FTP (File transfer Protocol).

2.Go to path public_html/yourdomainname/wp-content/theme/thesis_16 /lib/function/launch.php

3. Right click and edit the launch.php

4. copy this below code and paste it in custom_function.php and click save.

/*---------------------------------*/
/* WIDGETIZED FOOTER - 3 COLUMNS   */

/* register sidebars for widgetized footer */
if (function_exists('register_sidebar')) {
 $sidebars = array(1, 2, 3);
 foreach($sidebars as $number) {
 register_sidebar(array(
 'name' => 'Footer ' . $number,
 'id' => 'footer-' . $number,
 'before_widget' => '',
 'after_widget' => '',
 'before_title' => '<h3>',
 'after_title' => '</h3>'
 ));
 }
}

/*-----------------------*/
/* set up footer widgets */
function widgetized_footer() {
?>
 <div id="footer_setup">

 <div class="footer_items">
 <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 1') ) : ?>
 <?php endif; ?>
 </div>

 <div class="footer_items">
 <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 2') ) : ?>
 <?php endif; ?>
 </div>

 <div class="footer_items">
 <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 3') ) : ?>
 <?php endif; ?>
 </div>

 </div>
<?php
}

add_action('thesis_hook_footer','widgetized_footer');

5. Now go to your wordpress admin panel under the appearance tab click  widgets.

6. Now you will see sidebar 1 and 2, footer 1, 2, and 3.

7. Then, go to custom file editor copy and paste the below code into custom.css

#footer{
 background: #eeeeee;
}
.custom #footer {
 height: 100%;
 width: 100%;
 border-top:2em solid #9c9c9c;
 background: #eeeeee;
padding:0em;
}
.custom #footer a{
 border-bottom: 1px none #cccccc;
}
.custom #footer {
 text-align:center;
}
/* footer widget area setup */
#footer_setup {
 /* widgetized footer background (not footer background) */
 background: #444343;
 /* widget padding */
 padding:1.5em;
 /* margin at bottom of widgets */
 margin-bottom: 25px;
 /* do not change this! */
 overflow: hidden;
}

/* widget item setup */
#footer_setup .footer_items {
 /* contents alignment */
 text-align: left;
 /* widget width */
 width: 33.3%;
 /* space between widgets */
 padding-right: 0px;
 /* text color */
 color: #2361A1;
 /* do not change these! */
 display: inline-block;
 float: left;
 height: 100%;
}

/* widget item headers http://adwordsshop.com/wp-admin/admin.php?page=thesis-file-editor*/
#footer_setup .footer_items h3 {
 /* font size */
 font-size: 1.5em;
 /* bold or not */
 font-weight: bold;
 /* uppercase or not */
 text-transform: uppercase;
 /* space out the letters*/
 letter-spacing: 0px;
 /* font color*/
 color: #ffffff;
 /* padding under header text */
 padding-bottom: 3px;
 /* border under header text */
 border-bottom: 3px none #ffdf00;
 /* distance between border and widget text */
 margin-bottom: 5px;
}

/* do not change these! */
#footer_setup .footer_items ul li { list-style:none;
 font-size:1.4em;
 line-height:1.5em;
}
#footer_setup .footer_items ul { margin: 1em; padding: 0px; }

8. Then, click save.

9.Now,again Go to appearance tab and select widgets. By default they are     so  many widgets available. Just drag and drop into your footer. Here in my web I need related post, categories, and archives So Just drag and drop into footer 1, 2, 3, respectively.

10. Now you will see your footer in the bottom of your post.

Note: use FTP to upload the code don’t do it in straight away.

You can also download this zipfile here.

Do you have any trouble using this code post your comment below.

Related Tutorials:

1. How to Create 4 Column Widgetized Footer in Thesis Theme?
2. How to Create Wigetized Footer in Thesis Theme?
3. Widgetized Thesis Theme-Header, Content box and Footer
4. How to Place Your Ads Inside the Post of Thesis Theme?
5. How to Place Ads Box Before The Post Title in Wordpress Thesis Theme?

Tagged as: 3-column, footer, link, widget