Copyblogger style Post Grid Layout in Genesis

This tutorial provides the steps to create a Copyblogger style Post Grid Layout in Genesis.

Preview:

Tablet and Mobile View.

Tested in Genesis Sample 3.2.0 but will work with most of the Genesis child themes.

Idea:

1. Create a custom Grid container using CSS Grid with native support for old browsers.
2. Reposition Entry Meta (above content) and Entry Meta (below content) and post title.
3. Loop Counter to remove and add Entry content on selected posts.

Let's start.

Prerequisite:

A. Go to Settings > Reading and Blog pages show at most = 12

These are optional steps and code will go in child-theme/functions.php

1. Create an Author Gravatar Shortcode using the code

//* Add author avatar shortcode
add_shortcode('author_avatar', 'dy_author_gravatar', 1);
function dy_author_gravatar(){
	
	$avatar = get_avatar( get_the_author_meta( 'ID' ) );
	$avatarURL = get_author_posts_url( get_the_author_meta( 'ID' ) );
	
	echo '<div class="entry-gravatar">';
	echo '<a href="'.$avatarURL.'">'.$avatar.'</a>';
	echo '</div>';
}

Usage:

[author_avatar]

2. Change Read more Link

//* Modify the Genesis content limit read more link
add_filter( 'get_the_content_more_link', 'dy_read_more_link' );
function dy_read_more_link() {
	return '... <a class="more-link" href="' . get_permalink() . '">Continue Reading</a>';
}

3. Create a Widget area for Blog after Site Header

// Register Hero Section widget area.
genesis_register_widget_area( array(
    'id'          => 'hero-section',
    'name'        => __( 'Hero Section', 'theme-name' ),
	'description' => __( 'This is the hero section widget area.', 'theme-name' ),
	'before_title' => '<h1 itemprop="headline" class="hero-title main-title">',
	'after_title'  => '</h1>',
) );

// Display Hero Section widget area after site header.
add_action( 'genesis_after_header', 'dy_hero_section_widget_area' );
function dy_hero_section_widget_area() {

    //if we are not on the post page, Abort.
    if ( ! is_home() || is_paged() ) {
        return;
    }

    genesis_widget_area( 'hero-section', array(
        'before' => '<div id="hero-section" class="hero-section-widget hero-section"><div class="wrap">',
        'after'  => '</div></div>',
    ) );
}

STEP 1

There are two files (auto templates) we need to create as per the archive and post page, under child-theme.

1. home.php and 2. archive.php

Add the Required code in child-theme/home.php and archive.php