• I’d like to use different header images on certain pages of my blog at https://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

Viewing 15 replies - 1 through 15 (of 18 total)
  • 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.)

    Thread Starter agiledesign

    (@agiledesign)

    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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="https://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
    
    <head profile="https://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() ) { ?> &raquo; 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 https://wordpress.pastebin.ca

    @poodlerat,
    Never ask people to post code here!

    Thread Starter agiledesign

    (@agiledesign)

    (sheepishly) Sorry – didn’t know.
    Averill

    Neither did I. Sorry, I’m mostly just a lurker. Thanks for letting me know!

    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!

    Thread Starter agiledesign

    (@agiledesign)

    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

    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!

    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?

    What was stopping me was not knowing that’s what I needed to do.

    Thank you, it’s working a treat now. ??

    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.

    ah, dont worry its ‘if (is_home())’

    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!

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘Assigning different header images to certain pages (not randomly)’ is closed to new replies.