Today we have launched new Home Page Layout on Crunchify. It’s based on Grid Layout. This tutorial will help you on how to Create a Grid Layout with Genesis Themes.
As you see on home page, it has only 1st post as a featured post with content length 300. Remaining 8 posts on Home page is in Grid Layout. This tutorial will help you achieve exactly same layout for your child theme. You will be able to add Grid View on HomePage in Genesis Framework.
Let’s get started:
Step-1
- Open
text editorand put below code. - Save file as home.php or
front-page.php. For me it’s front-page.php.
<?php
/**
* This file adds the Home Page to the Genesis Theme.
*
* @author Crunchify
* @package crunchify
* @authorUrl https://crunchify.com
*/
remove_action( 'genesis_loop', 'genesis_do_loop' );
add_action( 'genesis_loop', 'crunchify_grid_loop_helper' );
function crunchify_grid_loop_helper() {
if ( function_exists( 'genesis_grid_loop' ) ) {
genesis_grid_loop( array(
'features' => 1,
'feature_image_size' => 'crunchify-featured',
'feature_image_class' => 'crunchify-img',
'feature_content_limit' => 300,
'grid_image_size' => 'crunchify-featured',
'grid_image_class' => 'crunchify-img',
'grid_content_limit' => 250,
'more' => __( '[Continue reading]', 'crunchify' ),
) );
} else {
genesis_standard_loop();
}
}
//* Run the Genesis loop
genesis();
Step-2
Put file into your child theme’s root folder at the same location as your style.css and functions.php file.
Step-3
Open style.css file and add below CSS code.
@media screen and (min-width: 1025px) {
.grid-featured {
margin: 0px -30px;
max-width: 349px;
}
}
@media only screen and (max-width: 480px) {
.genesis-grid-even,
.genesis-grid-odd {
width: 100%
}
}
.genesis-grid-even,
.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;
}
.entry-meta,
.genesis-grid .entry-meta {
font-size: 12px
}
.crunchify-featured {
margin: 0px -30px;
max-width: 350px;
}
.crunchify-img {
padding-bottom: 20px;
border: 1px solid #f0f0f0;
border-radius: 2px;
}
This CSS will add Grid layout on your home page.
Step-4
Clean your site cache and browser cache and reload your page to see updated new layout for your Genesis WordPress Theme site.
Here is a layout screenshot.
Live example?
Visit https://crunchify.com home page 🙂
Let me know if you have any questions and face any issue implementing this. Help is just a message away.