How to Use the Genesis Grid Loop

Sites like ChrisBrogan.com required custom code to accomplish that left-right grid loop on the homepage, so we thought it’d be a good idea to build the function that does the heavy lifting into core, add some useful parameters, and make it official. (You can also view a more advanced tutorial regarding the Genesis Grid Loop.)

This feature is really simple to use and can be implemented by following these steps:

1. Include Required CSS

/* Featured Post Grid
------------------------------------------------------------ */

.genesis-grid-even {
	float: right;
	padding: 0 0 15px;
	width: 48%;
}

.genesis-grid-odd {
	clear: both;
	float: left;
	padding: 0 0 15px ;
	width: 48%;
}

.genesis-grid-even,
.genesis-grid-odd {
	margin: 0 0 20px;
}

2. Add Featured Image Size

If you would like to display featured images (or grid thumbnails), you’ll need to register the new featured image size(s). Simply open up your child theme’s functions.php file and place the code below into it. You will need to re-upload any post images for the new size to display, or you can use the Regenerate Thumbnails plugin.

/** Add new image sizes **/
add_image_size('grid-thumbnail', 100, 100, TRUE);

3. Create a home.php File

<?php
remove_action( 'genesis_loop', 'genesis_do_loop' );
add_action( 'genesis_loop', 'child_grid_loop_helper' );
/** Add support for Genesis Grid Loop **/
function child_grid_loop_helper() {
	if ( function_exists( 'genesis_grid_loop' ) ) {
		genesis_grid_loop( array(
			'features' => 2,
			'feature_image_size' => 0,
			'feature_image_class' => 'alignleft post-image',
			'feature_content_limit' => 0,
			'grid_image_size' => 'grid-thumbnail',
			'grid_image_class' => 'alignleft post-image',
			'grid_content_limit' => 0,
			'more' => __( '[Continue reading...]', 'genesis' ),
			'posts_per_page' => 6,
		) );
	} else {
		genesis_standard_loop();
	}
}

/** Remove the post meta function for front page only **/
remove_action( 'genesis_after_post_content', 'genesis_post_meta' );

genesis();

4. Understanding the Parameters

‘features’
This is the number of posts that will show at the top of the page.

‘feature_image_size’
This is the size of the featured image in the features section to be shown (set to 0, which will return no image).

‘feature_image_class’
This is where classes are assigned to the featured image in the features section which can be used for styling.

‘feature_content_limit’
This is where you can specify the number of characters of the post to show in the features section (set to 0, which will return the full content).

‘grid_image_size’
This is the size of the image in the grid section to be shown (set to 0, which will return nothing).

‘grid_image_class’
This is where classes are assigned to the featured image in the grid section which can be used for styling.

‘grid_content_limit’
This is where you can specify the number of characters of the post to show in the grid section (set to 0, which will return the post excerpt).

‘more’
This is where you can specify the text that is displayed when using the content limit option.

‘posts_per_page’
This is were you can determine how many posts are shown on each page.