Horizontal Opt-in Form below Site Header in Genesis Sample

This is an updated version of Horizontal Opt-in Form in Genesis using eNews Extended plugin and Flexbox for Genesis Sample 2.6.0.

Step 1

Install and activate Genesis eNews Extended plugin.

Step 2

Add the following in Genesis Sample's functions.php:

// Registers `horizontal-opt-in` widget area.
genesis_register_widget_area(
    array(
        'id'          => 'horizontal-opt-in',
        'name'        => __( 'Horizontal Opt-in', 'text-domain' ),
        'description' => __( 'This is the horizontal opt-in section.', 'text-domain' ),
    )
);

add_action( 'genesis_after_header', 'sk_horizontal_optin' );
/**
 * Displays Horizontal Opt-in widget area below header.
 */
function sk_horizontal_optin() {

    genesis_widget_area( 'horizontal-opt-in', array(
        'before' => '<div class="horizontal-opt-in"><div class="wrap">',
        'after'  => '</div></div>',
    ) );

}

Step 3

Change the selector in the Javascript file that should automatically get a top margin equal to the height of the site header.

In js/genesis-sample.js change