Add Unique Header Image To Custom Landing Page Template for Genesis

May 12, 2014

—

Brad Dalton

This code creates a custom landing page template which:

Includes code to remove the default header only from the landing page
A custom function to display a custom header image on the landing page template only

Code Installation

Create a new file named page_landing.php using a code editor like Notepad++ and copy the PHP code from the view raw link into your new file. You can then upload the file to your child themes root directory and select it from the drop down menu in the Page Attributes when creating a new page.
Add the CSS to your child themes style.css file

Comments

5 responses to “Add Unique Header Image To Custom Landing Page Template for Genesis”

Joana Nastari

December 6, 2014

Thanks for this, Brad.
I’m trying to add the code for an existing page template, but it also add the custom header image on all the pages over the site.

What can I do?

Thanks!

Log in to Reply
1. Brad Dalton
  
  December 6, 2014
  
  Hi Joana
  
  Try this http://wpsites.net/registration/
  
  Log in to Reply
Tracy

August 23, 2014

Hi Brad,

I’m a new member to your site, and so thankful that I have you as an expert to help someone like me, who knows next to nothing about WordPress, let alone how to use CSS codes.

Using your instructions, I was able to adjust the width of my landing page, so thank you for that.

My dilemma: I’ve been having the most excruciating time trying to get an image header to show up on my landing page, which I haven’t published yet, and only in DRAFT mode.

The FULL PATH of the custom site header image that I would like to use is:

My question is: How do I implement the full path into CSS for it to show up on my landing page?
[code]
.custom-landing .site-header {
background-image:
[/code]
Any help with what to put in CSS using the path that I provided would be of most help. And I’d be forever thankful.

Log in to Reply
1. Brad Dalton
  
  August 23, 2014
  
  Hello Tracy
  
  You can add it from your images folder like this:
  [code]
  .page-template-page_landing-php {
  background-image: url(‘images/image.png’);
  }
  [/code]
  
  Here’s an example of how to use a different header image on a custom landing page.
  
  Log in to Reply
Pavle

May 13, 2014

Brad,

Amazing tutorial. I definitely need something like this. Need to add it on my TODO list.
Thanks so much for everything you do, amazing site! Can´t stop learning from your posts.

Log in to Reply