Organizing Widgets
-
I am in the process of creating a template that I can use on the fly for building sites for clients. I plan on having several, dynamically styled, widget areas (sidebars). On the top and bottom. I am allowing up to 4 widgets to be displayed in a row (side-by-side). When there are more than 4 widgets in a widget area it will create a new row.
I have created the following function to assign class names to the elements containing the widgets based on how many appear in each row. I can now use CSS to control the size of the widgets in each row to fill the width of the content element.
/* Creates rows of widgets and adds a class name based on the number in each row */ function dicey_add_widget_classes() { global $wp_registered_widgets; $sidebars = wp_get_sidebars_widgets(); $row_max = 4; /* Loop through the widgets in each sidebar */ foreach($sidebars as $sidebar=>$widgets) { $widget_count = count($widgets); $widgets_by_row = array(); /* If the sidebar has at least one widget organize them into an array by rows */ if($widget_count > 0) { foreach($widgets as $index=>$widget) { $row = floor($index/$row_max); $widgets_by_row[$row][$index] = $widget; } } /* If there is at least one row: */ /* Loop through the previously created rows and their respctive widgets, adding the proper class name */ if(!empty($widgets_by_row)) { foreach($widgets_by_row as $row=>$widgets) { foreach($widgets as $widget) { $span = count($widgets)%$row_max; if(count($widgets) == $row_max) { $wp_registered_widgets[$widget]['classname'] = 'widget span-' . $row_max; } else { $wp_registered_widgets[$widget]['classname'] = 'widget span-' . $span; } } } } } }
What I would like to achieve next is this: I would like the ability to dynamically create an element that acts as a row container. Let’s say for example I have 6 widgets in the “Top” widget area. The output would appear like so:
<div class="row1_container"> <div id="widget1" class="widget span-4"> <!--Content--> </div> <div id="widget2" class="widget span-4"> <!--Content--> </div> <div id="widget3" class="widget span-4"> <!--Content--> </div> <div id="widget4" class="widget span-4"> <!--Content--> </div> </div> <div class="row2_container"> <div id="widget5" class="widget span-2"> <!--Content--> </div> <div id="widget6" class="widget span-2"> <!--Content--> </div> </div>
Basically, I would like to be able to access the ‘before_widget’ attribute when the first element in a new row is reached and the ‘after_widget’ attribute when the last element in a row is reached. I have no problem determining the widget location within a row, just need to know how to modify the ‘before_widget’ and ‘after_widget’ attributes.
I have exhausted my Googling abilities in this matter. Thanks for your help!
- The topic ‘Organizing Widgets’ is closed to new replies.