Many times, when we choose a theme, we may still find many things missing in it. The only option left would be to customize the theme according to your will. There are probably so many tutorials in the Internet that you will surely come to know how to make the theme look according to your liking.
The same case happened to me today. I have changed the theme of my Blog Netchunks to a stunning theme called ThrillingTheme. Everything in this theme is good and the theme is fast loading too. But I missed having widgetized sidebar in the footer since this theme does not have one. Well, but it is easy to add a widgetized sidebar to one’s theme. I am going to teach you how add 3 widget ready sidebars in the footer of your blog.
How to add a sidebar to a WordPress footer
Actually adding a sidebar to WordPress is quite easy. You just have to follow the following three steps:
1) Registering the sidebar in functions.php
2) Adding the sidebar to footer.php
3) Adding style for sidebar in style.css
Lets discuss this one by one briefly.
1) Registering the sidebar in functions.php
You will have to go to your theme Editor under Appearance -> Themes -> Editor in your Admin Dashboard. Then you have to go to the file functions.php. In that file find the section which appears similar to the following. You will notice that the number is not 5 yet, it maybe 1 or 2. That number reflects the number of sidebars you currently have. Change the number to reflect how many sidebars you now want (i.e the number of sidebars in the sidebar are plus the number of sidebars you want in the footer)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <?php
if ( function_exists('register_sidebar') )
register_sidebars(5,array(
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h4>',
'after_title' => '</h4>',
));
?> |
2) Adding the sidebar to footer.php
After you have done the above, now you will need to add your sidebar elements in the footer.
Add the following right after
<div id="footer">Code to add
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <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> |
You can any unique name to the id I gave footer-sidebar.
3) Adding style for sidebar in style.css
Now you need to add some styling to the sidebar. You will need to go into your theme’s css file (Most of the time it is style.css) and add a small bit of code. The following code will add a full width div with the sidebars inside it i.e. the whole footer has been given a border. You could also customize it any way you want using CSS.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | #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
If you like this Tutorial you should certainly signup for our feed
aatif (8)
Sathish @ TechieM... (8)
Crunchynow (7)
Siva (7)
Blog Tips (6)
Charleston Marketing (6)
Shiva, thanks for the tutorial on how to add a sidebar to footer. I always thought that it should be possible through the widget section and not done manually through coding.
[Reply]
Shiva Chettri Reply:
July 19th, 2010 at 1:30 pm
Well, actually I too did not know it, but since my theme does not have one, did some research read some codex and came up with this. Still have to add this to my own theme’s footer
[Reply]
Kamal Hasa Reply:
July 19th, 2010 at 7:17 pm
Great tutorial but seriously I would choose a free theme with the sidebar in the footer ready-made
Kamal Hasa´s last blog ..Make your website SEO friendly
[Reply]
yah , the adsense ad above post , looks better tha before. See the results you get. Sometimes changing theme can affect a lot of things
[Reply]
Shiva Chettri Reply:
July 19th, 2010 at 1:45 pm
And it is loading faster too
[Reply]
site speed , ctr etc etc . experimenting is good though
[Reply]
Shiva Chettri Reply:
July 19th, 2010 at 1:45 pm
Yup you are right Sourish, Blogging is experimenting…..It is good to keep on experimenting. You gain knowledge
[Reply]
awesome tutorial. Siva, loved your new theme.
Vector Graphics´s last blog ..Annanta Is Now Designer’s Digest
[Reply]
Shiva Chettri Reply:
July 19th, 2010 at 4:55 pm
Glad you liked the theme as well as the tutorial bro. COngratz to you too also on your new domain
[Reply]
Vector Graphics Reply:
July 19th, 2010 at 5:11 pm
Thanks Shiva
Vector Graphics´s last blog ..Annanta Is Now Designer’s Digest
[Reply]
Your theme looks much better now, I like it. Why don’t you use footer on this theme?
[Reply]
Shiva Chettri Reply:
July 19th, 2010 at 5:15 pm
Well I will, I am just waiting to get home from office
I am right now at work so editing it is difficult here
[Reply]
Thanks a lot for this detailed tutorial. I followed these steps and now I also have 3 footer sidebars. I am using the same theme as yours, and was really missing this feature.
Sourav´s last blog ..To Thank Or Not To Thank For Retweets
[Reply]
Shiva Chettri Reply:
July 22nd, 2010 at 2:14 am
Oh! great Sourav, Glad to know that the tutorial helped you. I am also going to add the sidebar in my theme too
[Reply]
A nice and simple tutorial, easy to follow and setup. It helps the simple user to the most advanced.
[Reply]
Shiva Chettri Reply:
July 22nd, 2010 at 2:14 am
Awesome, Glad to know you liked the tutorial Serradinho Bro
[Reply]
Great Tip. I am using swift and it has it by default.
wondering why you shifted from swift theme @siva.
- Robin
Robin´s last blog ..iOS 321 for iPad Released
[Reply]
Shiva Chettri Reply:
July 22nd, 2010 at 9:51 am
Well bro, I just changed because the theme looked quite dull,I wanted something bright and light
[Reply]
nice tutorial… i hope i can do that…
zik´s last blog ..Mengharap rezeki ramadhan
[Reply]
Shiva Chettri Reply:
July 22nd, 2010 at 9:51 am
I am sure you will be able to do it brother
[Reply]
Super Great
I will be trying to get this up and going in a few days..and I will let you know how it turns out.
Peace Shiva
TrafficColeman “Signing Off”
TrafficColeman´s last blog ..1-000-000 FRee Visitors In 30 Days
[Reply]
Shiva Chettri Reply:
July 22nd, 2010 at 9:51 am
SO Coleman, did you try this…? How did it go?
[Reply]
TrafficColeman Reply:
July 22nd, 2010 at 6:13 pm
Hi Shiva
I haven’t set it up just yet..I been very busy with some clients of mine who are looking for me to setup a blog for their company.
But once I get this done..Then I will give this a try…
P.S. I’m accepting guest posting on my blog if your interested…and you can find my contact info on my blog at the top.
TrafficColeman “Signing Off”
TrafficColeman´s last blog ..Beginners Guide For Newbie’s To Start Blogging
[Reply]
New tips to have a pro footer. i am planning for another big change now. Wait and see
Tinh´s last blog ..Hello world!
[Reply]
Shiva Chettri Reply:
July 22nd, 2010 at 9:53 am
Ya, I saw your new blog and also came to know that you sold your old blog. Seems it went to a good owner. I am sure you will be able to make the new blog better in a matter of few days
[Reply]
Tinh Reply:
July 22nd, 2010 at 10:06 am
I do not expect to get on track sooner to have more time for relax and for our team project. I am also hiring thesis designer to redesign my new blog theme too. Hope to guest post on your blog soon.
[Reply]
Shiva Chettri Reply:
July 22nd, 2010 at 10:22 am
Oh great! Have a good time relaxing and I am sure you will be back on track pretty soon.
And about the guest post -> Anytime bro, Anytime
Tinh Reply:
July 22nd, 2010 at 10:23 am
Great to hear that from you. I will
[Reply]
Great tutorial for WP beginners. Recently I’ve been doing some design level tweaks to my blog and had to do it the hard way. Wish, I came across this tutorial before
TechChunks´s last blog ..Top 10 Geeky Webcams That Ooze With Creativity
[Reply]
Shiva Chettri Reply:
July 22nd, 2010 at 9:53 am
Oh did not know you were tweaking your design. I also am trying to tweak my design
[Reply]
Great tip. thanks
Hieu Martin´s last blog ..Top 5 Excellent Free WordPress Themes
[Reply]
Shiva Chettri Reply:
July 22nd, 2010 at 9:54 am
Glad you liked the tips Hieu bro. I am sure you will enjoy adding footers to your site
[Reply]
Hieu Martin Reply:
July 28th, 2010 at 9:27 am
Yes. i just change new theme. so you want me add this to footer? because my footer now have much space
Hieu Martin´s last blog ..Awesome Marketing Tips For Your Blog
[Reply]
nice idea ’bout creating footer sidebar
i hope i can make a plugin for it someday
Julian´s last blog ..Manual Add ReTweet- FB Like- FaceBook Share- and Buzz Button
[Reply]
Shiva Chettri Reply:
July 22nd, 2010 at 9:54 am
I am sure you will be able to make it cos I see that you are pretty good at coding
[Reply]
A digg and retweet from my side! Nice post!
Blogging To The Bank Review´s last blog ..Blogging To The Bank 30 Review & Discounts & Bonus Buy it!
[Reply]
hmm….nice tutorial….
put some more related to this
Digital Imagination´s last blog ..Linux lovers to loathe the iPad
[Reply]
Wow man ! was just looking for this one .
Now many wp themes dont have footer widgets and only premium ones posses this feature . Cool coding , keep it up
BLOG404´s last blog ..Now DoFollow and CommentLuv powered !
[Reply]