• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar

WP SITES

2468

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Subscribe
  • Register
  • Videos
  • Log in

Need Help? - Get Coding Support Now

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 – 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" class="after-header" 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-image: url(images/after-header.png);
    min-height: 200px;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
}

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

Method 4 #

This is another solution which may or may not work better depending on the size & content of your images.

Click here to get full access to all tutorials

Related Tutorials

  • Image After Header On Genesis Blog Page Template
  • Full Width Featured Image After Header In Genesis
  • Unique After Header Images On All Pages In Atmosphere Pro
  • Add Different Image After Header in Genesis
  • Content Over Unique Image On Single Pages
  • Responsive After Header Image Text & Button
  • Title Over Full Width Featured Image

After Header Image Magazine Pro

Primary Sidebar

Recently Coded

  • Infinity Pro – Change Team Page From 4 To 3 Columns
  • Infinity Pro Vertical Menu
  • Genesis Sample Theme – Custom Archive Page Template With Different Hero Images
  • Foodie Pro – Reposition Search Box Before Nav Menu
  • Showcase Pro – Use Custom Image As Single Post Entry Header Background

Brad Dalton Specializes In Genesis child theme customization & code modification.

Advertise · WPEngine · Genesis · Log in

  • Membership
  • by Theme
  • Contact
  • RSS
  • Newsletter ( Twice Weekly )