• 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.