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.
Click here to get full access to all tutorials & coding support for 1 month