Multi-colum widgetized footer

1

What’s the best way to make widgets in the footer align horizontally?

2

So far wrapping the widgets in a <div class="col-xs-4 %2$s"> for a three colum footer did it for me. Line 19 + 20 of widgets.php looks like this:

    'before_widget' => '<div class="col-xs-4 %2$s"><section class="widget %1$s %2$s"><div class="widget-inner">',
'after_widget'  => '</div></section></div>',
3

I experimented with a more dynamic way of doing this. The following code you can place in lib/custom.php. Note that it will probably fail if you have more than 12 widgets in the footer

function namespace_footer_sidebar_params($params) {

    $sidebar_id = $params[0]['id'];

    if ( $sidebar_id == 'sidebar-footer' ) {

        $total_widgets = wp_get_sidebars_widgets();
        $sidebar_widgets = count($total_widgets[$sidebar_id]);

        $params[0]['before_widget'] = str_replace('<section class="widget ', '<section class="widget col-xs-6 col-md-' . floor(12 / $sidebar_widgets) . ' ', $params[0]['before_widget']);
    }

    return $params;
}
add_filter('dynamic_sidebar_params','namespace_footer_sidebar_params');

Some math can be done to account for fringe cases, but this works for me as I know the footer will have 3 or 4 widgets and at most 6.

Edit: I forgot to explain the code :smile:

It counts the number of widgets in the ‘sidebar-footer’ widget area. It then replaces '<section class="widget ' in the Roots standard before_widget parameter with a new string that adds two new classes.

  • .col-xs-6 which I thought worked best in my case on small screens
  • .col-md-* where * represents the most appropriate column span based on the total number of widgets

As I said above, you could do something more complex with the column span such as limiting the total number of widgets allowed per row (I think 6 would be an absolute max) or you could go even further and try to distribute the widgets equally across ‘rows’. If I ever do write this I will post it back here

Btw, for a nice display at small sizes I have applied a custom mixin to the footer .widget element

.col-inline-block {
	display: inline-block;
	float: none !important;
	vertical-align: top;
}

there are some limitations for this to properly work with bootstrap columns, but works perfectly in this case. Read the full story here

1 Like
4

The other option is to register new widget areas in lib/widgets.php so that you have manual control over the columns.

It’s just a matter of duplicating the code for the footer sidebar (change the names and ids) and then updating templates/footer.php to display the sidebars how you want them.

1 Like
5

it is possible not be working anymore?
I entered the code in the file extras.php but seems not work.

edit. the code works! just a typing error. sry

6

@enollo
Thank you, It’s exactly what I wanted :smile:

7

@Foxaii is it correct also this method?
i am starting to work now with sage.

however where i can register a new sidebar in the new theme sage? init.php, is it correct?
thanks

8

Yes. Sage registers sidebars in lib/init.php so you should add them there too.

The code you posted will work, but wasn’t what I was suggesting to do as it means you have less control over what goes where in the columns.

If you register 3 separate sidebars as part of the footer, then you have more precision over which column each widget falls in.

1 Like