How to add 3 column footer to WordPress theme

Share This Article:

Add a 3 column footer to any WordPress theme by following this tutorial. Code used here has been tested and it helps to get 3 column footer in your WordPress theme. You need to edit some files in theme folder, hence it is advised to backup your theme.

add-3-column-footer-wordpress-theme

Add 3 column footer to WordPress theme

You need to edit these 3 files inside your theme folder.

  • functions.php
  • footer.php
  • style.css

Also Read : How to Login to WordPress using Email Address

Now, follow these steps and get a 3 column footer in your WordPress theme.

Step 1 – Registering Footer Columns in Widget Section

  • Login to WordPress dashboard, go to Appearance Menu > Editor.
  • Open functions.php, add below code to it and click on save changes.
/* Add this code to functions.php file in your theme */

register_sidebar(array(
'name' => 'Footer Widget 1',
'id'        => 'footer-1',
'description' => 'First footer widget area',
'before_widget' => '<div id="footer-widget1">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));

register_sidebar(array(
'name' => 'Footer Widget 2',
'id'        => 'footer-2',
'description' => 'Second footer widget area',
'before_widget' => '<div id="footer-widget2">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));

register_sidebar(array(
'name' => 'Footer Widget 3',
'id'        => 'footer-3',
'description' => 'Third footer widget area',
'before_widget' => '<div id="footer-widget3">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));

It will look like this, after adding code to functions.php file.
3-column-footer-functions

Check Out : Pros and Cons Of Using Free WordPress Themes

Step 2 – Adding Widgets to Footer

Edit footer.php file and add the below code to it.

/* Add this code to footer.php file in your theme */

<div id="footer-widgets">

<div id="footer-widget1">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('footer-1') ) : ?>
<?php endif; ?>
</div>

<div id="footer-widget2">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('footer-2') ) : ?>
<?php endif; ?>
</div>

<div id="footer-widget3">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('footer-3') ) : ?>
<?php endif; ?>
</div>
</div>
<div style="clear-both"></div>

Here is the screenshot, after adding code to footer.php file.

3-column-footer-footer

Step 3 – Adding Style to Footer Widgets

Its time to add some styling to those widgets, open style.css file and add below code to it.

/* Add this code to style.css file in your theme */

#footer-widgets {
display: block;
width:950px;
margin-right:0;
background: #ffffff;
}
#footer-widget1 {
width: 260px;
float: left;
margin: 15px 10px 10px 30px;
padding: 10px;
background-color: #ffffff;
}
#footer-widget2 {
width: 260px;
float: left;
margin: 15px 10px 10px 15px;
padding: 10px;
background-color: #ffffff;
}
#footer-widget3 {
width: 260px;
float: left;
margin: 15px 10px 10px 15px;
padding: 10px;
background-color: #ffffff;
}

Click on save changes and now it will look like this.

3-column-footer-style

Voila, you are done with the editing part and its time to add some widgets to footer.
wordpress-footer-widgets

  • Login, to WordPress Dashboard and go to Appearance > Widgets.
  • Drag and Drop widgets to desired footer sections and save them.
  • Now, check the footer of your blog and it will be really awesome.

 

Also Check : 5 Reasons why we choose Genesis over Thesis

Have you faced any problem in adding 3 column footer to WordPress theme ?, then please do drop a comment and we will get back to you soon. Meanwhile, subscribe to our feeds to get more tutorials like this.

Genesis is the most flexible WordPress theme framework that comes with tons of options. We have been using Genesis on all of our blogs and recommending the same to you. Every bit of it is coded according to the standards. Give it a try!

Comments

  1. Superb. Great post & I must say the way of presentation really needs an appreciation. Keep up the good work :) :)

    • Thanks for your words Harneet, enjoy your stay at WPSquare…

  2. Katy says:

    I am recently setting up a wordpress blog and I was looking for some information regarding 3 Column footer. I like the details and the code that you have shared. Thanks for the helpful post.

  3. This is a good tip. Some themes don’t have columns in footers and this trick can be useful. I will try this on one of my blogs. Thanks for this useful trick. One question, is functions.php “theme functions”?

    • Yeah you need to add code in theme functions file, which is “functions.php” by default in many themes.

  4. Appreciate your good work. Very Nice :)

  5. Waz says:

    Thanks for this very useful tutorial – it works like a charm!

    However, I’m trying to add a background across the width of the whole footer, but when I use background: url(images/grey-block.png) repeat-x; in #footer-widgets it doesn’t work.

    Would you have any ideas as to why it’s not working?

    Thanks

    • dadi says:

      Did you made it works ? I’m tryin to change a footer background-color but it’s not working.
      I’m using a Responsive Theme.

  6. karan virk says:

    can u plz tell me do i have to replace this coding with the earlier coding or simply add this coding with the coding that is already there.
    and i do not know where to add this in the top or in the middle or at the last.
    plz rply

    • Simply add this code at the end without replacing anything. Hope it will work for you.

  7. karan virk says:

    i am using theme strongblue

  8. this is my website. now i have changed my theme. can u add footer in this theme??

    • Just follow this guide step by step and if you notice any error, drop a comment here.

  9. Rahul says:

    Hello,

    Instead of the three columns one below the other can it be like 1 2 3 like this?

  10. Keith says:

    Excellent post! Such a big help with creating my first theme in a LONG time.

  11. Hi, i follow your instructions and all is perfect except for the style… is possible to match the rest of the boxes of my theme ? i don’t know what i have to add to the code you put for style.css.

  12. Simply awesome man, very easy…thanks for sharing.

  13. Anshuman says:

    Hi
    Yeah nice post its helpful for creating widget.
    Thanks

  14. Dustin says:

    I posted all the code in, got the widgets, which is Awesome! The only problem I am having is that i cant click on any of the links i have placed in the footer. What did I do wrong?

  15. Daniel says:

    Hello,

    Thanks for your tutorial. However, i am using WORDPRESS TWENTY TWELVE,and i have followed your instructions,but i got something wrong(but dont know what exactly i got wrong)

    when i visit my wordpress dashboard(appearance>widget),the followings appear within the right hand side of the widget:

    -FOOTER WIDGET 1

    -FOOTER WIDGET 2

    -FOOTER WIDGET 3

    How do i DRAG and DROP each widget to the desired FOOTER SECTION?

    When i over the “MOUSE” on each of them to drag, it was not working.

    Pls,help.

    This is the link to the blog://craigslistadsposters.com/Blog

  16. Chika says:

    Hi,
    I really hoping you can help. I have tried and tried and tried so many tutorials but i just cannot get this to work for me. I did everything you asked in this tutorial but the widgets just keep appearing on top of each other rather than side by side. Can you please advise what I’m ding wrong?
    Please help.
    Chika.

  17. Vlad says:

    Hi,
    Thank you for this great tutorial.
    I’ve tried implementing it on a twenty twelve theme.
    Unfortunately the footer doesn’t resize after the widgets and viewing it on a mobile device it leaves a blank background behind the 3 widgets.
    Do you have any ideea of how to fix this issue?
    Thank you !
    Vlad

  18. sameer says:

    hey, thanks for the tutorial…I’ve added this code to my “estore” theme but doesn’t work..any solution?

  19. gopukrishnan says:

    Hi, thanks for taking the time and effort to post this tutorial. However, it does not seem to be working with “The Corporation” theme. Could you let me know what I’m doing wrong.

  20. thanks buddy. It helped me a lot but I also want to add ad before posts on every page. want that trick.

  21. Seems that is working

    I just wanted to thank you!

  22. Thanks for sharing! Just what I was looking for.

  23. adding this to a blog. love your presentation – very clear and unintimidating. i do not, however, have a “footer.php” file/template. how do i go about adding this… please give me the easy version :) thanks!!!

  24. how do i get it to be in columns instead of rows?

  25. mark shirley says:

    Hi followed your instruction but it removes the main sidebar widget

  26. Manoj says:

    Hi
    Many thanks for your work here. Truly appreciated.

    I tried in in my blog, at first it was working fine that the ad bar was showing at the bottom and now removed and added it again for another purpose.. but I now see that the ad code that was added to the footer widget 1 is showing in the right home page sidebar

  27. sn00p says:

    I’m more curios on how to center the whole thing, I’m digging the whole inet, your tutorial was more or less the same method I’ve used so, if you have any idea how to center all three widgets, would be welcomed :)

  28. Lenny says:

    Hi there,
    I tried your solution and it works perfectly! Unfortunately, my theme is a responsive theme and the footer widgets look distorted on my mobile devices. Is there some additional code that needs to be inserted in order for it to look correct on mobile devices too?

    Thanks.

  29. david says:

    Great post and the mods work well. Could you share the css to render this responsive?

    cheers,

    David

  30. nicola says:

    Nice shot my friend! it is perfect !
    thanks

  31. Thomas Larsen says:

    Can it be true this doesn’t work for twenty twelve?

    I see the 3 widgits as described in the Widgit control panel, but they don’t show up on the actual site when I try to use them

  32. Hello sir I have 3 footer column in my wordpress theme now I want to change in 4 column. this is my code in function.php. Please how can I change this.
    if (function_exists(‘register_sidebar’)) {
    $sidebars = array(1, 2, 3);
    foreach($sidebars as $number) {
    register_sidebar(array(
    ‘name’ => ‘Footer ‘ . $number,
    ‘id’ => ‘footer-’ . $number,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”
    ));
    }
    }
    function widgetized_footer() {
    ?>

    <?php
    }

Speak Your MindComments Policy →

*

Looking for More Awesomeness?