Add Different Header Image To Front Page or Landing Page Template

There’s different methods you can use to change the header image however, these are the best based on clean code efficiency and mobile responsiveness.

This tutorial contains the code which enables you to use a header image which is different than the default image. The default header image is generally added via the WordPress customizer, however you can change it on one or more specific page templates like your front page or landing page.

The code in this tutorial enables you to:

• Add a full width mobile responsive header image to a specific type of page template. Add the image named header.png to your child themes images folder.
• Remove the default header image ( logo ) from the same template or display it over the top of the full width image.
• Remove the site title from the template.
• Remove the site description from the template.
• Change the header image ( logo ) only on a specific page template. Add the image named logo.png to your child themes images folder.

To do any of the above, you simply copy & paste the code into the page template you are using.

Demo Video

The demo video shows you how you can add the code in this tutorial to your front-page.php file of page_landing.php file to change the default header image on different page templates.

You can also use one of the other code snippets to change the logo image on any number of page templates enabling you to display a different image on any page.

Tested using the Lifestyle Pro child theme by StudioPress however will work using other Genesis child themes.

Here’s the 5 code snippets for logged in members: