Using The Genesis Grid Loop For Different Home Post Layouts

Out of the box, most Genesis child themes include home page widgets. Some also include posts which display below the widgets in a 2 column grid layout. If you’re using a theme which only provides widgets on your home page, you can also display posts using the Genesis grid loop.

To extend this further, you can also display some posts in full width, by content limit or full content length and others in a grid as excerpts.

All this can be achieved using the Genesis grid loop.

Here’s a summary of what this tutorial will teach you:

• Add grid loop to home page template
• Display both full width post excerpts & teasers in grid
• Display full content posts & teasers in grid on home page

Here’s some images of what you can achieve using the genesis grid loop.

There’s 2 display settings to choose from:

Grid = Post Teasers (Excerpts) Side by Side in a 2 column layout
Featured = Full Width Posts (Content Limited or Full Content)

Post Teasers In Grid Columns

This code displays 4 post excerpt teasers in a 2 column grid layout. Simply paste in your home.php file in the position you want to display your grid.

Full Width Post Excerpt In Grid Loop

Full Width Featured Post Excerpts & Teasers In Grid Loop

Summary of Images

The images above clearly show you what can be done using the genesis_grid_loop code. The values in the code are easy to modify to achieve any of these layouts.

Lets now take a look at the code you can simply copy and paste into your existing home page or new blog page template:

remove_action( 'genesis_loop', 'genesis_do_loop' );
add_action( 'genesis_loop', 'child_grid_loop_helper', 55 );
/** Add support for Genesis Grid Loop **/
function child_grid_loop_helper() {

	if ( function_exists( 'genesis_grid_loop' ) ) {
	
		genesis_grid_loop( array(
			'features' => 1,
			'feature_image_size' => 250,
			'feature_image_class' => 'alignleft post-image',
			'feature_content_limit' => 1000,
			'grid_image_size' => 'grid',
			'grid_image_class' => 'alignleft post-image',
			'grid_content_limit' => 220,
			'more' => __( 'Continue reading...', 'genesis' ),
			'posts_per_page' => 6,
		) );

	}

	else {
		genesis_standard_loop();
	}

}

genesis()

This code is taken from the StudioPress Balance child theme.

Here’s a basic summary of the different parameters which you can change to suit your needs.

There’s settings for both full width featured posts and grid loop excerpts side by side.

Features

features – This determines how many full width featured posts are displayed
featured_image_size – This value enables you to set the size of the featured image or post thumbnail specific to featured posts only.
feature_image_class – Here you can set the align your featured image to the left, right or align none for full width images.
feature_content_limit – Limit the amount of content displayed so your text excerpts end in line with your image.

Grid

grid_image_size – Add support for a grid image in your child themes functions.php file. This size will be used for all post thumbnails displayed with post excerpts displayed in a grid column, side by side.
grid_image_class – Align your post thumbnails in a grid to the left or right.
grid_content_limit – Use this setting to limit your text content wrapped around your post thumbnail in a grid.

more – Customize the read more or continue reading text to your liking.
posts_per_page – Set the amount of posts your want displayed on each page for your home page. This number includes both full content width featured posts and posts displayed in a grid.

Grid Thumbnail Image

Simply add one line of PHP code to your child themes functions.php file and add the name for the image as grid.

add_image_size( 'grid', 150, 150, TRUE );

Learn more about how to add custom image sizes in WordPress.

Featured Image Sizes

The featured_image_size can be set in the code which will resize the image you add in each edit post screen using the default Set Featured Image feature.

Position Of Grid & Featured Posts On Home Page

You can paste the code anywhere in your home.php file.

If you want to display your grid below your home page widgets, I suggest you paste the code below the PHP for the widgets and add a third parameter to the action as seen in the code snippet above which uses 55 as the priority for positioning.

Styling & Padding

The only real challenge when creating your own grid where post excerpts are displayed in 2 columns, is the styling. Each theme will be different.

The above images where taken using the Agency child theme and no CSS was needed. You will find other child themes require you to add CSS code otherwise the grid may not display in 2 columns.

If you own the StudioPress Pro Plus package of themes, you can easily take the CSS from any which are using a grid and modify it to work with your theme.