Different Headers & Different Sizes for Different Pages

Community Forums Forums Design Tips and Tricks Different Headers & Different Sizes for Different Pages

This topic is: resolved

Tagged: , ,

This topic contains 7 replies, has 4 voices, and was last updated by  moxiegirl 2 years, 9 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #20190


    Or the post that could have been titled Diff’rent Strokes? 

    Working on Prose Theme and I would like a header on the Home page to be 940 x 656.

    On all the other pages I would like a header image to be 940 x 129.

    Your help would be divine in accomplishing this :) Muchas gracias!




    You can do this with the style sheet.

    Post a link to your site so we can see what may need to be changed.

    Amy Susan Design.com @AmySusanDesign



    I’m working it offline so it’s not live right now.


    Tony @ AlphaBlossom


    It’s hard to say exactly which is the best way without seeing your site, but you can set your background image for all pages, probably:

    #header {
    background-image: ~ your image here
    background-repeat: no-repeat;
    background-position: center center;
    height: 129px;

    Then for your home page:

    .home #header {
    background-image: ~ larger image here;
    height: 656px;

    The .home #header will work on the home page only. That’s very rough since I can’t see what’s going on, but it should be enough to get you going.



    Okay, I published the website and that didn’t exactly work (so that isn’t live).

    Website is http://www.mupplebee.com/

    When I used the code provided, it used the larger image, and cropped it to the smaller image’s height. Also the part about signing up for my newsletter then went and cramped over to the right hand side of the pink area.

    Thanks for your help, I do appreciate it


    Tony @ AlphaBlossom

    You’ll need two different css rules, one for the home header, and one for the rest of the headers.

    So it should be:

    #header {
    max-width: 940px;
    margin: 0 auto;
    width: 100%;
    height: 150px;
    background: url("http://www.mupplebee.com/wp-content/uploads/2013/02/SHORTERIMAGE.png") no-repeat scroll 0 0 transparent;

    .home #header {
    height: 656px;
    background: url("http://www.mupplebee.com/wp-content/uploads/2013/02/WebsiteHeader.png") no-repeat scroll 0 0 transparent;

    You may need to add !important at the end of one or both of the .home #header rules (before the semicolon). That should do what you need.

    The newsletter is outside of the header, so it should be affected…hard to tell without seeing it :)



    CSS would be the best way to go however you could also use conditional tags for this but you might need to add code for flexible header heights or it might resize them. http://codex.wordpress.org/Custom_Headers

    $args = array(
    	‘flex-width’    => false,
    	‘width’         => 940,
    	‘flex-height’    => true,
    	‘height’        => 100,
    	‘default-image’ => get_template_directory_uri() . ‘/images/header.jpg’,
    add_theme_support( ‘custom-header’, $args );

    Then you can add the different headers with conditionals

    <?php if (is_home() ) { ?>
    &lt;div&gt;&lt;a href=&quot;<a href="http://domain.com/wp-content/uploads/2013/02//header-large.png&#038;quot" rel="nofollow">http://domain.com/wp-content/uploads/2013/02//header-large.png&#038;quot</a>; width=&quot;940&quot; height=&quot;656&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
    &lt;?php } ?&gt;
    &lt;?php if (!is_home() ) { ?&gt;
    &lt;div&gt;&lt;a href=&quot;<a href="http://domain.com/wp-content/uploads/2013/02//header-small.png&#038;quot" rel="nofollow">http://domain.com/wp-content/uploads/2013/02//header-small.png&#038;quot</a>; width=&quot;940&quot; height=&quot;100&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
    &lt;?php } ?&gt;

    You could add this to a custom function or using the SImple Hooks plugin

    You might also need to edit the default height in the child themes style.css file.

    There’s also a plugin named wp display headerthat may work for you.



    Yes! Got it with the CSS.

    At first it still wasn’t working until I remembered to changed the default header to the smaller image (as it is on all the pages except the home page). Then I went in to change the default height as well to the height of the smaller image. 

    Thank you!!! This community rocks!

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

You must be logged in to reply to this topic.