Custom Home Featured widget area in Genesis using Genesis Featured Posts Combo

In the comments section of Custom Home Featured widget area using Flexible Posts Widget in Genesis, a user asked:

May I ask, how can this be applied to the Genesis Featured Posts Combo plugin?

This tutorial provides the steps to customize the entries output by Genesis Featured Posts Combo plugin's widget with the date at the top left; categories, date and linked title at the bottom overlayed on top of the images.

After completing the steps in this tutorial, placing the plugin's widget into Home Featured widget area i.e.,

will result in something like:

We shall register a custom "Home Featured" widget area and show it below the site header on the homepage.

While the tutorial has been written for Genesis Sample 2.6.0, it should work with a few adjustments in any Genesis theme.

Step 1

Install and activate Genesis Featured Posts Combo (commercial plugin).

Step 2

Edit child theme's functions.php:

a) Change

wp_enqueue_style(
    'genesis-sample-fonts',
    '//fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600,700',
    array(),
    CHILD_THEME_VERSION
);

to

wp_enqueue_style(
    'genesis-sample-fonts',
    '//fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600,700|Archivo+Narrow',
    array(),
    CHILD_THEME_VERSION
);

b) Below

wp_enqueue_style( 'dashicons' );

add

wp_enqueue_style( 'font-awesome', '//use.fontawesome.com/releases/v5.0.10/css/all.css' );

c) At the end of the file, add

// Registers custom size for images in Home Featured section.
add_image_size( 'home-featured', 900, 600, true );

// Registers home-featured widget area.
genesis_register_widget_area(

    array(
        'id'          => 'home-featured',
        'name'        => __( 'Home Featured', 'my-theme-text-domain' ),
        'description' => __( 'Home Featured widget area.', 'my-theme-text-domain' ),
    )
);

add_action( 'genesis_after_header', 'sk_home_featured' );
/**
 * Displays home-featured widget area below the header on homepage.
 */
function sk_home_featured() {

    // if we are not on the front page, abort.
    if ( ! is_front_page() ) {
        return;
    }

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

}

Step 3

At Appearance > Widgets, drag a "Genesis Featured Posts Combo" widget into the "Home Featured" widget area and configure it.

Refer to the screenshot near the top.

Code in Post Info field:

Genesis Plugins Premium Content <span class="far fa-clock" aria-hidden="true"></span>April 30, 2018

Note the Widget ID found at the bottom of the widget.

Step 4

Add the following at the end of functions.php: