How to: Use multiple custom headers on a WordPress theme

Do you ever wanted to have multiple headers on your WordPress blog? If yes, here’s a clear and concise tutorial that will help you to get themost out of your blog headers!

The first thing to do is to create header files. Create as many different headers as you want. In this exemple, I have created 3 custom headers from my theme default file header.php, names headercontact.php, headergallery.php and headerdefault.php.

By using the php include() function and WordPress conditional tags, we can define custom headers easily.
Replace the content of your header.php file with the following code:

<?php
if (is_page('contact')){
	<?php include(TEMPLATEPATH.'/headercontact.php'); ?>
}
elseif (is_page('gallery')){
	<?php include(TEMPLATEPATH.'/headergallery.php'); ?>
}
else {
	<?php include(TEMPLATEPATH.'/headerdefault.php'); ?>
}
?>

22 Responses

Neowster

Oct 21 2008 15:07

I am now a fan. This site is going to do very well if it continues to come up with “great recipes”.

jbj

Oct 21 2008 15:44

@Neowster: Thanks a lot for your kind words, I really appreciate it!

Big Blogger

Oct 22 2008 07:30

This is cool.

Please tell me also how to make different headers appear randomly or in rotation.

Thanks & ciao
alexander

EmmaB

Oct 23 2008 06:15

Oooh, that is so cool. I think I will implement it into one of my wordpress designs!

Dave

Dec 14 2008 02:25

I’m still a PHP noob, but this was giving me “unexpected <” errors until I stripped out the inline tags. Once I did, things worked perfectly:

Mark

Feb 22 2009 21:31

What would be the conditional tag if you want a different header for index.php?

Thank you

Peter

Aug 06 2009 01:42

Hello,

Great tutorial!

I have a question. How can get this applied automatically when I create a new Page in Wodpress? I have five different headers and five main menu alternatives. The user will be creating new pages under some of the main pages and the correct header needs to be applied. For example if they create a new page under “Gallery” the gallery header needs to show but it will ofcourse have a different name. So every new page created would have to be manually added in the php code so it will show the right header.

thanks

Maigret

Aug 07 2009 16:30

Exactly what I was looking for ! Thx

Paul Schlereth

Sep 22 2009 05:22

i may have found a much simpler method.

in the header.php, do the following:

then in the css, apply the background image based on the page title, such as:
body#About {
background-image: url(../images/headerAbout.gif);
}

Paul Schlereth

Sep 22 2009 05:25

arg! the post eliminated my php code!

<body id="<body id="">

Paul Schlereth

Sep 22 2009 05:26

I’ll try this one last time…
[code]
<body id="">
[/code]

Jason

Dec 20 2009 17:29

Much easier solution than what I’ve tried in the past. Keep up the good work.

I was wondering if you know a method for doing the same thing when the wordpress home template (home.php)?

Paul use the WP template tag and create specific page templates (copy your page template file and duplicate it then insert the following code with the correct name. It will display as an option when saveing editing pages

Alan

Jan 14 2010 19:22

I found the same problem as Dave above, that I was getting unexpected “<" errors. Once I stripped out the inside PHP tags, leaving only the opening and closing PHP tag, then it worked great. Here's the (barely) modified code that worked or me:

[code]

[/code]