Now I have removed my Christmas theme formatting, I am ready to work more on my blog design.. Having made the move to Wordpress from Blogger not long before I added the festive colors and images, I had not spent any time on the real theme. I know I am doing this backwards - most sane people would decide on a theme before showing their blog face in public. The reason, I want to talk through the process I am going through as I do my design as a way of teaching anyone who may be interested.
To alleviate the problem of those resource hungry social networking widgets making page load time slow, I have now relegated them to the footer. Not being a php expert - (not much past the “hello dolly” stage) I had to search for a way of doing this. I had to piece together various bits of information here and there so I thought it an idea to put it all together for your edification and delight. (I am wondering how many left after reading the last part, thinking how boring). Anyone using anything other than Wordpress may as well take their leave at this point too, although I would much rather you click on recent posts or archives and stay a while longer on this blog of course.
Rather than having to add widget codes directly into my footer.php, I have added “sidebar” elements into the footer. This means I can add widgets to them from the Wordpress dashboard widget page, which gives me more flexibility if I change their content..
How to add a sidebar to a Wordpress footer
Firstly I had to tell Wordpress to insert new sidebars into my theme by altering the footer.php file.
As I already have two sidebars and wanted 3 columns in the footer, I needed to let the Wordpress architects know that instead of two sidebars I now needed 5. (the architects are those that work on the basic structure and design - in my imagination that is). For this I had to alter the functions.php file in my theme folder.
Edit functions.php:
Find the section in your theme folder’s functions php file that says something similar to the following- except the number will not be 5 yet:, it may be 1 or 2. Change the number to reflect how many sidebar elements you want in total (that is the number of sidebar(s) in your sidebar area plus how many you want in your footer) . If you do not have a functions.php file but have a widget enabled theme create the functions.php file including all of the code below.
<?php
if ( function_exists('register_sidebar') )
register_sidebars(5,array(
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h4>',
'after_title' => '</h4>',
));
?>
Now the architects have drawn up their plans, the construction team come in to put the new sidebars in place. They need to build the new “sidebar” elements into the footer. I added mine at the very top of the footer straight after:
<div id="footer">
Add to footer.php:
<div id="footer-sidebar" class="secondary">
<div id="footer-sidebar1">
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar(3) ) : ?>
<?php endif; ?>
</div>
<div id="footer-sidebar2">
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar(4) ) : ?>
<?php endif; ?>
</div>
<div id="footer-sidebar3">
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar(5) ) : ?>
<?php endif; ?>
</div>
</div> <!-- Close footer-sidebar -->
<div style="clear-both"></div>
I gave my new elements the id of “footer-sidebar” but you could call them anything you like as long as the name is unique - that is, different to any other id name you have in your theme.
That done, when your site loads, the builders come in and add the sidebars into the footer. Imagine how busy they are grabbing all the bits needed to put your page together.
The problem is the building is is still very basic. Now we need some interior designers to add a bit of style and finesse. Crack open your style.css file and pretty up the sidebars so they sit side by side of a width that is going to suit the sort of content you want in them. I made mine all the same width, measured so they stretch the full width of the footer: I gave the whole footer a border. I could have added borders around each sidebar, added background color etc, but wanted to keep it simple for these instructions.
Add to style.php
#footer-sidebar {
border: 1px solid #cccccc;
display:block;
height: 260px;
}
#footer-sidebar1 {
float: left;
width: 300px;
margin-right:20px;
}
#footer-sidebar2 {
float: left;
width: 300px;
margin-right:20px;
}
#footer-sidebar3 {
float: left;
width: 300px;
}
Note that the divisions have the same names as I gave them when adding them to footer.php
As, by the time you read this, I may have altered the formatting of the footer once more to add extra styling elements here is an image of what it looks like after adding the above styling.
Popularity: 15% [?]
Hi Sue,
I am so glad that you dropped by. I have been working hard to rejoin all of my sites. And readd all of my friends and contacts.
I don’t find this boring at all and I am Blogger. I started once to make the move to wordpress but had problems working in it.
So I just know this site will help many!!
Happy New year Sue,
Jackie
Shinade’s last blog post..My Beautiful Loves
Hi Shinade, glad to see you up and running again and thanks for your kind comments.
Impressive post. I havent found anything this good anywhere. Heads up!
For those interested and sceptical, if you put a little concentration into this it actually works.
Congrats!
Thanks Julien, it does take a bit of thinking about the first time you do it but you can add ’sidebars’ all over the place.
After 100’s of tries, this one actually worked through the wedgit drop down box to add stuff. I must say they were all along the left hand side but i have a feeling that is just a width correction. Still a great job. I have not put this online until I figure out the vertical listing. ANY help will make me smile
JIM
Jims last blog post..Hooray!—–Finally a New Site!
I’msorry, the 100 tries I mentioned were other sites. This one went in 1st time
JIM
Jims last blog post..Hooray!—–Finally a New Site!
Thanks for adding this, I have been trying to find a way to change my footer and this really helped. The only problem is that my hosting provider takes a long time before they update the main page and everything in my blog to follow what I want it to do. It has been known to take three days before it shows up right.
That is dreadful - 3 days! Just a thought though, have you considered it may be your browser cache that needs clearing out because it is storing your old information?
Hi Sue, thanks so much for your tutorial, this was just what I was looking for!
JoLynn Braley’s last blog post..Tastes Great, More Filling - Mrs. May’s Naturals Snacks
I am glad - if there are other things you would like to learn please let me know as I am sure there are others who would be interested too
I’m having a problem with this my sidebars aren’t showing horizontally. Does anyone knoe what I’m doing wrong?
As you have not left a link I can’t go and take a look but there could be a couple of reasons.
1. Your horizontal sidebar may not be styled to take up the full width of your blog but is taking on the width of your ordinary sidebar.
2. The information in the horizontal sidebar may not be styled to display horizontally. e.g. if it is a link list that will automatically take on the styling of your sidebar lists unless you style it to display horizontally - the CSS code for a horizontally displayed list should include display:inline;
Hope this helps.
Sry. http://aniggaincyberspace.com
Thank you for posting this. It’s the first time I’ve ever attempted to alter the code in WP this much and it worked!
Lisa’s last blog post..The Great Birthday Scam
Excellent, really clear, tutorial. Much appreciated!
Hi,
Thank you very much, u re a life saver!
This post save me a lot of time
I will just try right now
Best regards,
Joao from Brazil
I followed the instructions, but it didn’t add any sidebars. When I go to the widgets page, it still has only 1 sidebar. Am I missing something?
Thanks a lot for this great post. I just made a theme for my new blog and your knowledges helped me much!
jbjs last blog post..Python: 50 modules for all needs
I used this guide to help ad widgets to the footer of my blog.
Thanks a bunch.
Sands last blog post..Dangers of Driving in Uruguay
This article sure is handy! shame you cant copy the code out all in one go though. Really good guide. easy to follow. My blog will soon be featuring a footer sidebar
thank you so much , your tutorial about footer widgetizing is the best out there.
zeds last blog post..Explosion d’une vraie bombe nucléaire
Hi, I used this tutorial to make my footer widget ready but how come the bottom 3 widgets are not showing up in the Wordpress dashboard widget page?
I can’t add widgets to the footer… right now the content showing on my footer is the code embedded into my footer.php
[...] would someone have so many sidebars to begin with? Well, remember that you can also add widget-ready sidebars to Wordpress footers or anywhere in your design, to give extra content management options [...]
All worked great now, you just have to remember to register the total number of sidebars on the blog and not just the 3 new ones.
JIM
Jims last blog post..Hooray!—–Finally a New Site!
[...] display them is to have three columns floated next to each other with widgetized data in them (a la Blogging Sueblimely and Lorelle). This looks very clean and provides a quick way to showcase a lot of information in [...]
[...] Add Widget-ready Sidebars to Wordpress Footers | Blogging Sueblimely Widget ind i footeren på Sandbox themet! (tags: wordpress hack widget) [...]
Hi.
I’m trying to do this on my test area at http://hamishjoy.com/testarea/
Unfortunately, the footer widgets are not displaying.
I made the changes, saw the options for sidebar 1-5 in the widgets section, added a few widgets, and still, nothing seems to happen…
I’m still working around it… trying to see what the matter is… So far, I can’t figure it out at all…
And yes, I’m a noob here.
hammys last blog post..Trippin’
hey, I think I solved it.
Anyway, your guide was extremely simple to follow. Thanks a LOT.
hammys last blog post..Trippin’
If I don’t know this, the only way I could get is find another template. Thanks to you, there is another option now.
Atnizs last blog post..Message To Work At Home Bloggers
Sue, thanks for your easy tutorial, we.. web designers always looking for these kind of guide.
I can’t seem to get the sidebars to register and show up under 2.7.1
Here is the register statement from the theme I am using
if ( function_exists('register_sidebar') ) {
register_sidebar(4,array(
'1' => 'Wide',
'before_widget' => '',
'after_widget' => '',
'before_title' => '',
'after_title' => '',
));
}
Does anyone know where else widgets may be registered?
Hey thanks for nice tutorial…I’m looking for this to add into my new blog
Your instructions were the easiest to read, follow, and implement of most I’ve seen. Thanks!
Dereks last blog post..Run For The Wall Update: May 18, 2009 (Day 6)
[...] Add Widget-ready Sidebars to Wordpress Footers | Blogging Sueblimely [...]
Thanks! Very helpful, short&clear, easy to implement and customize. Good job!
[...] theme? I’ve already tried the tutorial here and some troubleshooting here. I might try this one [...]
[...] would someone have so many sidebars to begin with? Well, remember that you can also add widget-ready sidebars to Wordpress footers or anywhere in your design, to give extra content management options to [...]
“Not being a php expert - (not much past the “hello dolly” stage)…”
Try using Lynda.com I’ve learned a ton through her site by simply paying $25.00 per month for unlimited tutorials. - Colleen
Kennewick Real Estates last blog post..Kennewick WA Homes for Sale