How to add 3 column Footer to WordPress website

WordPress 3 Column Footer

Hi Friends, While creating WordPress websites I have faced few problems.  Adding widgets to Footer is one of them. I have found the solution for same and sharing it here for those who still searching for this. This tutorial will help you in adding 3 column footer  to a WordPress website. This tutorial will let you know the whole process step wise. You need to modify few of your themes files to get your desired results, so It is advisable to backup your website theme before making any changes.

Add 3 column footer to WordPress theme

To add 3 column widget to your footer section you need to make changes in below given files available in your wordpress theme folder.

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

You can find these files at

<Website URL>/wp-content/themes/<Your current theme >/

Please follow below given steps to get 3 column widget added in to your website’s footer.

Step 1 – In first step you need to register footer columns in to widget section

  • Login to your dashboard
  • Click on Appearance Menu > Editor.
  • You will see a list of files right side of editor, click on functions.php
  • Now, copy below mentioned code and paste in to functions.php file and save the 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>',
));

Step 2 – Adding Widgets to Footer

To add widget to footer you need to make changes in Footer.php file of you WordPress theme.

Copy below mentioned code and paste in Footer.php file and save the changes.

/* 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>

Step 3 – Adding Style to Footer Widgets

Now, you need to set the style f those widgets so that they will appear in same way as you desire.

Open Style.css file and add below mentioned code in to and save the changes.

Note: You can make the changes in below CSS code as per your desire to match it with your theme design.

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

WordPress Footer Widgets

You can check if the widgets are successfully added or not by clicking on Dashboard -> Appearance -> Widgets.

Now you are ready to add widgets to your footer. Just go to Dashboard -> Appearance -> Widgets Drag and Drop widgets to desired footer sections and save them.