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.css
#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.
61 Comments
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
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!
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)
Thanks! Very helpful, short&clear, easy to implement and customize. Good job!
“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
Great tutorial.
Thanks 4 sharing.
neos last blog post..Linkin Park – Lockjaw
Does this work with 2.8.2 ??
.-= kuld33p´s last blog ..14 Must To Do after WordPress Installation =-.
Offcourse it does!
-Jean
But I am not able to edit functions.php
The code ain’t there.
.-= kuld33p´s last blog ..India got Talent – An illiterate 15 year old kid speaking more than 15 languages =-.
I have tried the online code generators,they ask for a url which i obtained by uploading my image to imageshack and then pasting the given url over.
i then pasted the code i received from the generator in my myspace and everytime
Hi Sue,
When I put the code in Functions.php, I get unexpected error. Please help!
.-= Rajee´s last blog ..Blank 2 =-.
Nice publishing..It will really makes the new changes time to time..That is really appreciable..Keep it up..
From the day one when I started searching for WordPress theme, I searched for something with a footer. That is my first and minimum requirement.
I landed with thesis theme,but it was lacking Footer and glad I added footer on it with coding. I believe WordPress footer has lots of advantages on terms of SEo and lowering down Bounce rate.
.-= Harsh Agrawal´s last blog ..Difference Between Free WordPress and Self Hosted WordPress Blog =-.
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
For the style, wouldn’t it be add to style.css, not style.php?
.-= Ursula´s last blog ..Darren Rowse’s New Problogger Community Forum =-.
It’s my first time to change footer myself.
Now I can add sidebar there and add the code to style.css.
Thanks.
.-= thepadi´s last blog ..Facebook Lite untuk Akses Lebih Ringan =-.
Thank you for noticing that Ursula – I have amended the mistake.
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…
nice tutorial, thanks for share…I need it
thanks for your tips and suggestion after a long time i read this type of article. thanks again.
.-= aks´s last blog ..Real Estate Loan , Real Estate Loans =-.
Nice tutorial – thanks for sharing it
this is exactly what i’m looking for, thank you
I am using the Sliding Door theme in WordPress and I cannot get the Footer to work. In fact, adding the first steps causes both my site and my wordpress admin to disappear and I have go in through my FTP to delete the coding.
Currently, my function.php reads:
‘sidebar1′,
));
register_sidebar(array(‘name’=>’sidebar2′,
));
register_sidebar(array(‘name’=>’footer’,
));
instead of the way you have it and the rest of the coding is exactly the same as above. Yet, my footers do not work.
Please help!!
Thank you! After trying several other tutes, yours worked.
.-= Debbie´s last blog ..Getting lots of things done =-.
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
I usually have a lot of trouble with widgets because they wont save in the WordPress menu, any suggestions?
.-= Megan Fox´s last blog ..Megan Fox Gallery =-.
Hi, I found this very handy and it seems easy. However things doesnt seem to work that easy,
I found how to add widget boxes in the widget area, I pasted “footer sidebar” in the footer and i did the same in the style.css. However, it all appears to be broken on the site. the widget area do not appear inside the borders of the theme but out of it.. Ok , I’m a beginner, but shouldn’t be that, cause I’m almost certain i followed your instructions right , I think there may be something with my theme
, i don’t know … i’d appreciate if you have a minute and have any ideas of whats wrong
.-= Spyro´s last blog ..Black Button – A ‘what would you do’ film =-.
Widgets often break outside of the boxes they are meant to be contained in. Giving the surrounding area height and or width properties should do the trick.
Hi, just to let you know, i managed to make it
yei, thanks for the info
.-= Spyro´s last blog ..Black Button – A ‘what would you do’ film =-.
Thanks alot for this information.. I will be using it often while making wordpress themes for my website graphics club.
You did an awesome job of explaining each step clearly. Requiring me to type each line instead of just copy and paste led me to understand it more.
I’m now thinking of many other different areas that I could add widget areas to.
.-= Website Graphics Club´s last blog ..Website Graphics Club =-.
It’s good to see that a post like this still has such value after such a long time.
Though saying that there is a Widgets on Pages plugin that is available for wordpress that allows you to add a widget container to any post/page content through the use of a shortcode. I know this is a different approach to adding PHP to the footer but would allow people to have this functionality without the need to get their hands so dirty.
You can check it out at http://wordpress.org/extend/plugins/widgets-on-pages
.-= Todd Halfpenny´s last blog ..Too Helpful =-.
Aww this is a really cute tutorial, I like it! Tell me how would the little builders come in and create a bar right below the header?. Just below my page navigation menu. I will show you an example I have a full width footer bar implemented now but was wanting to build a full width top bar so my store gets nudged up to the top. I show you…http://nichewebsitestrategy.com/estore/ Thanks if you have time.
.-= Scot Manaher´s last blog ..Improving Your Video =-.
I was trying to add widget areas on footer.. but somehow it is giving error.. Let me try out using your tutorial..
christian songs online recently posted…Open Our Eyes- Lord
Thanks a lot for this tutorial. I m not a developer and I was so confused how to manage different sections of my footer through admin and this tutorial really worked for me. Thanks a lot..!
6 Trackbacks
[...] 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 [...]
[...] 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 [...]