Add Widgets to WordPress Footer – Simple tutorial

Wordpress Footer Widget Sidebar

In this tutorial, we will teach you the following points.

1. Why we need a footer widget to wordpress blog?
2. How to create a footer widget?
3. How to register Sidebars in the WordPress Theme?
4. How to insert sidebar in WordPress theme?
5. How to edit and make sidebar more beautiful through CSS customization ?

1. Why we need a footer widget to wordpress blog/website ?

Because Footer widget is the most important part of a blog/website for Search Engine Optimisation. We can display our website contents in a significant manner. To put dark color Footer is very much helpful for eye catching of Visitors. We can save a lot of space and use that space for putting the content in to it. So use widgets to your wordpress footer.

2. How to create a footer widget ?

We need to register the sidebars in WordPress theme. Most of the wordpress themes come without a footer widget/sidebar morethan two. So first we can register sidebars. I am going to put 4 footer widgets. Please read the below content and understand how to do it..

Go to the Dashboard, Select WordPress theme editor and open the Theme Functions (functions.php) file.  Now find the following line in your Theme Functions (functions.php)

if ( function_exists('register_sidebar') )

After reaching to the above line, 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(

Example :We 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).

3. Register Sidebar in wordpress theme

Now we can insert the siderbars where we want them in the WordPress theme. We are going to insert  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">
<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>

Now, understand how to add widgets to wordpress footer place.

5. How to edit and make sidebar more beautiful through CSS customization ?

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

All the best

• Pin It
• Share
• Tweet

Be Sociable, Share!

• 

Related posts:

1. What is wordpress ? Learn the difference between WordPress.org and WordPress.com
2. How to create wordpress.com & wordpress.org sites ?
3. How to move wordpress site to a new host or new domain?
4. How to Create DNS Delegation for Child Domain, step by step
5. step by step OSPF configuration

Tagged as: below sidebar wordpress blog, create footer sidbar widget, create footer widget, footer sidebar, footer widget making, how to add footer widget, how to configure footer widget, wordpress theme blog customisation, wordpress widget footer