multiple headers

[ride2719]

Sorry about taking bandwidth on a common topic, but the solutions I've seen to this question all seem to be fairly complex.  We're using Prose, and I'd like to have a simple solution that can be implemented with Genesis and/or Prose functionality, without editing the any of the source files.

The site is currently a blog (www.generousmatters.com).  We are adding standard web site structure to it that will eventually be linked via http://www.basingerconsulting.com which currently links to the same place as generousmatters.com.  Switching where basingerconsulting.com links may be a question eventually, but not until its pages are ready, and I think I know how to make those changes.

Toward that end, we want basingerconsulting.com to have a different look and feel; i.e. different sidebar content and a different header.

My question is the simplest way to implement a different header image for the pages related to basingerconsulting.com.  In other words, at least initially, we want two header images to be used: one for the blog and one for Basinger Consulting.  NOTE that there are pages associated with the blog that should have the blog header image.  All of the solutions I've found so far involve conditional PHP, and I have not found a plugin that just allows a custom header image to be assigned for any page.

To our StudioPress friends:  this would be a very helpful feature, if it does not already exist, i.e. to define default header text and/or image and then allow text and/or image to change for each page.  One more requirement would be to allow the text and/or image to function as a link to somewhere else in the site.

TIA Rick.

[wendycholbi]

I have a possible solution, one that I've used successfully on client sites (though the two clients I can think of who've used it have since moved on to new designs, so I don't have a working example of my own to show you).

Summary: Since you're dealing with only two header images, you can create a custom body class that has a Basinger Consulting header. Any page/post that doesn't have that body class will have the default (blog) header. This is easiest with two headers that have the same pixel dimensions, so they can simply be swapped in for each other without altering the site width or header dimensions (although with more custom CSS, you could handle different sized headers as well).

1. Upload both headers to your Media Library. Copy the URL of the Basinger Consulting header.

2. Add this CSS snippet to Genesis --> Custom Code --> Custom CSS, replacing FULL-IMAGE-URL-HERE with the URL you just copied:

/*** Second header for use on Basinger Consulting-related pages only***/

.basinger-page #header {
background: url(FULL-IMAGE-URL-HERE) no-repeat scroll top center transparent !important;
}

3. On each page where you want to use this Basinger Consulting header, go to the page editing screen, and scroll down to the Layout Settings metabox. In the Custom Body Class field, type or paste:

basinger-page

...and save/update the page.

You might need to fiddle with the exact CSS, but the method is pretty simple. I would love to know if it works for you.

I'll also note that there are at least a few plugins that claim to let you assign header images on a per-page (and per-post, per-category, etc.) basis, but I have not tested any of these with a Genesis theme. So it's possible that you could get one of these to work: Unique Headers, Custom Header Images, WP Display Header  (and I'm sure there are more).

---

I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi

[ride2719]

Thanks very much for this suggestion.  It works well.  The only change I needed to make was to add a height specification to the basinger-page class, since the second header is a different height.

[Author]

Posts