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>

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

Step 4

Add the following at the end of functions.php:

Powered by Start Fast Stay Fast Website Speed Optimization Theme by SiteNow

Get more stuff like this
in your inbox

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.

Thank you for subscribing.

Something went wrong.

Leave a Reply

Get more stuff like this
in your inbox

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.

Thank you for subscribing.

Something went wrong.