WordPress › Support » How to add different header image for every page

maltewestedt
Member
Posted 2 years ago #

Hi i was wondering how to add a different header image to every page on wordpress? thanks in advance
Jordan502
Member
Posted 2 years ago #

hmmm not sure but it would be cool to do

*edit please do not link to sites that aren't specific WP support related.
Doocey
Member
Posted 2 years ago #

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.
Vidor
Member
Posted 2 years ago #
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; ?>
<div>
```
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.

Marco
Paldimo
Member
Posted 2 years ago #
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 http://www.mydomain.com/blog/ 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.
Simon Fairbairn
Member
Posted 2 years ago #
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.

http://codex.wordpress.org/Conditional_Tags
Otto
Tech Ninja
Posted 2 years ago #

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

This:
<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.
esmi
Theme Diva & Forum Moderator
Posted 2 years ago #

http://quirm.net/2009/08/07/changing-headers-with-wordpress-body_class/

Includes a full(?) list of available classes through <?php body_class(); ?>.
maltewestedt
Member
Posted 2 years ago #

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??
Simon Fairbairn
Member
Posted 2 years ago #
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.

e.g.
```
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.
maltewestedt
Member
Posted 2 years ago #

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()) { ?>
etc

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?

thanks
Simon Fairbairn
Member
Posted 2 years ago #
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!
maltewestedt
Member
Posted 2 years ago #

no no its all ok i always think i confuse everyone else with my question lol
maltewestedt
Member
Posted 2 years ago #

</head>
<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
Simon Fairbairn
Member
Posted 2 years ago #

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.
maltewestedt
Member
Posted 2 years ago #

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
Simon Fairbairn
Member
Posted 2 years ago #

Also, it wouldn't be home #banner. It would either be .home or body.home #banner.

A name on it's own refers to a html element:

html

<body>

CSS

body {background: #fff; }

A name with a period in front, refers to a class:
`
html

<body class='home'>

CSS

.home {background: #fff}

And a name with a # in front refers to an ID.

html

<body id='home'>

CSS

#home {background: #fff; }

CSS can be very frustrating as it is an incredibly complex subject but don't worry, we'll get you there.
maltewestedt
Member
Posted 2 years ago #

to be honest with u m8 im lost right now i know the pages id apart from home its just http://localhost/wordpress/ and how do i put hte id into the css:
body.ID2 #banner {background: #fff url(images/WidgetTop.png) no-repeat top center;}

lol my about page is ID2 sorry for confusion
Simon Fairbairn
Member
Posted 2 years ago #

OK, if your home page has no classes on the body tag, you can just use the body selector:

body #banner { background: url(images/bannerHome.png); }

Then, for your other pages, use the id:

body.page-id-560 #banner { background: url(images/bannerAbout.png) }

A tag and a class selector will over-ride just a tag on its own.
Simon Fairbairn
Member
Posted 2 years ago #

Right, load up your about page, then right-click anywhere in the browser window and hit 'View Source'. Look for your <body> tag and see what classes you've got going on there. It will say something like

<body class='page page-id-506...'>

It's the page-id-506 you need to reference with your stylesheet.

Your number will be different - if your ID is 2, it will be

body.page-id-2 {background: url(images/WidgetTop.png) no-repeat top center; }
maltewestedt
Member
Posted 2 years ago #

Hmmmm i tryed it right now dident work??? :S there must be something wrong in my header.php so far in the header.php i got the important bit
in
</head>
<body <?php body_class(); ?>> under the </head> tag
Simon Fairbairn
Member
Posted 2 years ago #

You may want to try this plugin to see if it's any easier than doing it all by hand:

http://wordpress.org/extend/plugins/dynamic-headers/
maltewestedt
Member
Posted 2 years ago #

maybe you can help me out if you see my freind website http://www.hellothemes.com/new thats basically what i want, only the homepage has a widget and the other pages dont wierd it doesnt work now but check the site when it works
Nickybc
Member
Posted 2 years ago #
Hi there, Im using marcovidor's method and it works brilliantly:
```
<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; ?>
<div>
```
However, it doesn't seem to work for posts as well. I know it probably wasn't meant for posts, but I was just wondering if anyone knew how to adapt the code to include a custom header within posts as well. I would be very gratefull for your help.

Thanks
pavlos1982
Member
Posted 2 years ago #

im using this method

PHP

<div id="header" <?php if(is_page('About')) : ?>class="aboutpageclass"<?php else : ?>class="normalclass"<?php endif;?>>

Css

.aboutpageclass { background-image:someimage.jpg; }
.normalclass { background-image:anotherimage.jpg }

but i can get only the aboutpage to work now i want to do the rest of the pages, like contact, home , gallery but im stuck anybody can help me out be great thanks

alchymyth
The Sweeper
Posted 2 years ago #

expand it with 'elseif's http://www.w3schools.com/php/php_if_else.asp

for instance:

<?php
if(is_page('About')) { echo 'class="aboutpageclass"'; }
elseif(is_page('Contact')) { echo 'class="contactpageclass"'; }
elseif(is_page('Home')) { echo 'class="homepageclass"'; }
// continue with elseif lines //
else { echo 'class="normalclass"'; }
?>

ultramuddin
Member
Posted 2 years ago #

Hi! I'm a fresh newbie in WP. I love to change and create my own WP header but it seems too difficult for me to do so, compared to blogger.com

By the way, there is 12 new niche site themes for WordPress such as Computer and internet-related niches, Mortgage and home-related niches, and other more. You can take a look on them here.

All that niche sites is SEO friendly menu automatically generated based on WordPress page titles, with high CTR AdSense placement on every page.

nice to share with you guys.
pavlos1982
Member
Posted 2 years ago #

thank you alchymyth you a genius it works thank you very much
quike
Member
Posted 2 years ago #
I used marcovidor's solution
```
<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; ?>
<div>
```
and with some hacking (had to erase a default header that my theme got built in to the functions.php file & adapt widths of the header) got it to work great!

thesupermarket
Member
Posted 2 years ago #

I'm trying to add a different background image to each page.
I tried the below code and it works for the header but how do I place it in the background.

<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; ?>
<div>

12 Next »

Topic Closed

This topic has been closed to new replies.

WordPress.org

Forums

How to add different header image for every page (31 posts)

Topic Closed

About this Topic

Tags

Code is Poetry