Support » Themes and Templates » How to add different header image for every page

Viewing 15 replies - 1 through 15 (of 30 total)
  • hmmm not sure but it would be cool to do

    *edit please do not link to sites that aren’t specific WP support related.

    You would need a rotating header file.
    Chris Pearson’s Neoclassical uses it, maybe the same file would work on other blogs too with a little editing?
    Some may clarify this for you, but it’s more than possible.

    This is the solution I’m using:

    I created a custom field called banner and placed a call for it on my header.php page.

    <div class="banner">
    <?php if(get_post_meta($post->ID, 'banner', true)) : ?>
    <img src="<?php echo get_post_meta($post->ID, 'banner', true); ?>" />
    <?php else : ?>
    <?php the_title(); ?>
    <?php endif; ?>

    If I choose to have a header image on the page, I upload it to my media library, once uploaded I copy the link and paste it on my banner custom field value. If I don’t need a banner I leave it alone and the post/page title shows.


    I have a client who wanted an arm of their site to use a different image set (header, footer, y-repeat) and I worked up the following;

    <body id="body<?php $bodyid=$_SERVER['REQUEST_URI']; echo substr($bodyid,1,4);?>">

    This code pulls the URL for the page so that a site like would show up as “blog”.

    The $bodyid is the variable created
    The “1” is the start position
    The “4” is the number of characters to list

    I preceded the whole thing with “body” so that the “<body id=”>” is never blank.

    Once you get it working, you then just include the declarations for what you want it to do.

    body#bodyhome {background-image: url(/home.jpg)}
    body#bodyabou {background-image: url(/about.jpg)}
    body#bodycont {background-image: url(/contact.jpg)}

    *This method works great if you want an entire arm of your site to have the same graphic. But if you want a different graphic for EVERY page, then marcovidor’s method would be best.

    Marcovidor’s solution is nice and neat, though if your header graphics are going to vary in size, it might not work so good (depends on the stylesheet and how you’re handling images).

    If you want complete styling control over each header (i.e. size and position), there are a bunch of WordPress conditional tags that can tell what page your on. You could use them to load up different images, like Paldimo’s CSS.

    Off the top of my head…

    <?php if (is_front_page()) { ?>
    <div id='frontPageBanner'>...</div>
    <?php } elseif (is_archive()) { ?>
    <div id='archiveBanner'>...</div>
    <?php } elseif ( is_page($pageID)) {
    <div id='pageIdBanner'>...</div>

    Then use CSS as Paldimo suggested.

    #frontPageBanner { background-image...}
    #archiveBanner { ... }

    $pageID would need to be replaced by the actual numbers of the pages you are showing (if you hover over the page title in the edit pages screen, and look at the status bar in the bottom right hand corner, you’ll get the id number).

    Obviously, there are limitations to using page ID numbers – if you add a new one, you’ll have to go into your header.php file and add another conditional statement, or if you delete and re-add a page, it’ll break, but using is_archive, is_front_page will work fine.

    If your static pages are likely to remain, well, static, then this method will allow you to customise each page header individually.

    BUT, if all your headers are the same size, use Marcovidor’s suggestion.

    Moderator Samuel Wood (Otto)

    (@otto42) Admin

    Paldimo: Investigate the body_class() function a bit more thoroughly.

    <body <?php body_class(); ?>>

    produces this on my front page:
    <body class="home blog logged-in">

    and this on another Page:
    <body class="page page-id-228 page-template page-template-no-sidebar-php logged-in">

    and this on a single post:
    <body class="single postid-503 logged-in">

    and this on a category archive:
    <body class="archive category category-general-spew logged-in">

    … I think you get the idea.

    Changing Headers with WordPress body_class()

    Includes a full(?) list of available classes through <?php body_class(); ?>.

    Ah ok but where do i put the code >

    <?php if (is_front_page()) { ?>

    <div id=’frontPageBanner’>…</div>

    <?php } elseif (is_archive()) { ?>

    <div id=’archiveBanner’>…</div>

    <?php } elseif ( is_page($pageID)) {

    <div id=’pageIdBanner’>…</div>


    in the header.php file in the <head> section??

    Yeah, it’s the header.php file. You’d put

    <?php if(is_front_page()) { ?>

    …All code for front page…

    <?php } elseif(is_archive()) { ?>

    …all code for archive…etc.

    But, to be honest, looking at the body classes I think that would be a better way to go. You could then have custom styling by using the cascade.


    body.home #banner { ...banner styling for home page... }
    body.single #banner { ...banner styling for single page... }
    body.postid-503 #banner { ...banner styling for post 503... }

    It’s a little more elegant (and future proof) than using conditional statements, as any future pages or posts you add can be changed by just editing the CSS, rather than editing the header.php file.

    Kudos to Otto 42 for the heads up, and nice one Esmi for the link. Will investigate it further.

    Ok im not very good at php but besides all the other code in the header.php file i add

    <?php if(is_front_page()) { ?>

    …All code for front page…

    <?php } elseif(is_archive()) { ?>

    where would i start putting this code in the <body> of the file??

    and for

    body.home #banner { …banner styling for home page… }
    body.single #banner { …banner styling for single page… }
    body.postid-503 #banner { …banner styling for post 503… }

    do i add all of my style for evey page in there then like

    body.home #banner { #Topimage{:;} #Toplogin{:;} #wrapper{:;}} etc?


    Sorry, I think there’s some confusion. Forget the <?php if(is_front_page… stuff. The only thing you need to add, in your header.php file, is

    <body <?php body_class(); ?>>

    As for your stylesheets, only use body.home, body.archive or whatever whenever you want to style something specific to that page. Add all other times, just don’t write body. For example:

    body.home #banner {background: #fff url(images/homeBanner.png) no-repeat top center);
    body.archive #banner {background: #fff url(images/archiveBanner.png) no-repeat top center);
    #main-content {width: 100%; margin: 10px; }
    #navigation ul {width: 200px; }

    The above would give you a different banner on your Home and Archive pages. However, your main content and navigation would be the same on both pages.

    Apologies for coming in to this post and causing confusion!

    no no its all ok i always think i confuse everyone else with my question lol

    <body <?php body_class(); ?>>

    and the css i put

    home #banner {background: #fff url(images/WidgetTop.png) no-repeat top center;}
    body.about #banner {background: #fff url(images/01.jpg) no-repeat top center;}

    one of my pages is called about done all that but now i just get no header displayed for anypage?? hmm this topic is driving me insane lol

    OK, you can’t just use the page name. That won’t work. You’ll need to check the source code and find out what the page ID is of the About page.

    You can also find it by checking the status bar of the browser when you hover over the page name in the Dashboard->Edit Pages menu item.

    Do you have a link to the site? I’ll take a look.

    no sorry im working in localhost but ill try using the pages ID what about my homepage it doesnt have an id its just http://localhost/wordpress/?? thanks for the help so far buddy

Viewing 15 replies - 1 through 15 (of 30 total)
  • The topic ‘How to add different header image for every page’ is closed to new replies.