How to add custom-sized header to landing page

[howtofeelhappier]

Hi,
I've been round-and-round in circles and have read loads of the posts here, but I can't find out how to do this!

I want to add a header to a landing page, which is a different size to my site's usual header (so from what I can see a plugin won't work?).

Here's the URL of my Work-In-Progress:

Gratitude Inner Circle

What I want is to create a header image between the two menus.

I would also like the top menu to be right-aligned.

Can anyone help please?

I am using Crystal (with no landing page, so have adapted the one from Outreach_pro)

Thank you so much!

Namaste,
Clare

Here's my landing page file:

<?php
/**
* This is adapted from the landing page for the outreach pro theme.
*
* @author StudioPress
* @package Outreach Pro
* @subpackage Customizations
*/

/*
Template Name: Gratitude Inner Circle All Pages
*/

// Add custom body class to the head
add_filter( 'body_class', 'add_body_class' );
function add_body_class( $classes ) {
$classes[] = 'gratitude';
return $classes;
}

//* Force full width content layout
add_filter( 'genesis_site_layout', '__genesis_return_full_width_content' );

//* Remove site header elements
remove_action( 'genesis_header', 'genesis_header_markup_open', 5 );
remove_action( 'genesis_header', 'genesis_do_header', 10 );
remove_action( 'genesis_header', 'genesis_header_markup_close', 15 );
remove_action( 'genesis_before_header', 'utility_bar' );

//remove nav - uncomment these to remove the original menu (if needed)
remove_action( 'genesis_before_header', 'genesis_do_nav' );
remove_action( 'genesis_after_header', 'genesis_do_subnav' );

//* Remove breadcrumbs
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );

// Add new navbar
add_action('genesis_before_header', 'customnavgratitudetop' );
function customnavgratitudetop() {
require(CHILD_DIR.'/customnavgratitudetop.php');
}

// Add new navbar
add_action('genesis_after_header', 'customnavgratitude' );
function customnavgratitude() {
require(CHILD_DIR.'/customnavgratitude.php');
}

//* Run the Genesis loop
genesis();

http://www.clarejosa.com/gratitude-inner-circle/temp/

[Brad Dalton]

1. You could hook it in conditionally from your child themes functions file using the

is_page_template('page_landing.php')

conditional tag

Or

2. Hard code it into your landing page template.

In both cases, you would need to remove the default.

3. Or you could use CSS code to add it and remove the default using a remove_action conditionally or in your file.

Did this for a client last week and simply used PHP code from the functions file.

---

Tutorials for StudioPress Themes.

[howtofeelhappier]

Hi Brad,
Thanks for getting back to me on this one.
As far as I can tell, I have done the 'remove' bit in the code above.

Where I'm stuck is how to tell my website to use a different header image for that one page. I'm happy to do it in the landing page's code - I'm just looking for the snippet to do it and I have spent hours this morning looking for it.

To be honest, I'd expect it to be such a common thing to want to do that I was surprised I couldn't find the answer on the forum 🙂

The 'hard-coding in the landing page template' is my favourite option - is there a snippet or tutorial out there that could help?

I'm super-keen to learn how to do this - and I'm sure it will help other StudioPress users.

Thanks everyone!
Namaste,
Clare

[Brad Dalton]

There's several on my site which include different ways to get what you need.

---

Tutorials for StudioPress Themes.

[howtofeelhappier]

Hi Brad,
I have used a combo of

Add Unique Header Image To Custom Landing Page Template for Genesis

and

Display Different Header Images Using CSS Code

However, my below-header menu is showing in the middle of the header image (it seems to still be taking its header-height instruction from the main website's css - even though I have removed this header).

I'm not trying to be stupid, but I'm still going round in circles and I'm not an expert but far from a newbie. So I am definitely trying to help myself, not sponging off the forums 🙂

Is there anyone who can spot what I have done wrong?

Thanks!
Clare

[Brad Dalton]

No need to use both,

Just use the first solution.

Please link to your live landing page.

Can't troubleshoot problems unless can see the code.

---

Tutorials for StudioPress Themes.

[howtofeelhappier]

Here's my landing page - http://www.clarejosa.com/gratitude-inner-circle/temp/ - it's now working - but I have now lost the header image for my home page... http://www.clarejosa.com

Thanks Brad. 🙂

[howtofeelhappier]

Woo hoo! Got them both working now - not entirely sure how, but it's working.
Thank you for your tutorials, Brad.
I know where to look next time I'm accidentally tempted to use Google instead 🙂

[ZAAAX]

Great help Brad & howtofeelhappier, easy to find, thanks for this.

I do have one little question tho. I want the header complete to show above the landing page content, which I can do by creating a custom landing page, uploading it, which I've done, and deleting the ....

//* Remove site header elements
remove_action( 'genesis_header', 'genesis_header_markup_open', 5 );
remove_action( 'genesis_header', 'genesis_do_header' );
remove_action( 'genesis_header', 'genesis_header_markup_close', 15 );

from the code call, therefore adding the header into the custom landing page, sweeet.

I wanted to have the header logo image NOT clickable tho, and I was wondering how to do this ... hope I make sense.

---

Crisp!

ZAAAX Design

[Author]

Posts