This tutorial provides the code which enables you to display a different image after the header in any Genesis child theme. Tested using the Magazine Pro child theme by StudioPress.
You can add a unique image to any single post or single page as well as any archive page type like your blog listings page, author, category, search, and tag pages as well as any custom post type or custom taxonomy type pages.
When no image is added, a default is show which you can very simply upload to your child theme images folder.
Lets take a look at the demo video which shows exactly what we just referred to :
Video Demo
Simply shows different images being displayed after the header on different posts, pages and archives.
Note : This solution uses 100% pure code however you can install and use the Advanced Custom Fields plugin if you wish to achieve exactly the same result.
Change Image Height
Change the value for the height property in the CSS:
.after-header {
min-height: 200px;
}Code Installation
After downloading the files below, there’s 4 simple steps to install the code :
Step 1 : Add the 2 js files from the js folder to your child themes js folder.
Step 2 : Add the PHP code from the functions.php file to the end of your child themes functions.php file.
Step 3 : Add the CSS from the style.css file to the end of your child themes style.css file. Clear caching if needed.
Step 4 : Add a image named after-header.png to your child themes images folder. This is the default image displayed if no image is added.
Here’s the code for logged in members:
Leave a Reply