Learn Thesis Theme Fast to Build Unique and Beautiful Websites

Thesis Designer Guide is the fastest way to learn the Thesis framework.
A step-by-step guide walks you through all the essential things you need to know to become a Thesis design expert.
You don’t need to be a programmer to learn Thesis design.
The complete Thesis Designer Guide covers all the coding basics and tools needed to become a Thesis expert.

Home > Thesis Theme Tutorials > Thesis Theme Customization > How to Create Wigetized Footer in Thesis Theme?

How to Create Wigetized Footer in Thesis Theme?

by Suresh in Thesis Theme Customization,Thesis Theme Tutorials

Update: 3 column or 4 column footer can be enabled in just a click if you go with our Thesis Smart Skin or Thesis Magazine Skin. Both Thesis Skins are developed by us(FourBlogger). Check FourBlogger Thesis Skins website. And we have listed few Skins for Thesis Theme from other developers.

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.