Hi there - I am working with a Wordpress site, and the goal was to have a different header graphic on each page. THe site is here:
Innerloop Luxury
I integrated a piece of code that I got from the support forums:
<?php
if(is_page('lifestyle')){
echo '<img src="http://www.innerloopluxury.com/wp-content/themes/dodo/images/header_l.jpg" />';
}
if(is_page('walkable-wonderland')){
echo '<img src="http://www.innerloopluxury.com/wp-content/themes/dodo/images/header_bm.jpg" />';
}
if(is_page('home')){
echo '<img src="http://www.innerloopluxury.com/wp-content/themes/dodo/images/header_bg.jpg" />';
}
if(is_page('contact')){
echo '<img src="http://www.innerloopluxury.com/wp-content/themes/dodo/images/header_c.jpg" />';
}
if(is_page('neighborhood-nirvana')){
echo '<img src="http://www.innerloopluxury.com/wp-content/themes/dodo/images/header_bp.jpg" />';
}
if(is_page('venue')){
echo '<img src="http://www.innerloopluxury.com/wp-content/themes/dodo/images/header_v.jpg" />';
}
if(is_page('blog')){
echo '<img src="http://www.innerloopluxury.com/wp-content/themes/dodo/images/header_l.jpg" />';
}
if(is_page('77')){
echo '<img src="http://www.innerloopluxury.com/wp-content/themes/dodo/images/header_l.jpg" />';
}
if(is_404()){
echo '<img src="http://www.innerloopluxury.com/wp-content/themes/dodo/images/header_l.jpg" />';
}
?>
I’ve treied different names for the lifestyle page, (to avoid tag confusion) the PAge ID, 77 - and for the life of me - I can’t get the Lifestyle Page header to display. Does anyone see what/why this might not be working - the PHP is the same (and working) for ALL the other calls, including 404 page.
Scratching head!!
Best,
Kari
Now -
thank you so much - I think your last suggestion on the PHP piece worked - because the lifestyle page is working!
So that I don’t mess anything up - and because it’s working - I am going to stick with the method being used. But I will keep this for reference. I was surprised at the number of people needing something like this - and again at the number of methods being used to accomplish the task.
When you use is_page with an ID you dont need the quotation marks because the ID is an integer and not a string.
Like the following…
if( is_page( 77 ) )
Well - I tried that - and that one page still doesn’t work - I am really baffled!!
I’ve also read somewhere that an ‘else’ tag would be required somewhere but I dont know where or how to place it - ?? Could that be a problem - ??
THanks so much for your help. OK - my new PHP in the header.php file is:
<?php
if(is_page('walkable-wonderland')){
echo '<img src="http://www.innerloopluxury.com/wp-content/themes/dodo/images/header_bm.jpg" />';
}
if(is_page('home')){
echo '<img src="http://www.innerloopluxury.com/wp-content/themes/dodo/images/header_bg.jpg" />';
}
if(is_page('contact')){
echo '<img src="http://www.innerloopluxury.com/wp-content/themes/dodo/images/header_c.jpg" />';
}
if(is_page('neighborhood-nirvana')){
echo '<img src="http://www.innerloopluxury.com/wp-content/themes/dodo/images/header_bp.jpg" />';
}
if(is_page('venue')){
echo '<img src="http://www.innerloopluxury.com/wp-content/themes/dodo/images/header_v.jpg" />';
}
if(is_page('blog')){
echo '<img src="http://www.innerloopluxury.com/wp-content/themes/dodo/images/header_l.jpg" />';
}
if(is_page('lifestyle')){
echo '<img src="http://www.innerloopluxury.com/wp-content/themes/dodo/images/header_l.jpg" />';
}
if(is_page(77)){
echo '<img src="http://www.innerloopluxury.com/wp-content/themes/dodo/images/header_l.jpg" />';
}
if(is_404()){
echo '<img src="http://www.innerloopluxury.com/wp-content/themes/dodo/images/header_l.jpg" />';
}
if( is_home()){
echo '<img src="http://www.innerloopluxury.com/wp-content/themes/dodo/images/header_l.jpg" />';
}
?>
ah right, try the following.
if( is_home() )
Since only a single image is being loaded per page request, you would actually be incresing the page size and therefore load time by combining all the images together and using a CSS sprite.
i dont think that there is anything wrong with the way that you are doing it, but if you really want to go down the css route i would do it something like the following:
<?php
$class = 'header';
if(is_page('walkable-wonderland')){
$class .= ' header-wonderland';
}
if(is_page('home')){
$class .= ' header-home';
}
if(is_page('contact')){
$class .= ' header-contact';
}
# ... and so on.....
#output header
echo '<div class="' . $class . '"></div>';
?>
# Style.css
/* default styling for header element */
.header {
width:500px;
height:100px;
background:url('path/to/default/image.jpg') #000 center top;
}
.header-wonderland {
background-image:url('different/background/image.jpg');
}
.header-home{
background-image:url('another/image.jpg');
}
Also, you could make use of an else statement to load a default image in the case that none of the if conditions are met, sort of like a fallback.
It’s a method that was proposed (specific to) WordPress on the WordPress support forums.
[URL=“http://codex.wordpress.org/User:Esmi/_Changing_Headers_with_body_class%28)”]Link
I will have to look and see if it’s the same method, but basically it involves using a Body Class parameter with WordPress.
Before I had asked for help - I had found the PHP method of doing the header changes, and it works great - except for that one page.
Oh wait - you’re referring to CSS Sprites - yes? I have considered doing a different method that is a CSS-based version of what we’re trying to accomplish.
I have not - because I’m not familiar with spriting - what is it - ?? Forgive my ignorance on the subject - I am relatively new to Wordpress sites, and am mostly a designer. I like to consider myself handy (and I was real excited that most of the PHP works in this case with the different headers on each page) but get stumped on what’s most efficient on things like this.
