Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

different header image for different pages WordPress

  • SOLVED

I'm trying to add a different header image for different pages, here is my site http://chinavisiontour.com/. here is two ways I tried, but for my knowledge, i can't make it work.
http://www.sitepoint.com/forums/php-34/different-header-image-each-page-wordpress-728949.html

http://eisabainyo.net/weblog/2009/06/25/how-to-display-a-different-header-image-for-different-pages-in-wordpress/

here is my header code:<?php /* Don't remove this line. */ require('./wp-blog-header.php'); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/1">
<title>UTEC - China Vision Tour<?php wp_title(); ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://www.chinavisiontour.com/wp-content/themes/unlimited/style.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" media="print" href="http://www.chinavisiontour.com/wp-content/theme/unlimited/print.css" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.chinavisiontour.com/feed" />
<?php wp_head(); ?>
</head>
<body>
<div id="rap">
<ul id="menu">
<?php wp_list_pages('title_li=&depth=1');?>
</ul>
<div id="header">
</div>


And my CSS related to #header
#header {margin:0;padding:0;width:900px;height:288px;background:url(img/header.jpg) no-repeat center;}

I'm using a theme with custom header option, I uploaded current header image through "header" under Appearance in wordpress.

2011-04-20 by Darren Li

Answers (5)

2011-04-20

derekshirk answers:

Hi Darren,

Open your header.php file and replace the <body> tag with this:

<?php
$url = explode('/',$_SERVER['REQUEST_URI']);
$dir = $url[1] ? $url[1] : 'home';
?>

<body id="<?php echo $dir ?>">


This will attach your additional page permalinks to the body ID for each of your pages. For example, on your 'our vision' page this will give your body the ID of #our-vision and your 'tours' page as #tours

Now, you will have more control over the specific headers for each of your pages. So in order to get different images to load in your headers on each page you could declare the following in your CSS



#header {
background:url(img/header.jpg) no-repeat center;
margin:0;
padding:0;
width:900px;
height:288px;
}

#our-vision #header {
background: url(img/header-1.jpg) no-repeat center;
margin:0;
padding:0;
width:900px;
height:288px;
}

#tours #header{
background: url(img/header-2.jpg) no-repeat center;
margin:0;
padding:0;
width:900px;
height:288px;;
}



Let me know if you need any help with this.

Darren Li comments:

Great, thanks so much. it worked.

Darren

2011-04-20

Duncan O'Neill answers:

Hi Darren,

you could just replace your body tag in the header.php with the code below;

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

Which should add classes to your body tag, including a class name reflecting the title of the post or page.

You can then use those classes to code in different background images in css;

Below is your current css for your header background.


#header {
background: url("http://chinavisiontour.com/wp-content/uploads/2010/11/new-header.jpg") no-repeat scroll center center #FDD981;
height: 288px;
margin: 0;
padding: 0;
width: 900px;
}

You could add this to the css to achieve a different header for a page titled 'about', for example;


body.about #header {
background: url("http://chinavisiontour.com/wp-content/uploads/2010/11/header-about.jpg") no-repeat scroll center center #FDD981;
}

Darren Li comments:

First answer worked for you, but also thanks for trying to help me out.

2011-04-20

Christianto answers:

Since you cannot upload multiple header under appearance then you have to edit it manually.

Base on your provided link your header.php will be like code below..

Change 'YOUR-PAGE-TITLE' with your page title, and change 'YOUR-PAGENAME-HEADER-IMAGE.jpg' with your image.

All image will be on img folder of your theme directory.


<?php /* Don't remove this line. */ require('./wp-blog-header.php'); ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head profile="http://gmpg.org/xfn/1">

<title>UTEC - China Vision Tour<?php wp_title(); ?></title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link rel="stylesheet" href="http://www.chinavisiontour.com/wp-content/themes/unlimited/style.css" type="text/css" media="screen" />

<link rel="stylesheet" type="text/css" media="print" href="http://www.chinavisiontour.com/wp-content/theme/unlimited/print.css" />

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.chinavisiontour.com/feed" />

<?php wp_head(); ?>

<style type="text/css">
<?php
if (is_page('YOUR-PAGE-TITLE')) {

$imageH = 'YOUR-PAGENAME-HEADER-IMAGE.jpg';

} else if (is_page('YOUR-PAGE-TITLE')) {

$imageH = 'YOUR-PAGENAME-HEADER-IMAGE.jpg';

} else if (is_page('YOUR-PAGE-TITLE')) {

$imageH = 'YOUR-PAGENAME-HEADER-IMAGE.jpg';

} else if (is_page('YOUR-PAGE-TITLE')) {

$imageH = 'YOUR-PAGENAME-HEADER-IMAGE.jpg';

} else {

$imageH = 'YOUR-DEFAULT-HEADER-IMAGE.jpg';

}?>
#header {
margin:0;padding:0;width:900px;height:288px; background:url(<?php bloginfo('template_directory'); ?>/img/<?php echo $imageH; ?>) no-repeat center;
}
</style>

</head>

<body>

<div id="rap">

<ul id="menu">

<?php wp_list_pages('title_li=&depth=1');?>

</ul>

<div id="header">

</div>


Hope this help

Darren Li comments:

Also thanks for trying to help me out.

2011-04-20

Denzel Chia answers:

Hi,

<blockquote>
I'm using a theme with custom header option, I uploaded current header image through "header" under Appearance in wordpress.
</blockquote>

You are not going to have a different header every page if you use the Default WordPress Admin "header" option.

You need to upload all your cropped header image using WordPress media uploader and copy the whole url to the image.

Put the below codes in your header.php , replace your original code.


<?php /* Don't remove this line. */ require('./wp-blog-header.php'); ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head profile="http://gmpg.org/xfn/1">

<title>UTEC - China Vision Tour<?php wp_title(); ?></title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link rel="stylesheet" href="http://www.chinavisiontour.com/wp-content/themes/unlimited/style.css" type="text/css" media="screen" />

<link rel="stylesheet" type="text/css" media="print" href="http://www.chinavisiontour.com/wp-content/theme/unlimited/print.css" />

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.chinavisiontour.com/feed" />

<?php wp_head(); ?>

<?php
if(is_home()):
?>
<style type="text/css">
#header {
background: url("http://chinavisiontour.com/wp-content/uploads/2010/11/new-header.jpg") no-repeat scroll center center #FDD981 !important;
}
</style>
<?php
endif;
if(is_page('our-vision')):
?>
<style type="text/css">
#header {
background: url("http://chinavisiontour.com/wp-content/uploads/2010/11/new-second-header.jpg") no-repeat scroll center center #FDD981 !important;
}
</style>
<?php
endif;
if(is_page('tours')):
?>
<style type="text/css">
#header {
background: url("http://chinavisiontour.com/wp-content/uploads/2010/11/new-third-header.jpg") no-repeat scroll center center #FDD981 !important;
}
</style>
<?php
endif;
if(is_page('about')):
?>
<style type="text/css">
#header {
background: url("http://chinavisiontour.com/wp-content/uploads/2010/11/new-fourth-header.jpg") no-repeat scroll center center #FDD981 !important;
}
</style>
<?php
endif;
if(is_page('testimonials')):
?>
<style type="text/css">
#header {
background: url("http://chinavisiontour.com/wp-content/uploads/2010/11/new-fifth-header.jpg") no-repeat scroll center center #FDD981 !important;
}
</style>
<?php
endif;
if(is_page('gallery')):
?>
<style type="text/css">
#header {
background: url("http://chinavisiontour.com/wp-content/uploads/2010/11/new-sixth-header.jpg") no-repeat scroll center center #FDD981 !important;
}
</style>
<?php
endif;
?>

</head>

<body>

<div id="rap">

<ul id="menu">

<?php wp_list_pages('title_li=&depth=1');?>

</ul>

<div id="header">

</div>


Change all the image url to your uploaded image url.

Thanks.
Denzel

Darren Li comments:

Hi Denzel, also thanks for trying to help me out.

2011-04-20

Jens Filipsson answers:

If you use a theme with a custom header option, you usually only have to do the following:

When you're on the page in WordPress admin, you click <em>set a featured image</em> for this page. Then you upload an image with <strong>the exact same dimensions</strong> as your normal header image. Then you click set as featured image. If this doesnt work, you need to enable it in your theme:

This is built in to themes like twentyten for example, take a look here:

[[LINK href="http://wordpress.org/support/topic/twenty-ten-featured-images-overriding-header-image"]]Twentyten featured images overriding header image[[/LINK]]

Darren Li comments:

Thanks for your information, first answer worked for me.