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.

artist tools brushes paints green jar
Image from deathtothestockphoto.com

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

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.

genesis workstation pro customizer add background images

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.

genesis workstation pro add third image area to front page
Third image after front page 1 section

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

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

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!


Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy


Comments

3 responses to “Add New Image Section to Genesis Workstation Pro Theme”

  1. Suzanna says:

    Thanks for the great tutorial! I’m working with this theme and this looks very useful.

  2. Marcy – Your tutorial is crystal clear, precise and it worked the first time. Thank you!

    (My site will be published in December 2020)

Leave a Reply

Your email address will not be published. Required fields are marked *