This code enables you to add a full width header image to your blog page. You can set a default in the code which uses a image named default.jpg from your child themes images folder. You c an then upload, select from media library or change your image via the customizer.
Let’s take a look at the following video to see how this solution works on smaller screens when the responsive mobile menu is used :
Note : The solution demonstrated in the above video uses the after header menu option which works perfectly fine with a full width header image. However, the solution may not work the same when using a custom menu widget in the header right widget area therefore its recommended to use the after header menu selection. Tested using the Genesis Sample child theme by StudioPress.
There’s 3 easy steps once you access the files for members :
Step 1 : From the download folder, upload the folder named header to your child themes root directory.
Step 2 : From the download folder, copy & paste the PHP code from the functions.php file to the end of your child themes functions.php or lib > customize.php file.
Step 3 : From the download folder, upload the file named page_blog.php to your child themes root directory and select the Blog Page – Custom template from the Templates drop down menu on any Edit Page screen you plan to use for your blog page.
Step 4 : Upload a image named default.jpg to your child themes images folder and use the Custom Blog Page Header customizer setting to upload, change or set a full width background image for your site header.
Here’s the download folder for logged in members :