Add New Image Section to Genesis Workstation Pro Theme

It’s straightforward to add an additional new image background section to Genesis Workstation Pro child theme. You’ll need to edit a few files, so follow the steps in this Genesis theme customization tutorial carefully.

Save copies of the original files before you start editing, and be sure you have FTP access, in case something goes wrong.

Follow the Steps:

Step 1. Edit output.php

Look in /workstation-pro/lib/output.php and find line 19.
It is:

$opts = apply_filters( 'workstation_images', array( '1', '2' ) );

Add a ‘3’, so line 19 is:

$opts = apply_filters( 'workstation_images', array( '1', '2', '3' ) );

Step 2. Edit customize.php

Look in /workstation-pro/lib/customize.php and find line 37.
It is:

$images = apply_filters( 'workstation_images', array( '1', '2' ) );

Add a ‘3’ again, so line 37 is:

$images = apply_filters( 'workstation_images', array( '1', '2', '3' ) );

Step 3. Edit front-page.php

You’ll need to make two changes to front-page.php.

1. Add this line, near the top of the function.

$image_section_3 = get_option( '3-workstation-image', sprintf( '%s/images/bg-3.jpg', get_stylesheet_directory_uri() ) );

2. Add the image section 3 after a genesis_widget_area. I added it after front-page-1, for this tutorial.

	if ( ! empty( $image_section_3 ) ) {
		echo '<div class="image-section-3"></div>';
	}

Here is the full function to replace in front-page.php. You still need to keep the other lines in front-page.php; this just replaces the function.

<?php //Don't add this line

function workstation_front_page_widgets() {

	$image_section_1 = get_option( '1-workstation-image', sprintf( '%s/images/bg-1.jpg', get_stylesheet_directory_uri() ) );

	$image_section_2 = get_option( '2-workstation-image', sprintf( '%s/images/bg-2.jpg', get_stylesheet_directory_uri() ) );

	$image_section_3 = get_option( '3-workstation-image', sprintf( '%s/images/bg-3.jpg', get_stylesheet_directory_uri() ) );

	if ( ! empty( $image_section_1 ) ) {	
		echo '<div class="image-section-1"></div>';	
	}

	genesis_widget_area( 'front-page-1', array(
		'before' => '<div id="front-page-1" class="front-page-1"><div class="flexible-widgets widget-area wrap' . workstation_widget_area_class( 'front-page-1' ) . '">',
		'after'  => '</div></div>',
	) );

	if ( ! empty( $image_section_3 ) ) {
		echo '<div class="image-section-3"></div>';
	}

	genesis_widget_area( 'front-page-2', array(
		'before' => '<div id="front-page-2" class="front-page-2"><div class="flexible-widgets widget-area wrap' . workstation_widget_area_class( 'front-page-2' ) . '">',
		'after'  => '</div></div>',
	) );

	genesis_widget_area( 'front-page-3', array(
		'before' => '<div id="front-page-3" class="front-page-3"><div class="flexible-widgets widget-area wrap' . workstation_widget_area_class( 'front-page-3' ) . '">',
		'after'  => '</div></div>',
	) );

	if ( ! empty( $image_section_2 ) ) {
		echo '<div class="image-section-2"></div>';
	}

	genesis_widget_area( 'front-page-4', array(
		'before' => '<div id="front-page-4" class="front-page-4"><div class="flexible-widgets widget-area wrap' . workstation_widget_area_class( 'front-page-4' ) . '">',
		'after'  => '</div></div>',
	) );

}

Step 4. Edit style.css

You need to make three edits to style.css to add image-section-3.

Instead of editing your style.css, you can add the styles to Appearance > Customize > Additional CSS.

1. The first one is near line 1565; edit, so it looks like:

.image-section-1,
.image-section-2,
.image-section-3 {
    background-position: top;
    background-size: cover;
    min-height: 500px;
}

2. The second is to @media only screen and (max-width: 1220px). Find and add image-section-3.

@media only screen and (max-width: 1220px) {

    .image-section-1,
    .image-section-2,
    .image-section-3 {
        min-height: 400px;
    }
}

3. The third is to @media only screen and (max-width: 880px). Find and add image-section-3.

@media only screen and (max-width: 880px) {
    .image-section-1,
    .image-section-2,
    .image-section-3 {
        min-height: 200px;
    }
}

Save all those changes and upload the edited files to your theme folder. Be sure to add output.php and customize.php to the /lib/ folder.

Step 5. Add the New Image

Now you can look in your WordPress Admin.
Click Appearance > Customize and then choose “Front Page Background Images”.
You will now see the option to upload the third image. Add it, and click the blue Save & Publish button.

This is what it will look like:

If you don’t see the new image 3 or images 1 and 2, you can remove all the images, click the Save & Publish button, and then add the images again, and Save & Publish.

If you try this, please let me know how it went!

This tutorial is based on my response to a StudioPress forum question.