How To Add Grid Layout In Genesis Framework Front Page


An attractive front page of the website will help you to impress your website visitors. Most folks are using some kind of page builder for creating a custom front page. While using the Genesis Framework, you don’t need any plugin for this. In this post, we will show you that how can you add grid layout in Genesis framework front page using a custom code.

How To Add Grid Layout In Genesis Framework Front Page

First of all, you need to create a file called front-page.php locally. Open notepad on your computer and add below code in it.

/** * This file adds the Home Page to the Genesis Theme. 
* @author Sreehari Sree
* @package aprilegg
* @authorUrl

remove_action( 'genesis_loop', 'genesis_do_loop' );
add_action( 'genesis_loop', 'aprilegg_grid_loop_helper' );
function aprilegg_grid_loop_helper() {

    if ( function_exists( 'genesis_grid_loop' ) ) {
        genesis_grid_loop( array(
                        'features' => 1,
			'feature_image_size'    => 'aprilegg-featured',
			'feature_image_class'   => 'aprilegg-img',
			'feature_content_limit' => 300,
			'grid_image_size'       => 'aprilegg-featured',
			'grid_image_class'      => 'aprilegg-img',
			'grid_content_limit'    => 250,
			'more'                  => __( 'Read More', 'aprilegg' ),
		) );
	} else {
//* Run the Genesis loop

After creating it, simply upload the file to your child theme’s directory. It will be like wp-content/themes/your-theme/. Make sure that you have named it front-page.php

Add Grid Layout In Genesis Framework Front Page

Now, we need to style the grid. For that, you need to edit your theme’s CSS file. Go to theme editor and edit the style.css file.

@media screen and (min-width: 1025px) {
.grid-featured {
margin: 0px -30px;
max-width: 349px;
@media only screen and (max-width: 480px) {
.genesis-grid-odd {
width: 100%
.genesis-grid-odd {
margin-bottom: 20px;
width: 48%
.content-sidebar-sidebar .sidebar-secondary,
.genesis-grid-even {
float: right
.genesis-grid-odd {
clear: both;
float: left
.genesis-grid .entry-title,
.genesis-grid .entry-title a {
font-size: 22px;
line-height: 1.4!important;
overflow: hidden
.genesis-grid {
font-size: 16px;
overflow: hidden;
line-height: 30px;
padding: 30px;
.genesis-grid .entry-meta {
font-size: 12px
.aprilegg-featured {
margin: 0px -30px;
max-width: 350px;
.aprilegg-img {
padding-bottom: 20px;
border: 1px solid #f0f0f0;
border-radius: 2px;

Simply check your website’s front end. It will show your latest posts in a grid format.

Add Grid Layout In Genesis Framework Front Page

This is how you can add grid layout in genesis framework front page. We hope you enjoyed the post and found it useful. If you did, please consider sharing this post with your friends. It will help them to improve their front page and us to write more related posts. Also, check how to change Genesis breadcrumb separator using code.



One Response

  1. Kunal May 14, 2018

Leave a Reply