Header image on main page only

Hi there, you can do this just with CSS if you want:

#site-header {
display: none;
}

.home #site-header {
display: block;
}

Don’t edit the theme files directly, otherwise your changes will be overwritten when the theme is updated.

An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You could also install a standalone custom CSS plugin, or create a child theme.

what if I want different headers on different pages?

Ah, I did not realize that’s what you were trying to do, sorry.

The way this theme is coded, I think you will need to edit the theme files to accomplish that.

The first thing you’ll need to do is create a child theme, so your changes won’t be overwritten when updating the theme. Here are some guides in case you haven’t made one before:

http://codex.wordpress.org/Child_Themes
http://op111.net/53/
http://vimeo.com/49770088

Once your child theme is set up, follow these steps.

Don’t edit the parent (original) theme files directly – always leave them intact.

1. Make a copy the file header.php and place it in your child theme folder.

2. You’re going to be adding some new code below line 34:

<div id="page" class="hfeed site">

3. Add this new code:

<div id="site-header">
	<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
	<?php if ( is_page ( xx ) ) : ?>
		<img src="http://path/to/your/image.png" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="home">
		<?php elseif ( is_page ( xx ) ) : ?>
		<img src="http://path/to/your/image.png" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="home">
		<?php elseif ( is_page ( xx ) ) : ?>
		<img src="http://path/to/your/image.png" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="home">
		<?php endif; ?>
	</a>
	</div>

4. Replace http://path/to/your/image.png with the full path to your image.

5. Change xx to either your page ID or the page slug in single quotes, which you can get on the page edit screen. The ID number is in the URL, and the slug is at the end of the Permalink.

So in this example:

this line could be either:

<?php if ( is_page ( 395 ) ) : ?>

or:

<?php if ( is_page ( ‘test-page’ ) ) : ?>

Don’t forget the single quotes if you go with the slug. The drawback to using the slug is that if you decide to change it later your header code for that page will stop working.

You can repeat as many elseif clauses as you like, depending how many pages’ header graphics you’d like to specify.

There are other ways to code this, of course – this is one option. If you have a lot of pages to target, different ways might work better.

6. Save your changes and upload your child theme and activate it.

You can learn more about using WordPress conditional tags for pages in the Codex.

Let me know how it goes.

This wasn’t a simple tweak and it is working on my end, so I can’t say what’s going wrong with your site without more information.

When you say “it doesn’t work” – exactly what do you mean? Can you show me some specific pages and tell me the image filename that you were expecting to see for each page?

If you left in the custom CSS I provided in my first reply, make sure to remove it, otherwise all your site headers will be hidden everywhere except the homepage.

If you’re able to give me a link to the site I might be able to have another look and see if there are any clues – for example whether your child theme is activated properly.