[Resolved] Individual header image

[Maike]

Hi Tom,
I’m absolutely a newbie in working with wordpress and GeneratePress!
I hope you can help me… 🙂
My problem is, I like to have on each page an individual header image, is this possible –
I hope so! I can’t find a plugin which solves my problem.

Thanks in advance!

Greetings, Maike

[Tom]

Hi there,

Do you want it in the header area, where your logo is?

If that’s the case, you’ll have to use hooks with some PHP conditionals.

However, if you want the image to appear above the content/below the navigation, you can use Featured Images (http://en.support.wordpress.com/featured-images/) or our Page Header add-on.

Let me know.

[Maike]

Hi,
thanks for your quick answer!

I would like to have it in the area where the logo is.
Can you give me an example?

[Maike]

Hi Tom,
today I’ve tried everything, but unfortunately I can’t find a solution for my header-problem…
can you tell me, how I can use these hooks 🙂 I told you I’m a newbie 🙂

[Tom]

Hi there – sorry for not getting back to you sooner!

Ok, here we go.

First, we need to remove the default header, so go to “Appearance > Customizer > Header Content”, hide the title and tagline, and remove the logo.

Now, go to “Appearance > GP Hooks > Before Header Content”.

This is where we will add our code.

We’ll be using PHP conditionals, using the ones WordPress provides: http://codex.wordpress.org/Conditional_Tags

If we want to specify a page, we would use these conditionals: http://codex.wordpress.org/Conditional_Tags#A_PAGE_Page

So, here’s some example code.

<?php if ( is_page( 'about-page-slug' ) ) { ?>
      <img src="URL TO YOUR HEADER FOR THIS PAGE" alt="" />
<?php } elseif ( is_page( 'another-page-slug' ) ) { ?>
      <img src="URL TO YOUR HEADER FOR THIS PAGE" alt="" />
<?php } elseif ( is_page( 'one-more-example' ) ) { ?>
      <img src="URL TO YOUR HEADER FOR THIS PAGE" alt="" />
<?php } else { ?>
      <img src="URL TO YOUR HEADER FOR ALL OTHER PAGES" alt="" />
<?php } ?>

So if we break down the code above..

If is page: yoururl.com/about-page-slug, show image for this page.

Else if is page: yoururl.com/another-page-slug, show this image

Else if is page: yoururl.com/one-more-example, show this image

Else if all other pages, show this image.

Be sure to check “Execute PHP” inside the hook, and then save.

Let me know if this makes sense or not 🙂

[Maike]

Thank you so much! I’m happy….it works 🙂

[Tom]

Awesome 🙂

[Maike]

Hi Tom,
I’m again-sorry… today I have changed my blog page from a simple page in a contribution page and now my problem is, that the header from the blog page isn’t displayed.
When I click the button “last contributions” on the front page everything is ok. But when I click static page “home” and contribution page “blog” I see the header for all pages on my blog page -grrr 😉
Do you have a solution?
Thanks in advance!

Maike

[Tom]

Ah, that last line needs to change.

Here’s the updated code:

<?php if ( is_page( 'about-page-slug' ) ) { ?>
      <img src="URL TO YOUR HEADER FOR THIS PAGE" alt="" />
<?php } elseif ( is_page( 'another-page-slug' ) ) { ?>
      <img src="URL TO YOUR HEADER FOR THIS PAGE" alt="" />
<?php } elseif ( is_page( 'one-more-example' ) ) { ?>
      <img src="URL TO YOUR HEADER FOR THIS PAGE" alt="" />
<?php } elseif ( is_page() ) { ?>
      <img src="URL TO YOUR HEADER FOR ALL OTHER PAGES" alt="" />
<?php } ?>

[Maike]

thanks for your help!! 🙂

[ville]

Hi!

Code works fine and I got individual header images but somehow for me it adds some space between header image and menu bar. Any solution for that?

[Tom]

Can you link me to the page so I can check out the code?

Thanks!

[ville]

oh, sorry! forgot the address: http://www.jurassicrock.fi/site/

“piknik” has different header image but both have that extra space. header widget don’t do the difference

[Tom]

Aha – this CSS will work:

.inside-header img {
    position: relative;
    vertical-align: bottom;
}

GeneratePress usually does this for you, but only when the header image is inside the .site-logo element.

[ville]

Thanks! Worked out perfectly!!!

[Author]

Posts