How to add 3 column footer to WordPress theme

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.

Comments

  1. 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.

  2. says

    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”?

  3. 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.

  4. 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

  5. says

    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.

  6. 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?

  7. 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

  8. 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.

  9. 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

  10. 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.

  11. says

    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!!!

  12. 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

  13. 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 :)

  14. 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.

  15. 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

  16. says

    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
    }

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>