Home Page Widget with Multiple Columns

[webhands]

I am trying to customize the Genesis Sample theme by adding a 3 column widget to the home page right after the content area. I was able to add the widget by adding the code below to the functions.php file, but I can't find any examples on how to divide it into 3 columns, so I can display 3 featured pages (using the Genesis Featured page plug-in). The 3 featured pages now display in 3 rows. I want them to display in 3 columns.

Any help would be appreciated.
Thanks -
Phil

genesis_register_sidebar( array(
'id' => 'home-features',
'name' => __( 'Home Features', 'hatch-medical' ),
'description' => __( 'Widget area for various home page features.', 'hatch-medical' ),
) );

add_action( 'genesis_after_entry_content', 'add_home_features' );

function add_home_features() {
if( is_front_page() ) {
genesis_widget_area( 'home-features', array(
'before' => '<div class="home-features">',
'after' => '</div>',
) );
}
}

http://www.clientdesigns.com/hatch/

[Brad Dalton]

You can use column classes which is already built into Genesis

Or did you want to display 3 widgets within 1 widget area in columns?

---

Tutorials for StudioPress Themes.

[webhands]

Thanks for your reply, Brad. Yes, I want to display 3 Genesis Featured Page widgets in 1 widget area. I have them in there now, vertically, one on top of the other, but I want them horizontally in 3 columns.

[Brad Dalton]

Look at how its done here.

You can inspect the widgets to grab the CSS rules.

---

Tutorials for StudioPress Themes.

[Brad Dalton]

This should work

.home-features {
	background-color: #fff;
	clear: both;
	overflow: hidden;
	padding: 60px 30px 0;
}

.home-features .widget {
	float: left;
	padding: 0 2.8%;
	width: 33.33333333333%;
}

.home-features .widget:nth-of-type(3n+1) {
	clear: left;
}

Untested.

---

Tutorials for StudioPress Themes.

[webhands]

Thanks Brad. I'll give that a shot.

[bigbluesquid]

I found this on a search in the forum, and it worked great for me, thanks Brad.

I've used it on the Agency Pro theme to feature three pages in a single widget, similar to the featured posts widget: https://www.iconicbiscuits.com/

[Author]

Posts