Posted 3 years ago #
I'd like to use different header images on certain pages of my blog at http://mountainviewdogtraining.com . For instance, in any agility-related pages I'd like to show dogs doing agility rather than dogs hanging out, which is the main header - and so on for the various pages. It's a modified Kubrick theme.
TIA
Averill
Posted 3 years ago #
Take a look at the Codex article on conditional tags. They're great; in this case, you can use them to give your header div a different class whenever you want to change the image.
(I'm assuming you have experience with PHP and CSS; if not, post your header's code and the related CSS and I'll be happy to lay out the changes.)
Posted 3 years ago #
I am NOT PHP experienced! I do all right with CSS but am lost with anything beyond simple php statements. In my CSS there's an ID for an agil-header background image, but I definitely need help making it work!
Here's the header code (hardly changed from the original kubrick):
<!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" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<link rel="shortcut icon" href="favicon.ico">
<style type="text/css" media="screen">
<?php
// Checks to see whether it needs a sidebar or not
if ( !empty($withcomments) && !is_single() ) {
?>
#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbg-<?php bloginfo('text_direction'); ?>.jpg") repeat-y top; border: none; }
<?php } else { // No sidebar ?>
#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgwide.jpg") repeat-y top; border: none; }
<?php } ?>
</style>
<!--<?php wp_head(); ?>-->
</head>
<body>
<div id="page">
<div id="header">
<div id="headerimg">
<!--<h1><a>/"><?php bloginfo('name'); ?></a></h1>-->
<!--<div class="description"><?php bloginfo('description'); ?></div>-->
</div>
</div>
<hr />and the css up to the header image:
body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
background-color: #fde5c2;
color: #333;
text-align: center;
}
#page {
background-color: #fde5c2 ;
text-align: left;
}
#header {
background: url('../mtview/images/mvdtheader.jpg') no-repeat;
}
#agil-header {
background: url('../mtview/images/agilheader.jpg') no-repeat;
}
#headerimg {
height: 200px;
/*width: 760px;*/
}Many thanks for your help. If we need to go off-forum for this, please let me know.
Averill
OK, no more long code here - somebody will delete it, probably.
If you need to post code, always use a pastebin service, like http://wordpress.pastebin.ca
@poodlerat,
Never ask people to post code here!
Posted 3 years ago #
(sheepishly) Sorry - didn't know.
Averill
Posted 3 years ago #
Neither did I. Sorry, I'm mostly just a lurker. Thanks for letting me know!
Posted 3 years ago #
Okay, so it looks like what you want to do is to switch it so that on some pages, you have:
<div id="header">
and on some pages,
<div id="agil-header">
The conditional statement you use will depend somewhat on whether the places you want the #agil-header to appear are actual pages or archive pages (like a category page, for example.)
If it's a page, your code should look something like this:
<div id="<?php if ( is_page(2) ) { echo 'agil-header'; } else { echo 'header'; } ?>">
If it's a category page, try using is_category(2). (Obviously, you'll have to change that 2 to the number of whatever page or category you're hoping to get the header to appear on.)
If you want it to appear on more than one page/category, use
if ( is_page(2) || is_page(3) || is_category(7) )
Those double bars (||) mean "or" in PHP.
Hope that helps!
Posted 3 years ago #
This does help. It doesn't work perfectly on my site YET, but I think it will start me on the road to getting it right. At least I "get it" to the extent that I see the logic and can follow the little bit of code, and now the Conditional Tags page makes more sense.
Thanks for your help!
Averill
Posted 3 years ago #
You're welcome! I started learning PHP just like this--there was one little thing on my blog I wanted to change...and then of course I had to tweak that thing over there...
Good luck!
Posted 3 years ago #
Hi,
I'm currently trying to do the same thing and I'm stuck.
I'm using the Kubrick theme. I want to display a different header on some of my pages. I've got as far as assigning a custom page template for those pages, and using a different header file for that template, using the code
<?php include (TEMPLATEPATH . '/header2.php'); ?>
For the rest of the custom page template file I just copied the code from another template, because I want the pages to be identical apart from the header image. But I can't work out how to actually change the header image. As far as I can see, the header image is assigned in the style.css file, not the header file.
I'm a beginner at PHP, so any help would be appreciated.
There is nothing PHP in this issue.
What stops you from renaming the header div in your header2.php file to something else (e.g. "myheader") and define it in the stylesheet with another bg image?
Posted 3 years ago #
What was stopping me was not knowing that's what I needed to do.
Thank you, it's working a treat now. :)
Posted 3 years ago #
This:
"if ( is_page(2) || in_category(3) || is_category(7) )"
(modified from an earlier post) works brilliantly for me for achieving different images on different pages, but what do I type for the homepage? (e.g. is_page(x)) I cant seem to figure that one out. I've got the images I want showing on all the category and post pages, but the homepage shows the image for the category the most recent post is assigned to.
Posted 3 years ago #
ah, dont worry its 'if (is_home())'
Posted 3 years ago #
Hi, I am trying to figure out the same thing, but using a modified version of a different 3 column blank theme template. I am trying to get a different header image on to each of the main pages(header1.jpg, header2.jpg, etc., there are 5). I would like the header image to be carried through the child pages of each main page, but at this point I'd be happy just to have the main pages with different images.
This one has the header info in the Theme Functions file, which reads:
<?php
if ( function_exists('register_sidebars') )
register_sidebars(2,array(
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
?>
<?php
define('HEADER_TEXTCOLOR', '');
define('HEADER_IMAGE', '%s/images/header.jpg'); // %s is theme dir uri
define('HEADER_IMAGE_WIDTH', 800);
define('HEADER_IMAGE_HEIGHT', 235);
define( 'NO_HEADER_TEXT', true );
function blankthemes_admin_header_style() {
?>
<style type="text/css">
#headimg {
background: url(<?php header_image() ?>) no-repeat;
}
#headimg {
height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
}
#headimg h1, #headimg #desc {
display: none;
}
</style>
<?php
}
function blankthemes_header_style() {
?>
<style type="text/css">
#header {
background: url(<?php header_image() ?>) no-repeat;
}
</style>
<?php
}
if ( function_exists('add_custom_image_header') ) {
add_custom_image_header('blankthemes_header_style', 'blankthemes_admin_header_style');
}
?>I probably don't have to point out I am a php nub, but I have tried to go through the input here and piece together something from that that would work here, but I am just borking the whole site.
Any direction would be greatly appreciated!
Posted 3 years ago #
Hmmm, it doesn't seem to change the header I uploaded through the Custom header option. I need to figure out where that is stored as well I guess.
Posted 3 years ago #
Hello, all...
Since there are so many ingenious plugins for so many specialized purposes, has anyone developed a WP Plugin that will accomplish this (i.e. (i.e., displaying a different header graphic for different categories) without extensive hacking/modding of a site or theme's PHP and CSS code?
Enquiring minds want to know...
Posted 3 years ago #
hi i am dezining a custom theme
in theme headder.php will same but the below contents will remain diffrent
i want to call a file like product.php .which has same headder call below coding is diffrent . but when i call it sayes headder call to undifiend function so headder is not includeing ..if someone knows about it then share it with me.
This topic has been closed to new replies.
