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

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.

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.

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

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