How to Create a 3 Column Widgetized Footer in Thesis Theme

Requirements

  • WordPress
  • Thesis Theme

Welcome back to thesis customizations. In the last tutorial we learn how to add a background image to thesis navigation menu. In this tutorial we will see how to create a 3 column widgetized footer in thesis theme.

The default thesis theme do not have any widgetized footer. We will create one by writing a custom Php function. Let’s start to learn how to add a widgetized footer to our thesis theme.

What are we Going to Create?

Our default footer in thesis theme looks like this.

How to Create a 3 Column Widgetized Footer in Thesis Theme

Our Custom Widgetized footer looks like this.

How to Create a 3 Column Widgetized Footer in Thesis Theme

Create a 3 Column Widgetized Footer in Thesis Theme

To add widgetized footer to our thesis theme we need to follow 3 important steps.

  1. Register the footer
  2. Write a function and hook it to our theme.
  3. Styling the footer

Registering Out Footer

Add the below code in your custom-functions.php file located in custom thesis theme folder.

[php]

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>’
));
}
}

[/php]

We have now registered our 3 footers. You can see this by going to “Appearance” -> “Widgets”. As we have create 3 footers they will be named as footer 1, footer 2, footer 3 since we named it as ‘footer-‘.$number in the above code.

Hooking Footers to Thesis Theme

We will add the widgetized footer to thesis theme just before the default footer. Hence we will use the hook name “thesis_hook_before_footer”. If you do not know much about hooks, then reading how to use hooks in thesis theme will help you.

Add this code just below where you pasted the above code.

[php highlight="3" language="<code></code>"]

function widgetized_footer() {
?>
<ul id="footer_box" class="clearfix">
<li class="footer_items">
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘Footer 1′) ) : ?>
<?php endif; ?>
</li>
<li class="footer_items">
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘Footer 2′) ) : ?>
<?php endif; ?>
</li>
<li class="footer_items">
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘Footer 3′) ) : ?>
<?php endif; ?>
</li>
</ul>
<?php
}
add_action(‘thesis_hook_before_footer’,’widgetized_footer’);

[/php]

Now add some widgets to the footer for testing. You will see the footer like the one below. This is because we have not yet styled them.

Create a 3 Column Widgetized Footer in Thesis Theme

Styling the Footer

Our footer looks plain and is not well formatted. We will add some styles to make it look attractive. Add the below code to your custom.css file.

[css]

ul#footer_box {
list-style:none;
}

.custom #footer_box{
width:900px;
margin: 0 auto;
margin-top:10px;
background:#282828;
padding:10px;
color:#FFFFFF;
}

.custom #footer_box .footer_items{
float:left;
width:31.5%;
margin:2px;
font-size:14px;
font-family:Georgia;
padding:5px;
background:#444444;
}

.custom #footer_box .footer_items ul{
list-style:none;
}

.custom #footer_box .footer_items ul li a{
color:#FFFFFF;
}

.custom #footer_box .footer_items ul li a:hover{
text-decoration:underline;
}

.custom #footer_box .footer_items h3{
border-bottom: 3px double #888999;
color: #FFFFFF;
font-size: 18px;
font-variant: small-caps;
font-weight: bold;
letter-spacing: 0;
line-height: 30px;
margin: 0 0 15px 0;
text-transform: none;
}

[/css]

Our Footer looks good, but the background applied to “footer_box” div element is not applied completely.

Create a 3 Column Widgetized Footer in Thesis Theme

This is because we have added a div inside div whose height is not mentioned. So the div cannot calculate the height itself. There is a trick to overcome this. We make use of clearfix hack.

You can see the highlighted code in step 2 (Hooking footer), where we used class=”clearfix”. This is used to fix the error which occured above. We have added the class “clearfix” but haven’t defined. We will define them now. Add these lines in custom.css file.

[css]

.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

.clearfix {
display: inline-block;
}

html[xmlns] .clearfix {
display: block;
}

* html .clearfix {
height: 1%;
}

[/css]

How to Create a 3 Column Widgetized Footer in Thesis ThemeNow our 3 column widgetized footer in thesis theme looks cool and attractive. You can add any no of widgets and the background will expand automatically to fit in the footer. Similarly you can add 2 column or 4 column or even any number of columns to your thesis theme. I will explain how to do this in the next tutorial.

If this has helped you then let us know. You can also comment your problem and i will help you solve.

2 Responses to “How to Create a 3 Column Widgetized Footer in Thesis Theme”
  1. Marc B April 14, 2012
  2. Guide to Finland March 31, 2013

Leave a Reply

Your email address will not be published. Required fields are marked *