I have a custom footer widgets area which is displaying a maximum of 4 widgets horizontally in one row. If I add more than 4 widgets then the layout breaks because is trying to display it in the same row.

I want to make it more flexible, for example to have 2 rows (divs) where I can add on the first one let's 2 widgets, and in the second one 4 widgets.

Probably what I need is to duplicate this one and make two footer areas. Is this possible and if it is how can I achieve this?

Here is the actual code of my widgets.php :

    /* Footer Widgets */
$footer_widgets_num = wp_get_sidebars_widgets();
$footer_widgets_num = (isset($footer_widgets_num['footer-widgets'])) ? count( $footer_widgets_num['footer-widgets']) : 0;

switch ($footer_widgets_num) {
    case 1:
        $footer_widgets_num = '12';
    case 2:
        $footer_widgets_num = '6';
    case 3:
        $footer_widgets_num = '4';
    case 4:
        $footer_widgets_num = '3';
    case 5:
        $footer_widgets_num = '2 offset1';
    case 6:
        $footer_widgets_num = '2';
    case 7:
        $footer_widgets_num = '1';
    case 8:
        $footer_widgets_num = '1 offset2';
    case 11:
        $footer_widgets_num = '1';
    case 12:
        $footer_widgets_num = '1';
        $footer_widgets_num = '1';

   'name' => __('Footer Widgets','outbox' ),
   'id'   => 'footer-widgets',
    'description'   => __( 'There are 4 slots available in the footer','outbox' ),
    'before_widget' => '<div id="%1$s" class="span'.$footer_widgets_num.' %2$s">',
    'after_widget'  => '</div>',
    'before_title'  => '<h3 class="widget-head">',
    'after_title'   => '</h3>'
  • 1
    Had you considered just handling this with CSS? While it's not impossible to customize sidebar output and such, usually it's very clunky and inconvenient.
    – Rarst
    Sep 16, 2013 at 13:01
  • I was thinking about this but is not really a good solution because I do have another div above the footer where I do want to put 2 specific widgets so is kind of impossible to do this with just css
    – agis
    Sep 16, 2013 at 14:17

1 Answer 1


CSS is a better way to go. Use a different class for the first two widgets than those that follow, so you can position them each where you want them.

Float, width, and possibly min / max-width should be all you need to get this working. If every widget is floating left, and the first two widgets are set to width 50%, the other widgets will move below, so long as the container div has a set width.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.