Multiple Headers in your WP site

If your theme does not include a simple Multi-header menu and you’re stuck with one throughout the whole site, never fear—I’ve figured out all the steps for you 🙂

I downloaded a page-specific plugin described below that will make all this work. Here is my sweat and tears in writing:

1. Create a new page, name it “NewPage” or whatever.
2. Next, (the “forever” part), make sure you don’t have a header uploaded in your “Header” menu (this is from your theme @ WP Panel>Appearance>Header). Click the button “Remove Header Image”, then click “Restore Original Header Image”. I got this as a blank box, same color as the overall WP Panel’s background. (If you didn’t and perhaps you actually got your Original Header back on, then try these steps below anyway. If the steps don’t work, remove your Original Header image from the appropriate folder (wp-content or wherever it is) to somewhere else so WP won’t find it.) Basically, allow it to load up nothing in that Header box display.

2. Upload Media—aka your newly designed header— at WP Panel>Media Library>Add New. I added a new header and automatically uploads it to the appropriate header image folder from WP. This provides you a convenient URL at the bottom after you uploaded your image from the Upload New Media screen. Copy that URL to your clipboard.

3. Download time. I personally downloaded this:
http://wordpress.org/extend/plugins/page-specific-cssjs/
It is straightforward—–basically once activated, you need to create a new CSS file with the name of your new page (NewPage) (the one you want different headers on). Now create (copy original and paste) a new css file with the same name (NewPage.css) — make sure the SLUG is exactly the name of your CSS file or else it won’t work. Now that “newpage.css” will make changes to your new “newpage” Page, add your copied URL to where the CSS finds its Header information like I did on mine:

/* header */

#header {

background-image:url(‘//uploads/2010/09/NEW HEADER.jpg’);
background-repeat:no-repeat;
background-position:right;
width: 850px;
height: 140px;
color: #fff;
text-align:left;
}

For mine, I had to delete the “background color” line, and I wrote in “background-image: url (‘PLACE YOUR NEW HEADER URL HERE’);”

4. Because your css file is named like your page you want changes on, AND you have the ‘page-specific-css’ plugin activated, your new header should appear on your alternate page!

Good luck!