Adding flexible widget capabilities to child theme

[kenziejoy]

We're using an Education Pro theme and I've been requested to make updates to the homepage that would really require the flexible widgets I've used in other themes. So that text widgets will automatically organize themselves depending on how many widgets there are.

I tried adding some code and css (see below) from another theme that seemed right to add this capability, but it doesn't seem to be working, so much be missing something.

//* Setup widget counts
function altitude_count_widgets( $id ) {
	global $sidebars_widgets;

	if ( isset( $sidebars_widgets[ $id ] ) ) {
		return count( $sidebars_widgets[ $id ] );
	}

}

function altitude_widget_area_class( $id ) {

	$count = altitude_count_widgets( $id );

	$class = '';
	
	if ( $count == 1 ) {
		$class .= ' widget-full';
	} elseif ( $count % 3 == 1 ) {
		$class .= ' widget-thirds';
	} elseif ( $count % 4 == 1 ) {
		$class .= ' widget-fourths';
	} elseif ( $count % 2 == 0 ) {
		$class .= ' widget-halves uneven';
	} else {
		$class .= ' widget-halves';
	}

	return $class;
	
}

/* Flexible Widgets
--------------------------------------------- */

.flexible-widgets {
	padding-bottom: 60px;
	padding-top: 100px;
}

.flexible-widgets .widget {
	float: left;
	margin: 0 0 40px 2.564102564102564%;
}

.flexible-widgets.widget-full .widget,
.flexible-widgets.widget-area .widget:nth-of-type(1),
.flexible-widgets.widget-halves.uneven .widget:last-of-type {
	background: none;
	margin-left: 0;
	padding: 0;
	width: 100%;
}
	
.widget-area.flexible-widgets.widget-half .widget,
.flexible-widgets.widget-halves .widget {
	width: 48.717948717948715%;
}

.flexible-widgets.widget-thirds .widget {
	width: 31.623931623931625%;
}

.flexible-widgets.widget-fourths .widget {
	width: 23.076923076923077%;
}

.flexible-widgets.widget-halves .widget:nth-child(even),
.flexible-widgets.widget-thirds .widget:nth-child(3n+2),
.flexible-widgets.widget-fourths .widget:nth-child(4n+2) {
	clear: left;
	margin-left: 0;
}

.solid-section .widget {
	background-color: #fff;
	padding: 40px;
}

.solid-section .widget-title {
	border-bottom: 1px solid #ddd;
	margin-bottom: 30px;
	padding-bottom: 30px;
}

.flexible-widgets.widget-halves h2,
.flexible-widgets.widget-thirds h2,
.flexible-widgets.widget-fourths h2 {
	font-size: 36px;
}

http://everydayambassador.org/

[Brad Dalton]

You also need to add the function to the code which calls your widgets which i assume you want to use in the front-page.php file

Example:

genesis_widget_area( 'front-page-1', array(
		'before' => '<div id="front-page-1" class="front-page-1"><div class="image-section"><div class="flexible-widgets widget-area' . altitude_widget_area_class( 'front-page-1' ) . '"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );

---

Tutorials for StudioPress Themes.

[Author]

Posts