7/27/2016 - 5:34 PM

Showcase a Grid of Photos on Your Homepage

Brian Gardner 7.27.16

/* 4. Add CSS for member images in theme style sheet: */
/* Members
---------------------------------------------------------------------------------------------------- */

.members img {
	vertical-align: top;

.member {
	display: block;
	float: left;
	height: 20%;
	position: relative;
	width: 20%;

.member-name {
	background-color: #fff;
	bottom: 10px;
	font-family: 'futura-pt', sans-serif;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 1px;
	position: absolute;
	right: 10px;
	text-transform: uppercase;

.member-name a {
	display: block;
	padding: 5px 10px;

.member-name a:hover {
	background-color: #ff3867;
	color: #fff;
<! --- 3. Add HTML for the member images into a text widget: --->

<div class="member"><img src="" alt="Brian Gardner" /><span class="member-name"><a target="_blank" href="">Brian Gardner</a></span></div>
<div class="member"><img src="" alt="Joshua Becker" /><span class="member-name"><a target="_blank" href="">Joshua Becker</a></span></div>
<div class="member"><img src="" alt="Darrell Vesterfelt" /><span class="member-name"><a target="_blank" href="">Darrell Vesterfelt</a></span></div>
<div class="member"><img src="" alt="John Shultz" /><span class="member-name"><a target="_blank" href="">John Shultz</a></span></div>
<div class="member"><img src="" alt="Marc Chernoff" /><span class="member-name"><a target="_blank" href="">Marc Chernoff</a></span></div>
<div class="member"><img src="" alt="Jeff Goins" /><span class="member-name"><a target="_blank" href="">Jeff Goins</a></span></div>
<div class="member"><img src="" alt="Nathan Barry" /><span class="member-name"><a target="_blank" href="">Nathan Barry</a></span></div>
<div class="member"><img src="" alt="Anthony Ongaro" /><span class="member-name"><a target="_blank" href="">Anthony Ongaro</a></span></div>
<div class="member"><img src="" alt="Seth Spears" /><span class="member-name"><a target="_blank" href="">Seth Spears</a></span></div>
<div class="member"><img src="" alt="Vincent Nguyen" /><span class="member-name"><a target="_blank" href="">Vincent Nguyen</a></span></div>
//* 2. Hook the “members” widget area after the site header:
//* Do NOT include the opening php tag

//* Add members widget area after header
add_action( 'genesis_after_header', 'brocation_members_widget' );
function brocation_members_widget() {

	genesis_widget_area( 'members', array(
		'before' => '<div id="members" class="members"><div class="wrap">',
		'after'  => '</div></div>',
	) );

//* 1. Register the “members” widget area in the functions file:
//* Do NOT include the opening php tag

//* Register members widget area
genesis_register_sidebar( array(
	'id'          => 'members',
	'name'        => __( 'Members', 'brocation' ),
	'description' => __( 'This is the members widget area.', 'brocation' ),
) );