How to Create Wigetized Footer in Thesis Theme?

In order to use these theme more effective we should customize footer because we can add more thing in footer. When you are trying to customize footer widgetization is more preferable because if your widgetized your footer we can add anything in footer and also easy to add widget like recent comments, author biography using text widget, categories, you can also add your entire you tube channel in footer. I previously explained about how to create fixed 3-column wigetized footer.

In this video tutorial deals about how to widgetize your thesis footer by using the side bar widget in thesis theme. These footer widgets are similar to the sidebar widgets available in thesis. By using your css code you can designed your columns whether it is 2 or 3 or4. also if you want you can widgetize entire width of the footer other wise you can widgetize part of the footer area.

To build footer widgets first we need to create widget box in wordpress admin. To do this copy and paste the following code in custom_functions.php.

/***BUILD FOOTER WIDGET ***/
register_sidebars(1,
array(
'name' => 'Footer',
'before_widget' => '<li id="%1$s">',
'after_widget' => '</li>',
'before_title' => '<h3>',
'after_title' => '</h3>'
)
);
function widgetized_footer() { ?>
<div id="footer_1">
<ul>
<?php thesis_default_widget(3); ?>
</ul>
</div>
<?php }
add_action('thesis_hook_footer', 'widgetized_footer', '1');
/***FOOTER WIDGET END***/

The above code I have used the thesis default sidebar widgets to create our footer widgets. If you are having only two widget boxes sidebar_1, sidebar_2 in wordpress admin use  thesis default widgets(3). If you are having more widget boxes in wordpress admin (example 5) you should replace 3 as 6 in the code thesis default widgets(6).

To paste the above code in custom_functions.php file use ftp.

The path is public_html/fourblogger.com/wp-content/themes/thesis_16/custom/custom_function.php.

Once you pasted the above code, Copy and paste the following code in custom.css file.

/***FOOTER widjet ***/
.custom #footer_area, #footer_area .page{background: #222;}
.custom #footer_area {color: #ccc; padding-top: 0em; text-align:center; border-top: 3px solid #666;}
.custom #footer {border-top:none; text-align:center;}
.custom #footer a:hover {color: #fff; text-decoration: none; }
.custom #footer_1 {text-align:left; border-bottom: 1px solid #333; }
.custom #footer_1 ul.sidebar_list li.widget {text-indent:0; color: #eee; width:23%; margin-right:0%; float:left;}
.custom #footer_1 ul.sidebar_list li.widget h3 {text-indent:0; padding-top:0.2em; color:#ccc; font-size:22px; font-family:georgia;}
.custom #footer_1 ul.sidebar_list li.widget a {color: #fff; border-bottom:0; padding:0.2em;}
.custom #footer_1 ul.sidebar_list li.widget a:hover {color:#ccc; padding:0.2em;}
/***FOOTER END***/

The above css code you want  2 column footer replace widget li width as 47%

For 3-column use 31% , for 4 use 23%. You can fix whatever you want. Also change heading style by modifying items in widget h3. But the above mentioned 3-column witgetized footer article the columns are fixed we should use fixed three columns. The advantage of fixed three column wigetized footer is we can add number of widgets in one single column.

To paste the above code in custom.css file. Use the below path Thesis options/custom file editor/custom.css .

Once you placed the above two code your footer has been widgetized. To see this goto wordpress admin. Select ‘widgets’ under appearance tab.

Right sidebar we are having the widgets sidebar1, sidebar2, and  Footer.

In side the footer widget you can add recent posts,tag and etc by drag and drop the widget  now visit you site which is having widgetized footer. Its looks like the below image.

Share your experience in comment section.

Related Tutorials:

1. How to Create 4 Column Widgetized Footer in Thesis Theme?
2. Widgetized Thesis Theme-Header, Content box and Footer
3. Create 3 column widgetized footer in thesis theme
4. Thesis Theme Customization Tutorials for Footer Round-Up
5. How to Place Ads Box Before The Post Title in Wordpress Thesis Theme?

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