How to Add 4 Column Footer to Thesis Theme

This tutorial is exclusively for Thesis Framework, a new templating system for WordPress. Create any sort of layout for your website using Drag & Drop Builder.

Share This Article:

If you are looking for code to Add 4 Column Footer to Thesis Theme then follow this guide, which helps to add Widgetized footer section to Thesis Theme. Apart from header it is also necessary to have an elegant footer, where you can display content like popular posts, popular tags etc.

add-4-cloumn-footer-thesis-theme

Add 4 Column Footer to Thesis WordPress Theme

You need to understand this code, so that it would be very easy and you can also add 3 column or 5 column footer in the same manner. This entire process can be divided into three parts:

Note: It is recommended to safely Back Up your Thesis Theme before proceeding with this Guide.

Register Sidebars for Widgetized Footer in Thesis

First of all you need to register custom sidebars and here is the code for that. Copy & Paste the below code to custom_functions.php file and update it.

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

You have just registered some sidebars and now proceed to next step.

Check How to Display Related Posts in Thesis Theme

Setting Up Footer Widget Sections in Thesis Theme

Below code helps to set up footer widget sections, so that you can add any sort of content by using Drag and Drop functionality in Widget Section. Add this code to custom_functions.php (just below the above code) and update it.

4-column-footer-thesis

/** Start of Setting up Footer Widgets 1,2,3,4 */
function widgetized_footer() {
?>
<div align="center">
<div class="clear"></div>
<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 class="footer_items">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 4') ) : ?>
<?php endif; ?>
</div>
<div class="clear"></div>
</div>
<?php
}
add_action('thesis_hook_after_footer','widgetized_footer');

/** End of Setting up Footer Widgets 1,2,3,4 */

In this code a total of 4 sections are added and you can modify it to accommodate just 3 columns in thesis footer. You can notice 4 custom widget sections registered with names Footer 1, Footer 2, Footer 3 and Footer 4. Names of these sections can also be changed based on the requirement.

Recommended Thesis 2.0 Release Date and Features List

CSS for 4 Column Footer Section in Thesis Theme

One more step to make those 4 footer columns more attractive is to style them using CSS. Add below CSS code to custom.css file and update it.

add-footer-columns-thesis-wordpress-theme

#footer_setup { width:980px; padding-left:0px; padding-top: 0px;overflow: hidden; clear:both;margin-top:0px;}
#footer_setup .footer_items {text-align: left; width: 230px; padding-right: 0px; padding-left: 15px; display: inline-block; float: left; height: 100%; font-size:14px; padding-top:20px; padding-bottom:20px; color:#666; }
#footer_setup .footer_items h3 {color:#4266AD; font-size: 22px; letter-spacing: 0px;padding-bottom: 2px;margin-bottom: 5px; font-family:'georgia',Arial,sans-serif;font-weight: bold;}
#footer_setup .footer_items ul li {list-style: none; padding:5px 0 5px 15px;}
#footer_setup .footer_items ul li a {font-size: 14px; font-family:arial;font-weight:normal;line-height:22px;color: #999999; }
#footer_setup .footer_items ul li a:hover {color:#ffffff; text-shadow:none; }
#footer_setup .footer_items ul { margin: 0px; padding: 0px; }

You can also change this code to suite the color scheme of your present thesis theme. Additional things like background image, borders etc can also be added to this 4 column footer in thesis theme.

If you find this article really useful, consider sharing it with your network. If you need help in setting up 4 column footer in thesis theme, drop a comment.

This tutorial is exclusively for Thesis Framework, a new templating system for WordPress. Create any sort of layout for your website using Drag & Drop Builder.

Genesis is the most flexible WordPress theme framework that comes with tons of options. We have been using Genesis on all of our blogs and recommending the same to you. Every bit of it is coded according to the standards. Give it a try!

Speak Your MindComments Policy →

*

Looking for More Awesomeness?

Read previous post:
display-banner-ads-thesis-theme-header
How to add Header Widget in Thesis to Display Banner Ads

Add Header Widget in Thesis to Display Banner Ads and effectively utilize free space.  Also we can use custom functions...

Close