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

WP SITES

2672

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Contact
  • Tags
  • Log in

Premium Member? - Request custom code

Full Width Responsive Blog Page Header Image

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 :

Register for full access

Blog Page Header Image

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

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

Learn PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems