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

WP SITES

2787

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Add Unique Header Image To Custom Landing Page Template for Genesis

This code creates a custom landing page template which:

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

Code Installation

  1. 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.
  2. Add the CSS to your child themes style.css file

Register for full access

Related Tutorials

  • Add Different Header Image To Front Page or Landing Page Template
  • Custom Splash Page Template For Genesis With Image
  • Add Custom Header To Home Page Only In Genesis

Reader Interactions

Comments

  1. Joana Nastari says

    December 6, 2014 at 12:21 pm

    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
    • Brad Dalton says

      December 6, 2014 at 12:53 pm

      Hi Joana

      Try this http://wpsites.net/registration/

      Log in to Reply
  2. Tracy says

    August 23, 2014 at 6:27 am

    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?

    .custom-landing .site-header {
    	background-image:

    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
    • Brad Dalton says

      August 23, 2014 at 6:51 am

      Hello Tracy

      You can add it from your images folder like this:

      .page-template-page_landing-php {
          background-image: url('images/image.png');
      }

      Here’s an example of how to use a different header image on a custom landing page.

      Log in to Reply
  3. Pavle says

    May 13, 2014 at 8:47 pm

    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

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.