24 July 2008 - Posted in CSS, HTML, Wordpress
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.
-
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.
-
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.
Sammy said...
You should make an IPB forum skinning tutorial.
July 25th, 2008 at 12:31 pm
Mohsen said...
Great article!
July 26th, 2008 at 4:48 am
dlv said...
perfect…the info that i was looking for, thanks for the tutorial
thanks a lot !!!
adeux!
August 7th, 2008 at 8:32 pm
Aizacks said...
Thx! I was looking for this!
August 8th, 2008 at 4:05 am
Alan said...
I am using the K2 theme which has a different sidebar code that doesn’t have the mentioned lines above and I don’t know anything about php code.
I tried pasting
register_sidebar(array(’name’=>’subfooterleft’));
register_sidebar(array(’name’=>’subfootercenter’));
register_sidebar(array(’name’=>’subfooterright’));
directly into the sidebar file but it didn’t do anything. Any ideas?
September 20th, 2008 at 4:56 am
Simon North said...
Hey Alan, you should be putting it in the functions.php file, not the sidebar.php file.
September 22nd, 2008 at 9:23 am
About Online Tips said...
Thanks for sharing the detailed steps.I was looking for this
September 22nd, 2008 at 6:15 pm
Alan said...
Thats actually what I meant to say, I don’t know why I said sidebar. K2’s function.php file looks like this
Would this even be possible with K2?
September 23rd, 2008 at 1:05 am
Alan said...
Well I guess pasting the php code in here doesnt work to well, if you want you could dl it real quick from
http://kaytwo.googlecode.com/files/K2%20Release%20Candidate%207.zip
September 23rd, 2008 at 1:30 am
Alan said...
nothing?
September 26th, 2008 at 2:53 am
Simon North said...
Sorry about the wait Alan, being very busy lately. I would say that you have to add it to the bottom of the functions.php just before the ?>
[sourcecode language="javascript"]
< ?php
// Current version of K2
define('K2_CURRENT', '1.0-RC7');
// Is this MU or no?
define('K2_MU', (isset($wpmu_version) or (strpos($wp_version, 'wordpress-mu') !== false)));
// Define our folders for Wordpress
define('K2_STYLES_PATH', TEMPLATEPATH . '/styles/');
define('K2_HEADERS_PATH', TEMPLATEPATH . '/images/headers/');
// Define additional folders for Wordpress mu
if ( K2_MU ) {
define('K2_MU_STYLES_PATH', ABSPATH . UPLOADS . 'k2support/styles/');
define('K2_MU_HEADERS_PATH', ABSPATH . UPLOADS . 'k2support/headers/');
}
// Are we using K2 Styles?
define('K2_USING_STYLES', get_stylesheet() == get_template());
// Number of sidebars to use
define('K2_SIDEBARS', 2);
// Default Header Sizes
define('K2_HEADER_WIDTH', 950);
define('K2_HEADER_HEIGHT', 200);
/* Blast you red baron! Initialise the k2 system */
require_once(TEMPLATEPATH . '/app/classes/k2.php');
K2::init();
register_sidebar(array(’name’=>’subfooterleft’));
register_sidebar(array(’name’=>’subfootercenter’));
register_sidebar(array(’name’=>’subfooterright’));
?>
[/sourcecode]
September 26th, 2008 at 1:22 pm
Alan said...
Ya thats what I thought too but nothing. I get three little columns I can manually code stuff into but there is no interaction with my widget manager.
September 29th, 2008 at 10:44 pm
Alan said...
I actually just tried this with the default theme, and the “subfooterleft” widgets will show up on the list but nothing I add to them shows up on the actually website. I am running the latest version of wordpress though, maybe they have changed some things since you wrote this.
September 29th, 2008 at 10:59 pm
Michael said...
Alan, if you download the sample code, and use the subfooter block from the footer.php file, instead of the sample code given in the first part of Step 2 above, it will work. The code given does not match, and does not contain any hooks into the subfooterleft, subfootercenter, or subfooter right widgets.
October 23rd, 2008 at 1:49 am
Michael said...
Basically, the author forgot to include the part about writing the functions into the footer.php file.
October 23rd, 2008 at 1:53 am
indir said...
Thanks but I don’t need it. I use different ways to make it. Some day maybe need..
October 23rd, 2008 at 2:53 pm
mck567 said...
Thanks, this helped alot =D
October 30th, 2008 at 9:07 pm
Katie said...
I have the “fog” template that I’m using. Everything shows up, including the options in the theme editor/widgets, but when I add widgets, they aren’t actually showing in the footer. Plain text shows up, but not the widgets. Any ideas?
November 11th, 2008 at 4:45 pm
Danny said...
Hey Simon, this was great.
I’m a complete newbie to wordpress (started yesterday!)although I have dabbled in dreamweaver quite a lot.
I followed your script to the letter, I did have to alter a couple of things (location in script)because I was using a different template and I didn’t want the subfooter above the footer but below!
worked first time!
I was wondering if you can help with this issue for me, now I have the footer widget ready, I would like to use a widget called better blogger to randomize links upon each refresh.
Only problem is though I have already used it in my sidebar and I really need the same functionality in my footer, any suggestions.
thanks in advance
November 13th, 2008 at 9:30 pm
Simon North said...
@Katie
Could you provide me with a link so I can check out what the problem may be, if its confidential then send me a message through my portfolio: http://webdesign.simnorcomputing.com
@Danny
If the widget disappears off the bench when you add it to the sidebar then you may not be able to have 2 at the same time, check the widget documentation to see if there is a way to add it manually and then add it between the if statement of the appropriate widget in the footer.php file. If you need any more assistance then please as with Katie above send me over the details through my portfolio along with a link to the plugin because I cant seem to find it in Google.
Thanks
November 17th, 2008 at 11:55 am
Charlie said...
I’m having the same problem that Alan and Katie are having. None of my widgets are showing up in the subfolder. I’m using the openair template. I followed every step, but any widgets I add do not show up. Otherwise, great guide.
November 30th, 2008 at 9:05 pm
Alan said...
I got them to show up after Michael said, “use the subfooter block from the footer.php file, instead of the sample code given in the first part of Step 2.”
But they all stack on top of each other instead of side by side. I haven’t really messed with it much though, using tables instead of div’s would probably work.
December 10th, 2008 at 6:24 pm
aaron said...
Hi,
I’m currently using a theme without a widget sidebar on WP2.7. I’m looking to add widgets to the footer. I’ve tried until editing the functions.php file. My files seems to be very different without the If register_sidebar section. Looking at the functions.php the only section which points to the sidebar is to load the “dynamic_sidebar”
Can you above script be modified for that particular theme?
Thanks!
Aaron
February 5th, 2009 at 9:13 am
Nora said...
Thanks a lot, Simon North, for the clear instructions. I wouldn’t have wasted a lot of time if I saw this immediately. I followed another set of instructions from another site, which was as not as clear as yours. Thanks also to Michael for pointing out that we need to use the subfooter block from the downloadable footer.php file so that the widgets can function. Again, I should have read immediately the comments. Wow! Thanks for the help. Just some little tweaks in CSS and my footer will become a pretty but useful part of my blog. It’s much much better than the footer plugins I tried. More power!
April 4th, 2009 at 3:37 pm
Adam Winogrodzki said...
This thing isnt working with my theme!
April 20th, 2009 at 10:55 am
perezreyes said...
to everyone out there whose widgets do not get added in the widget admin panel try this
in step 2 html
add this:
<
instead of:
Widget 1
and so on for the other 2 widgets
May 20th, 2009 at 10:44 pm