How to Add Widgets to WordPress Theme’s Footer

I wanted to use widgets in the footer of my WordPress theme but my wordpress theme didn’t come with a footer-sidebar by default. I didn’t really wanted to change the theme just because of that. So I hacked the wordpress theme to introduce footer-sidebars. If you are looking for a tutorial that explains how you can add sidebars/widgets to the footer of your WordPress theme then keep reading.

There are really three main parts to introducing a footer sidebar/widget area in your theme:

1. Registering the Sidebar(s) in the WordPress Theme
2. Inserting the Sidebars In the WordPress Theme
3. Putting some style into the sidebars

Adding Footer Widget to a Modern Theme

Do the following if your theme is relatively new.

1. Register the footer widget area

Open the functions.php file from the WordPress Theme Editor and search for the following line of code:

register_sidebar

That should take you to the area where all the sidebars are registered in your theme.

Add the following block of code just below the other sidebar registration code (we are telling it to register 3 footer widget areas):

register_sidebar( array(
'name' => 'Footer Sidebar 1',
'id' => 'footer-sidebar-1',
'description' => 'Appears in the footer area',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
register_sidebar( array(
'name' => 'Footer Sidebar 2',
'id' => 'footer-sidebar-2',
'description' => 'Appears in the footer area',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
register_sidebar( array(
'name' => 'Footer Sidebar 3',
'id' => 'footer-sidebar-3',
'description' => 'Appears in the footer area',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );

The following screenshot is taken from the Twenty Twelve theme’s functions.php file which should give you some perspective as to where you need to insert the above code block.

2. Show the footer widget area in your theme

Open your footer.php file and insert the following block of code where you want to show the footer widgets (this will show the 3 footer widget areas if they have any widgets in them):

<div id="footer-sidebar" class="secondary">
<div id="footer-sidebar1">
<?php
if(is_active_sidebar('footer-sidebar-1')){
dynamic_sidebar('footer-sidebar-1');
}
?>
</div>
<div id="footer-sidebar2">
<?php
if(is_active_sidebar('footer-sidebar-2')){
dynamic_sidebar('footer-sidebar-2');
}
?>
</div>
<div id="footer-sidebar3">
<?php
if(is_active_sidebar('footer-sidebar-3')){
dynamic_sidebar('footer-sidebar-3');
}
?>
</div>
</div>


3. Style the footer widget area to your liking

Add the following block of CSS code to your theme’s style.css file to add some basic styling to the footer widgets you just added. Customize it a little to match your needs. Our how to use firebug tutorial should come in handy for this.


#footer-sidebar {
display:block;
height: 250px;
}

#footer-sidebar1 {
float: left;
width: 340px;
margin-left:5px;
margin-right:5px;
}

#footer-sidebar2 {
float: left;
width: 340px;
margin-right:5px;
}

#footer-sidebar3 {
float: left;
width: 340px;
}


Adding Footer Widget to an Older Theme

Do the following if the theme you are using is a bit old:

1. Register the Sidebars in the WordPress Theme

Go to the WordPress theme editor and open the Theme Functions (functions.php) file. Now Search for the following line in your Theme Functions (functions.php)

if ( function_exists('register_sidebar') )

Once you find the above line then take a look at the the next line which should look similar to one of the followings depending on how many sidebars you have:

register_sidebar(array(
or
register_sidebars(2,array(

Say for example you have one sidebar in your theme and you want to add three rows of sidebars in the footer area so you can put widgets then overwrite the code with the following:

register_sidebars(4,array(

The above will register 4 sidebars (one that you already have and three more that you are about to introduce in the footer area of your wordpress theme).

2. Insert the Sidebars In the WordPress Theme

Now lets insert the siderbars where we want them in the WordPress theme. In our case we are going to insert in in the footer area of the theme so open the Footer (footer.php) file and insert the following code just above the ‘footer’ division:

<div id="footer-sidebar" class="secondary">
<div id="footer-sidebar1">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(2) ) : ?>
<?php endif; ?>
</div>

<div id="footer-sidebar2">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(3) ) : ?>
<?php endif; ?>
</div>

<div id="footer-sidebar3">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(4) ) : ?>
<?php endif; ?>
</div>

</div>
<div style="clear-both"></div>

3. Put some style into the sidebars

Finally, lets put a little style to all the ‘footer-sidebar’ divisions that we just introduced. Open the Stylesheet (style.css) file and insert the following CSS (you will probably have to adjust the CSS to your need depending on what wordpress theme you are using).

#footer-sidebar {
display:block;
height: 250px;
}

#footer-sidebar1 {
float: left;
width: 340px;
margin-left:5px;
margin-right:5px;
}

#footer-sidebar2 {
float: left;
width: 340px;
margin-right:5px;
}

#footer-sidebar3 {
float: left;
width: 340px;
}

Hope this helps! Now you don’t have to change your beloved WordPress theme just to get footer sidebar/widget

© tipsandtricks-hq.com