How to add a widgetized 3 column footer in thesis wordpress theme

January 12, 2010 by: sensehow 14

Tweet

How to add a three column widgetized footer in your thesis wordpress theme?Is that your doubt?Thesis is an awesome wordpress theme and it really has a numerous options.Once it was a problem how to add three columns in the thesis wordpress theme.But now since this option is inbuilt in the thesis 1.6 that doesnt matter.
An awesome looking footer will really improve your website standardness.since the footer we are dealing here is an widgetized footer,we never need to worry about each time going into the codes to add an widget to the footer.Follow the below steps to successfully add a three column footer in the thesis.

steps:
1.Now you have to login to the ftp of your hosting account so that you are able to add the codes required for the footer.I recommend filezilla or your own choice.
2.Now go to the path public_html/domain/wp-content/themes/thesis_16/lib/function/launch.php
3.Now you have to edit the launch.php and to add the following code in that.(you could also do in the custom_function.php) And then save it and reupload.

/*---------------------------------*/
/* 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>
 <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 1') ) : ?>
 <?php endif; ?>
 </div>

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

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

 </div>
<?php
}

add_action('thesis_hook_footer','widgetized_footer');

4.After you have saved visit the widgets page in your wordpress dashboard,you will see the footer 1,2,3 there.So now you have to tweak the custom.css to show the 3 column footer as required.
5.For that,copy the below code and click custom file editor below the thesis options menu in dashboard.Paste the code in it and save.

#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; }

6.Now go back to your widgets page and add some widgets into the footer.

Visit your website….Did you see the 3 column footer?Now if you want to change the appearance of the footer then you have to change the colour scheme and font size in the code you added to the custom.css

Download the code in zip

If you have any problems post a comment,often it works fine and if you have problem do it oncemore and i hope you will get it.

Related posts:

1. How to add stylish asnio 3 column footer to thesis wordpress theme
2. Thesis-how to place ads Above the post title in thesis wordpress theme
3. How to add page navigation in thesis without openhook plugin
4. How to add clickable header banner in thesis wordpress theme
5. How to add stylish page navigation in thesis using wp-pagenavi
6. How to add social bookmarking icons in thesis and other wordpress themes