(+84) 463.28.7979

How to add footer widget area in Thesis Theme


In this article I will show you how to add a footer widget area in Thesis theme for WordPress. The objective of this article is to create three footer widget areas with minimal code required. So let see how to get our footer widget area. The following code will creates 3 footer widget area. I have add the required CSS code to arrange the widget areas. You can add your own CSS to adjust the styling and color if the background and text.

The code to create the footer widget area

The below code creates a 3 column footer widget area

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?php }
//Add hook to thesis footer to display the Widgetized footer
add_action('thesis_hook_footer', 'customFooter');
//3 column footer widget area
function customFooter() {
?>
<div id="footerwrap">
<div class="footercol Footer1">
<ul class="sidebar_list">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer1')){ } ?>
</ul>
</div>
<div class="footercol Footer2">
<ul class="sidebar_list">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer2')) { }?>
</ul>
</div>
<div class="footercol Footer3">
<ul class="sidebar_list">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer3')){ } ?>
</ul>
</div>
<div id="clear"></div>
</div>
<?php
}
//Register the footer widget areas
register_sidebar(array('name'=>'Footer1','before_title'=>'<h3>','after_title'=>'</h3>'));
register_sidebar(array('name'=>'Footer2','before_title'=>'<h3>','after_title'=>'</h3>'));
register_sidebar(array('name'=>'Footer3','before_title'=>'<h3>','after_title'=>'</h3>'));
?>

Styling the code

1
2
3
4
5
6
7
8
9
10
11
.custom .footercol {
float: left;
padding: 10px;
text-align: left;
width: 31%;
}
.custom #footer {
background: none repeat scroll 0 0 #DDDDDD;
border-top: 2px solid #888888;
text-align: center;
}

Where to Insert the code

All you need to do is copy the code to create the footer widget area in yourcustom_functions.php file of your Thesis theme and copy the styling code in your custom.cssfile.

Steps

  1. Login to your WordPress Dashboard
  2. Goto Thesis > Custom File editor
  3. Paste the styling CSS in custom.css file and save it
  4. Select custom_functions.php file from the drop down and paste the code to create the footer here and then save it
  5. Now if you go to Appearance > Widgets, you will see that 3 extra widget area has been created names Footer1, Footer2 and Footer3

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>