Three footer widget columns

Unite Theme
1

Hi again,

I would like to have the theme footer divided in three columns in order to add menus for all pages.

Thank you in advance

2

Hi @manosd,

You will need to edit this file with some html knowledge:

Thanks,

Cristian

3

Thank you for your reply Christian,

I thought that i have to add some code to functions.php , to footer.php and to style.css files.
What i tried is to add some code to functions.php in order to register footer columns in widget section

/* 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>',
));

Then i added this code to footer.php

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

and finally added this to style.css

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

But the menus was in vertical order and not horizontaly as i wanted.

If it is only html coding is it possible to provide the code or link that helps to make it?

Thank you

Manos

4

Hi,

Try to check here:

https://getbootstrap.com/examples/grid/

Thanks,

Cristian