How to overlay Title, Post Info and Excerpt on Featured Image in a Genesis Featured Posts Grid

Updated on July 27, 2020

This tutorial provides the steps to customize the output of Genesis Featured Posts using the Custom Genesis Featured Posts Widget plugin and add the CSS to display entries in a 3-column grid.

The title, post info and excerpt (content limit, to be specific) are set to be overlayed on top of the featured image (hidden initially and appear on hover) for the posts in the grid.

Live Demo

The 3-column grid will be set to appear in 2-columns at medium screen widths (959px and below) and 1-column at mobile screen widths (600px and below).

While the tutorial (CSS styling) has been written for Genesis Sample, it should work in any Genesis child theme with minor changes

Step 1

Let's register a custom image size for the featured images in our grid, register a custom home-featured widget area and display this widget area below the header on front page.

// Register image sizes for images in Home Featured section.
add_image_size( 'home-featured', 500, 327, true );

// Register home-featured widget area.
genesis_register_widget_area(
    array(
        'id'          => "home-featured",
        'name'        => __( "Home Featured", 'my-theme-text-domain' ),
        'description' => __( "This is the home featured section.", 'my-theme-text-domain' ),
    )
);

add_action( 'genesis_after_header', 'sk_home_featured' );
/**
 * Display `home-featured` widget area below the header on front page.
 */
function sk_home_featured() {
    // if this is not the front page, abort.
    if ( ! is_front_page() ) {
        return;
    }

    genesis_widget_area( 'home-featured', array(
        'before' => '<div class="home-featured widget-area"><div class="wrap">',
        'after'  => '</div></div>',
    ) );
}

Regenerate thumbnails if needed.

Step 2

Install and activate Custom Genesis Featured Posts Widget plugin.

Step 3

Let's wrap .entry-header and .entry-content in a custom div.entry-overlay.

Edit plugins/custom-featured-post-widget/class-custom-featured-post.php.