How do I alternate header images by page template? WordPress
- SOLVED
I am helping to create a website/blog :
[[LINK href="http://www.newarkohiogardenclub.org/"]]http://www.newarkohiogardenclub.org/[[/LINK]]
I created custom page templates for the website section (page_maroon.php).
Now I want to pull in different header images depending on the page template chosen. I saved the image as PNG for web and it does not have the green background.
I tried adding the if function (in my header.php) with an alternate img src, but it's not working and I'm a newbie --have no idea what's wrong.
<blockquote><div id="header" style="margin-top: 14px;"><!--HEADER PART STARTS HERE-->
<?php if (is_page_template('page_maroon.php')) { ?>
<img src="url(images/header_maroon.jpg)" width="860px" height="713px" />
<?php }
else { ?>
<img src="url(images/headerbg.jpg)" width="860px" height="713px" />
<?php } ?></blockquote>
Thanks.
Okay, based on the responses, I think I should clarify something. I might have confused you. I'm not trying to add a different background image, but a different image in the header portion.
For a different background image in each template, I added this code in the stylesheet.
<blockquote>body
{
margin: 0px;
padding: 0px;
background: url(images/mainbg.jpg) center top repeat #6d865f;
font: normal 12px Arial, Helvetica, sans-serif;
}
.page-template-page_maroon-php {
margin: 0px;
padding: 0px;
background: url(images/bg_maroon.jpg) center no-repeat #c7869e;
font: normal 12px Arial, Helvetica, sans-serif;
}
</blockquote>
And I added these if statements to the body class in my header.php.
<blockquote><body class="<?php thematic_body_class() ?>">
<?php if (is_page_template('page_maroon.php')){
echo "";}
elseif (is_page_template('page_green.php')){
echo "";}
elseif (is_page_template('page_gray.php')){
echo "";}
elseif (is_page_template('page_black.php')){
echo "";}
else{
echo "body";
}?>
<div id="wrapper"><!-- main wrapper -->
<div id="header" style="margin-top: 14px;"><!--HEADER PART STARTS HERE-->
</blockquote>
Right now, the header file is calling in the "header" div which is defined in my stylesheet as this:
<blockquote>#header
{
background: url(images/headerbg.jpg) no-repeat left top;
width: 860px;
height: 173px;
margin: 0px auto;
float: none;
}</blockquote>
I'm looking for a way to override the headerbg.jpg file in the header portion.
Hope this helps.
Answers (7)
Deepak Thomas answers:
<div id="header" style="margin-top: 14px;"><!--HEADER PART STARTS HERE-->
<?php if (is_page_template('page_maroon.php')) { ?>
<img src="url(images/header_maroon.jpg)" width="860px" height="713px" />
<?php }
else { ?>
<img src="url(images/headerbg.jpg)" width="860px" height="713px" />
<?php } ?>
The code you posted does not work as the URLs are incorrect.
You can use your same code with a <strong>minor modification </strong>:
<div id="header" style="margin-top: 14px;"><!--HEADER PART STARTS HERE-->
<?php if (is_page_template('page_maroon.php')) { ?>
<img src="<?php bloginfo('template_url'); ?>/images/header_maroon.jpg" width="860px" height="713px" />
<?php }
else { ?>
<img src="<?php bloginfo('template_url'); ?>/images/headerbg.jpg" width="860px" height="713px" />
<?php } ?>
Changes
1) Added <?php bloginfo('template_url'); ?> before "images/" for absolute path
2) url() taken off from <img> tag's src attribute. url() to be used for CSS.
<strong>PS: Check comment for updated answer based on updated question</strong>
Deepak Thomas comments:
Solution :
Add the following to your CSS
#header.maroon {
background: url(images/header_maroon.jpg) !important;
}
#header.green{
background: url(images/header_green.jpg) !important;
}
And accordingly add <div id="header" class="maroon"> or <div id="header" class="green"> to show the background.
jhearing comments:
This is getting close I think. I added the CSS style and the class to the div id in my header.php. But that replaces the header image for every pages.
I tried combining it with if function to pull in according to page templates.
<blockquote><div id="header" style="margin-top: 14px;"><!--HEADER PART STARTS HERE-->
<?php if (is_page_template('page_maroon.php')){
<div id="header" class="maroon">;}
else{
echo "header";
}?></blockquote>
This didn't work, so I tried just leaving class="maroon";} and that adds the maroon image below the original. Is there a way to fix this? Thanks.
jhearing comments:
Okay, I think it's come together.
This is the style for my page template background image.
<blockquote>.page-template-page_green-php {
margin: 0px;
padding: 0px;
background: url(images/bg_green.jpg) center no-repeat #a3bc61;
font: normal 12px Arial, Helvetica, sans-serif;
}</blockquote>
In the stylesheet I changed my original header class and added ones for the page template classes I had created.
<blockquote>.header-image
{
background: url(images/headerbg.jpg) no-repeat left top;
width: 860px;
height: 173px;
margin: 0px auto;
float: none;
}
.page-template-page_maroon-php .header-image {
background: url(images/header_maroon.png);
}</blockquote>
. . . and changed my header.php file header div id= to
<blockquote><div class="header-image"></blockquote>
Pippin Williamson answers:
You could also use
<?php if ( is_page('id')) { ....head img here ..... } ?>
And replace the "id" with the unique id number of your page.
Chris Lee answers:
It might just be easier to modify it with your css.
Just enable your body to have classes
<body <?php body_class(); ?> >
then by style style the image background a specific area.
John Farrow answers:
I would use CSS.
Assign different header images to a div in the header in your stylesheet, then use firebug to find which class to use for which header.
Just change <body> for <body <?php body_class();?>> in your mark up, then pages will have distinct classes.
This will save you assigning several if statements in the header should you decide to add further headers, and make for easier reading.
John Farrow comments:
Also, you haven't tried used bloginfo('template_url') to get relative paths for your images.
the source of your img tags should look like
<img src="<?php bloginfo('template_url');?>/url(images/header_maroon.jpg)" width="860px" height="713px" />
John Farrow comments:
sorry, that should read
<img src="<?php bloginfo('template_url');?>images/header_maroon.jpg" width="860px" height="713px" />
this is because your template code is being called into other parts of the wordpress core, so it needs to be told more explicitly where your image folder (which should be in your template folder, and not your root) is.
Rashad Aliyev answers:
Hello,
You've actually tried to make it truly, but there are little mistakes.
<strong>I'll give you 100% working codes add it to your header. </strong>
<?php if (is_page_template('page_maroon.php')) {
echo '<img src="http://www.yoursite.com/images/header_maroon.jpg" width="860px" height="713px" />';
}
else {
echo '<img src="http://www.yoursite.com/images/headerbg.jpg" width="860px" height="713px" />';
}
?>
PS: Write your image path truly. Check it on your browser be sure that's opening and write there. I'll worked;)
And also control your page_maroon.php and be sure add this code to your template header and.
<?php
/*
Template Name: Page Maroon Template
*/
?>
Than when you've making any page you can choose this template "Page Maroon Template" from list.
It'll use your custom codes on your custom template.
Best regards,
Rashad Aliyev comments:
<strong>Dear jhearing,</strong>
You used the <img src="<strong>url(images/header_maroon.jpg)"</strong> width="860px" height="713px" /> . That'll not worked! Change your image true path. You can use like this image path on CSS, not for direct SRC.
P.S: In this situation you can use CSS with <strong>!important </strong>rule.
for example: if you have 2 p css rule ( p { color: #ff0000; } p { color: #000000; } ), you can made one of them important.
p { color: #ff0000; } p { color: #000000 !important ; }
That mean every where on page p style will use the #000000 color code.
<strong>You can made one of them for you. </strong>
#header.black{
background: url(images/header_black.jpg) !important;
}
<strong><em>and others.. </em></strong>
I hope that's help you. If you still have question, feel free to ask..
Best regards,
Rashad Aliyev comments:
If you need more information about using CSS class, you can visit this site.
[[LINK href="http://www.w3schools.com/css/"]]http://www.w3schools.com/css/[[/LINK]]
There are many way to solve your problem and the experts to want to help you give some similar way. You should choose one of them and solve it in a minute ;)
regards,
West Coast Design Co. answers:
jhearing,
Would you like a custom control panel, which will be shown under a page or post WYSIWYG editor that will allow you to upload and attach a photo, with a default photo as a substitute?
IF statements are great, but sometimes its nice to do everything within WP.