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.
Code Installation
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 :