Add Image After Header In Genesis

There’s at least 4 ways to add a full width image after the header in any Genesis child theme.

This tutorial provides several basic code examples you can use to add your full width after header image via a template or from your child themes functions file:

Method 1 – Front Page Template

You can add this PHP code directly to your child themes existing front-page.php file or create a new front-page.php file and add the code.

add_action( 'genesis_after_header', 'after_header_image' );

function after_header_image() {

    $image = sprintf( '%s/images/after-header.png', get_stylesheet_directory_uri() );
    
    $output = sprintf( '<img src="%s" alt="Image" />', $image );
    
    echo $output;
}

After adding the PHP code to your template file, add a image named after-header.png to your child themes images folder.

Method 2 – Functions File

Using a code editor, add the following PHP code to the end of your child themes functions.php file. Then add a image named after-header.png to your child themes images folder.

add_action( 'genesis_after_header', 'after_header_image' );

function after_header_image() {

if ( is_front_page() ) {

    $image = sprintf( '%s/images/after-header.png', get_stylesheet_directory_uri() );
    
    $output = sprintf( '<img src="%s" alt="Image" />', $image );
    
    echo $output;
    }

}

The above method uses a conditional tag which can be changed to add or exclude a image to any page type.

Method 3 – Style Sheet

This method requires printing the div class using PHP code and then adding the image via your child themes style.css file.

There’s 2 steps:

Step 1 : Add the following PHP code to the end of your child themes functions.php file.

add_action( 'genesis_after_header', 'after_header_image' );

function after_header_image() {

if ( is_front_page() ) {
    
    echo '<div class="after-header"></div>';
    
    }
    
}

Step 2 : Add the following CSS to the end of your child themes style.css file:

.after-header {
    background: url(images/after-header.png);
    min-height: 200px;
}

Then add a image named after-header.png to your child themes images folder.

Method 4

This is the best solution which provides the best results for mobile responsiveness and flexibility.

Registration Required. Click here to register for full access

Method 1 – Front Page Template

Method 2 – Functions File

Method 3 – Style Sheet

Method 4

Related Tutorials