Creating a widget ready footer in Wordpress

It is a common site now to see a widget ready footer on a wordpress powered site, it adds some extra areas to add widgets that would maybe look out of place in the sidebar. It is good to have widgets at the bottom of the blog for links to other posts and maybe some details about yourself. In this tutorial I am going to show you how to create 3 footer widget areas which can be edited from the admin area of your wordpress installation. I am going to use the default Kubrick theme for this tutorial.

Continues below...

-

Step 1 Create the CSS

The first thing to do is to create the CSS for the footer area. Open the style.css file of the Kubrick theme in your code editor and add the following code, we are going to call it the subfooter:

#subfooter {
width:730px;
margin-left:15px;
margin-right:15px;
height:300px;
background-color:#d5d6d7;
clear:both;
}

#subfooter .widget {
width:240px;
height:300px;
float:left;
}

#subfooter .widget .inner {
padding:10px;

}

The above code creates an area called subfooter where and a widget class, in the HTML code, I will add three instances of the widget class and with the float:left; option these will be aligned next to each other.

-

Step 2 The HTML

Open the footer.php file and add the following code before the <div id=”footer”> code:

<div id="subfooter">

<div class="widget"><div class="inner">
Widget 1
</div></div>

<div class="widget"><div class="inner">
Widget 2
</div></div>

<div class="widget"><div class="inner">
Widget 3
</div></div>

</div>

Now if you view your blog you should see at the bottom of the page something that resembles this:

-

Step 3 Making it widget ready

Currently this isn’t widget ready which means that you would have to manually add the code into each widget through the footer.php file. In this step I am going to show you how you can make this widget ready so that you can add/edit widgets from the Widgets page in your admin area. To do this we use the functions.php file, so open it into your code editor.

You will notice at the top of the functions.php file the following:

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));

Change this to the following:

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));
register_sidebar(array('name'=>'subfooterleft'));
register_sidebar(array('name'=>'subfootercenter'));
register_sidebar(array('name'=>'subfooterright'));

What this does is registers 3 sidebars called subfooterleft, subfootercenter and subfooterright which will correspond to the left, center and right widgets in the subfooter.

Continues below...

-

Step 4 Adding the Widgets

To add the widgets go to your admin area and click the Design > Widgets tabs. You will see a drop down menu which will say “Sidebar”, click this and you will notice 3 more options:

Choosing one of the subfooter options and clicking Show will allow you to add widgets from the left column on the page, I only advise adding one widget to each subfooter widget area. To save your setup click Save Changes.

Now if you go back to your blog you should have something like this:

-

Step 5 Making it neater

So we have it all setup and working now but it doesn’t look that great.

Add the following code to the style.css file.

#subfooter li {
list-style-type: none;
list-style-image: none;
}

#subfooter li ul {
padding-left:0px;
font-size:12px;
}

#subfooter a {
padding:5px;
width:90%;
text-decoration:none;
clear:both;
display:block;
}

#subfooter a:hover {
background-color:#1a6198;
color:#FFFFFF;
}

-

Result

And there you have it, a widget ready subfooter for Wordpress.

You can download all the files here in .zip format.

1,040 views