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

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

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

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.