How to Create a Widgetized Footer for your Thesis Theme

Requirements

  • Thesis Theme
  • CSS Basics
  • Php Basics

Remember what we created in the last tutorial? we had Created a 3 column Widgetized footer in thesis theme. But we just created a 3 column widgetized footer. What if you need a single column widgetized footer? or you need 2,3,4 or sometimes 5? You can create any number of columns and widgetized footers. In this tutorial we will see how we can create a widgetized footer for your thesis theme.

What we will be creating?

We will not be creating anything, but we will be learning how to create a widgetized footer for your thesis theme. You will learn how to create 1 column, 2 column, 3, 4 column and so on upto any number of columns for your footer.

How to Create a Widgetized Footer in Thesis Theme?

To create a widgetized footer we will follow 3 steps. The first 2 steps will be explained and the 3rd is left to you.

  1. Registering the footer
  2. Hooking the footer to thesis theme.
  3. Styling the footer with CSS

Registering the Footer

First we need to register the footer so that it becomes widgetized. We can then drag and drop our widgets into the footers we created so that it shows up in our theme.

First look at the below code. Let’s consider that the maximum number of columns for the footer we like to have is 5. Further you can add any number to register the footers.

[php]

<?php
if (function_exists(‘register_sidebar’)) {
$sidebars = array(1, 2, 3, 4, 5);
foreach($sidebars as $number) {
register_sidebar(array(
‘name’ => ‘Footer ‘ . $number,
‘id’ => ‘footer-‘ . $number,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘<h3>’,
‘after_title’ => ‘</h3>’
));
}
}

[/php]

What does the above function do?

The above function registers 5 footer widgets. As you pass 5 numbers in the array, 5 widgets are registered. Each footer is given an id as footer-1, footer-2 and so on till 5. You can change the id if needed. This id’s can be used for individual styling of footer using CSS. The “before_title” and “after_title” is given an h3 tag. You can use other tags if you like.

You can go to “Appearance” -> “Widgets” and see that there will be 5 footer widgets available with name footer 1, footer 2, footer 3, footer 4 and footer 5. Here you can drag and drop widgets. This works exactly the same as sidebar.

You can observe that the widgets are not displayed on the theme. This is because we have created the widgetized footer but haven’t added them to the theme for displaying.

Adding the Footer to thesis theme

Add this function in your custom-functions.php file and i will explain it later.

[php]

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

[/php]

First we create a div “footer-box” which holds all the footer widgets. Each column of the footer are enclosed in a list items. If you know how the widgetized sidebar is coded then it is easy to understand this.

If you want all the 5 column footer to be displayed then mention all the 5 footers in the list item. If you need just 1 column footer then only the first list item should be mentioned, The rest of the code is removed. similarly if you need only 2 column footer only 2 list items are used.

Compare the above code and the below code to know the difference in usage. The above code displays all the 5 column footer and the below code displays only 2 column footers.

[php]

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

[/php]

Similarly you can register any number of footers and then display any number of columns in the footer. Just keep a note on the code so that you can alter it and choose the number of columns you want in the footer.

Styling the Footer

I am not going to style the footer. You can style the footer yourself if you are good at CSS. This is because a 5 column footer needs a particular style and a 2 column and 3 column needs different styles based on the width set for the theme.

By using this code explained in the tutorial you can create any number of columns for footer. If you have any doubts about this then take a moment to comment.

3 Responses to “How to Create a Widgetized Footer for your Thesis Theme”
  1. balaji July 24, 2012
  2. Howard February 24, 2013
    • Howard February 24, 2013

Leave a Reply

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