Adding background images to multiple widget sections via Customizer in Genesis

Updated on May 09, 2018 for Genesis Sample 2.6.0

In my tutorial requests Trello board, a user asked:

Would love to see a tutorial on adding background images to multiple widget sections via the customizer--similar to Altitude Pro. (e.g. to front-page-1, front-page-3, front-page-5, etc.) On the Sample theme or any theme.

In this article, we shall

• register 4 front-page widget areas
• create a template for displaying widgets in the widget areas on full-width (edge to edge) front page
• implement code from Altitude Pro in Genesis Sample for setting up Front Page Background Images section in WordPress Customizer

Screenshot:

Screencast:

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

Step 1

Add the following in child theme's functions.php:

// Registers front-page widget areas.
for ( $i = 1; $i <= 4; $i++ ) {
    genesis_register_widget_area(
        array(
            'id'          => "front-page-{$i}",
            'name'        => __( "Front Page {$i}", 'my-theme-text-domain' ),
            'description' => __( "This is the front page {$i} section.", 'my-theme-text-domain' ),
        )
    );
}

Step 2

Edit lib/customize.php