0

Using twitter bootsrap I want to grid my widgets if in the same position more widgets are present what I mean: having a registered widget

register_sidebar(array(
    'name' => __('Footer Top', 'roots'),
    'id' => 'footer-top',
    'before_widget' => '<div class="footer_teaser %1$s %2$s">',
    'after_widget' => '</div>',
    'before_title' => '<h3>',
    'after_title' => '</h3>',
));

how would I count and loop all widgets in columns? Lets say I have theoretically 3(this would be variable) widgets in a given position than I would split 12/3(or with another counted) which would give me with the example above footer_teaser col-sm-4 col-md-4

than the expected result would generate something like

<div class="footer_teaser col-sm-4 col-md-4">
                    <h3>About us</h3>
                    <p>Fugiat dapibus, tellus ac cursus commodo, mauesris condime ntum nibh, ut fermentum mas justo sitters.</p>
                    <p><i class="fa fa-map-marker"></i> 3 Athens street</p>
                    <p><i class="fa fa-phone"></i> (+30) 265-9987</p>
                    <p><i class="fa fa-print"></i> (+30) 9854-7855</p>
                    <p><i class="fa fa-envelope"></i> hello@domain.de</p>
</div>

So far what I found for counting the widgets

function count_sidebar_widgets($sidebar_id, $echo = true) {
    $the_sidebars = wp_get_sidebars_widgets();
    if (!isset($the_sidebars[$sidebar_id]))
        return __('Invalid sidebar ID');
    if ($echo)
        return 12 / count($the_sidebars[$sidebar_id]);
    else
        return count($the_sidebars[$sidebar_id]);
}

than on generation I do

register_sidebar(array(
    'name' => __('Footer Top', 'roots'),
    'id' => 'footer-top',
    'before_widget' => '<div class="footer_teaser col-lg-'.count_sidebar_widgets('footer-top').'">',
    'after_widget' => '</div>',
    'before_title' => '<h3>',
    'after_title' => '</h3>',
));

but I'm not satisfied with it

1

Would each of the columns have the same corresponding bootstrap classes (col-sm-4 col-md-4)? If so, you can just add those classes to the <div> referenced in before_widget, like:

   register_sidebar(array(
    'name' => __('Footer Top', 'roots'),
    'id' => 'footer-top',
    'before_widget' => '<div class="footer_teaser %1$s %2$s col-sm-4 col-md-4">',
    'after_widget' => '</div>',
    'before_title' => '<h3>',
    'after_title' => '</h3>',
   ));

But I may have misunderstood what you're going for. If you need a different class in each widget, might be simplest to just register two different widget areas with different classes applied.

  • look at my update. So to columns would be dynamically generated could have different grid classes – fefe Jun 11 '14 at 7:39
  • Ah, it's a good idea, really. I'll read through what you wrote and come up with an answer. – Benjamin Robinson Jun 12 '14 at 0:02
  • fefe, what is wrong with the solution you came up with? I mean, what do you not like about the output you're getting from that? I mean, one thing I see is that sometimes you will get non-integers when dividing -- for example, if you have 11 widgets, 12/11 = 1.09, which isn't going to match the class name of a column. Maybe use round() or floor() on count_sidebar_widgets()? But I am also not exactly sure why you'd ever want the output provided by $echo = false. In that case, if you had 11 widgets, each would be col-lg-11, right? – Benjamin Robinson Jun 12 '14 at 16:21
  • yepp you are right but what is if I want to create a new row if the actual row is overloaded? – fefe Jun 12 '14 at 16:34
  • What's the row class name? It seems like you need to create another variable, maybe $i that increments each time a widget is added. When $i == (12/count_sidebar_widgets()), close the previous row and output a new one. I found this related to hooking into the widgets loop: wordpress.stackexchange.com/questions/96681/… You'd need to pass the result of (12/count_sidebar_widgets()) to the loop function as the number of widgets per row. When I have a moment, I'll revise my answer. – Benjamin Robinson Jun 12 '14 at 18:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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