How do I make different headers for different pages?

Community Forums Forums Design Tips and Tricks How do I make different headers for different pages?

This topic is: not resolved

This topic contains 4 replies, has 2 voices, and was last updated by  ericoahu 10 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #48139

    ericoahu
    Participant
    Post count: 11

    Suppose I want the header to be one way on the site’s front page, and then be different on the rest of the site.

    What is the easiest or most correct way to go about this?

    If it matters, I only own the framework, not any custom themes.


    Eric Lauritzen

    Google+·app.net

    #48152

    anitac
    Participant
    Post count: 6489

    Use the WP Display Header Plugin – http://wordpress.org/plugins/wp-display-header/.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #48160

    ericoahu
    Participant
    Post count: 11

    Thanks antic but unless I misread the suggested plugin’s description that deals with images in the header, not changing things like classes and the actual structure of the header.

    I do not use images in my header.

    This plugin lets you specify a header image for each post, page, custom post type or archive page individually, from your default headers and custom headers.


    Eric Lauritzen

    Google+·app.net

    #48162

    anitac
    Participant
    Post count: 6489

    Ok, I misunderstood what you wrote. You mean the #header – the entire #header area not a header image. I am not sure, about the #header area. I think you would need to create customized templates and add the different #header areas to them, but don’t quote me on that. Check around over on @BradDalton‘s website (http://wpsites.net). He has a ton of code there – maybe this will be there.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #48166

    ericoahu
    Participant
    Post count: 11

    Thanks anitac.

    Actually (I hate it when this happens) I figured out how to do it (I think without breaking anything). And no extra files need to be created.

    In the page’s edit screen, I added a custom body class.

    Then, the css for the regular header:

    #header {
    background-color: #fff;
    }

    For the special page I add this:

    .custom-body #header {
    background-color: #000;
    }

    When I go to that special page, the header div’s background is black, when I go anywhere else the header div’s background is white. I’ll keep experimenting to make sure stuff like floats work, but it seems to work so far with things that don’t relate to other divs.


    Eric Lauritzen

    Google+·app.net

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.