Create 3 columns grid view layout for home page in Minimum PRO Theme

Generally 2 columns grid view for blog posts are available in Minimum PRO Theme. But my client is asking for three columns grid loop for posts and portfolio. So I modified the home page design little bit for it. I accomplished this by following steps:

1. Remove the Grip Loop code from front-page.php file
2. Create New widget area and add this in Home page template file
3. Showing 3 columns portfolio & Latest Posts
4. Style the design

1. Removing the Grip Loop code from front-page.php file

First open the file “front-page.php” on Notepad+ or Theme Editor (Dashboard->Appearance->editor). Comment out following line

//* Add Genesis grid loop
//add_action( 'genesis_loop', 'minimum_grid_loop_helper' );

Also you can delete this bunch of codes from the file:

//* Genesis grid loop
function minimum_grid_loop_helper() {
	if ( function_exists( 'genesis_grid_loop' ) ) {
		genesis_grid_loop( array(
			'features'              => 0,
			'feature_image_size'    => 0,
			'feature_content_limit' => 0,
			'grid_image_size'       => 0,
			'grid_content_limit'    => 250,
			'more'                  => __( '[Read more]', 'minimum' ),
		) );
	} else {
		genesis_standard_loop();
	}
}

2. Creating New widget area and adding this into Home page template file

Add the following code in functions.php file and it will create “Home Featured 5” widget area for home page

genesis_register_sidebar( array(
	'id'          => 'home-featured-5',
	'name'        => __( 'Home Featured 5', 'minimum' ),
	'description' => __( 'This is the home featured 5 section.', 'minimum' ),
) );

Now add this widget in Home page. Add this code in front-page.php file:

add_action('genesis_loop', 'add_home_featwdgt_5')
function add_home_featwdgt_5() {
genesis_widget_area( 'home-featured-5', array(
'before' => '<div class="home-featured-5 grid-layout widget-area>',
'after' => '</div>',
) );
}

3. Showing my portfolio & Latest Posts

Generally Genesis Featured Post widget is not supporting the custom post type option. And “portfolio” is a custom post type which is creating by Minimum PRO theme. For this reason I created a PRO plugin “Extended Featured Content Widget” for post,page & custom post type content. User can use this into Non-Genesis theme. It is compatible with any WordPress Theme. It have lot of features.

Ok. I drag & drop the “Extended Featured Widget” in Home section 5 widget area and setup it for my Portfolio content. See the image below

Same way I setup the widget for my Blog Posts.

4. Styling the design

I added few css in style.css file for better look. You can use this CSS also

/*********** Home Featured Section 5 **********/
.home-featured-5 .widget{
  margin-bottom: 50px;
}

.home-featured-5 h4.widget-title{
  font-size: 34px;
  margin-bottom: 85px;
  position: relative;
  text-align: center;
}

.home-featured-5 h4.widget-title:after {
    border-top: 1px solid #e2e2e2;
    content: "";
    display: block;
    margin: 0 auto;
    position: relative;
    top: 22px;
    width: 10%;
}

.home-featured-5 h2.entry-title {
    font-size: 24px;
    line-height: 1;
}
This site uses cookies to offer you a better browsing experience. By browsing this website, you agree to our use of cookies.