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
1 2 |
//* Add Genesis grid loop //add_action( 'genesis_loop', 'minimum_grid_loop_helper' ); |
Also you can delete this bunch of codes from the file:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
//* 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
1 2 3 4 5 |
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:
1 2 3 4 5 6 7 |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
/*********** 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; } |
Paul says
Yes. You will add some custom CSS in media queries.
Liz says
Hi Paul,
I came across this after a good day or more of trying to create a new 3-column widget area for a different genesis theme. Just wondering if I need media query CSS as well as at present, my 3 featured posts are squidging, not floating as a stack when on mobile / smaller screen sizes. I need them to auto stack, not distort before doing so. Any ideas? Thanks for the tut as I got the widget registered fine, and populated.