Add Four Column Footer Widget in WordPress Theme Footer

In WordPress theme footer area most of the theme builder uses footer widget to list out recent post or comments etc. If you are a newbie in WordPress world then adding custom widgets might be seen difficult specially if you are using a free theme and don’t have any footer section. Don’t worry you came to right place. Here We are going to teach you how to add four column footer widget in WordPress theme footer. You can easily edit the color or size of each widget easily if you have the basic knowledge of HTML or CSS.

add-four-column-footer-widget-featured

Step 1:

First of all add the widgets function in functions.php:

[php]
if (function_exists(‘register_sidebar’)) {

register_sidebar(array(

<em id="__mceDel">’name’ => ‘Footer Area 1’,
‘id’ => ‘footer-area-1’,
‘description’ => ‘Content of First footer Widget’,
‘before_widget’ => ‘<div id="footer-widget1">’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h2>’,
‘after_title’ => ‘</h2>’,
));</em>

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

register_sidebar(array(
‘name’ => ‘Footer Area 3’,
‘id’ => ‘footer-area-3’,
‘description’ => ‘Content of Third footer Widget’,
‘before_widget’ => ‘<div id="footer-widget3">’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h2>’,
‘after_title’ => ‘</h2>’,
));
register_sidebar(array(
‘name’ => ‘Footer Area 4’,
‘id’ => ‘footer-area-4’,
‘description’ => ‘Content of Fourth footer Widget’,
‘before_widget’ => ‘<div id="footer-widget4">’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h2>’,
‘after_title’ => ‘</h2>’,
));
}

[/php]

Now in admin panel widgets area you can see that four widgets area have been added:

add-four-column-footer-widget1

Step 2:

In step 2 add the following CSS in your theme style.css file:

[html]

#footer-widgets-wrapper {
display: block;
max-width: 1170px;
margin:auto;
background: #ddd;
}
#footer-widget-area-1 {
width: 21%;
float: left;
margin: 15px 10px 10px 15px;
padding: 10px;
background-color: #ffffff;
}
#footer-widget-area-2 {
width: 21%;
float: left;
margin: 15px 10px 10px 15px;
padding: 10px;
background-color: #ffffff;
}

#footer-widget-area-4 {
width: 21%;
float: left;
margin: 15px 10px 10px 15px;
padding: 10px;
background-color: #ffffff;
}

#footer-widget-area-3 {
width: 21%;
float: left;
margin: 15px 10px 10px 15px;
padding: 10px;
background-color: #ffffff;

[/html]

Step 3:

In final step add the following code in your theme footer.php file:

[html]

<?php responsive_footer_after(); ?>
<div id="footer-widgets-wrapper">
<div id="footer-widget-area-1">
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘footer-area-1’) ) : ?>
<?php endif; ?>
</div>

<div id="footer-widget-area-2">
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘footer-area-2’) ) : ?>
<?php endif; ?>
</div>

<div id="footer-widget-area-3">
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘footer-area-3’) ) : ?>
<?php endif; ?>
</div>
<div id="footer-widget-area-4">
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘footer-area-4’) ) : ?>
<?php endif; ?>
</div>
</div>
<div></div>

[/html]

Now go to Appearance->Widgets menu and add the widgets you want to show in footer:

add-four-column-footer-widget

 

Author: mytutorialguru

Share This Post On

Submit a Comment

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