WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Different Header Images (14 posts)

  1. Jeanx9
    Member
    Posted 5 years ago #

    IS there a plugin or a way to have different header images on different pages?

    Thanks,
    Jean

  2. Jeanx9
    Member
    Posted 5 years ago #

    anyone has an answer I must have it

  3. iridiax
    Member
    Posted 5 years ago #

    You can do it with conditional tags, but it requires coding.

  4. Jeanx9
    Member
    Posted 5 years ago #

    Hello iridiax,
    Thank you for the response.

    so lets say I want to change the header in page id 2.
    I read the document in the link you sent me and I understood from it that the begining of the code should be

    <?php
    if (is_page('2')

    I don't know the command that should follow though to change the header, Could you help me with this one?

    I am also enclosing my header.php code, should I input the code there?

    <!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><?php bloginfo('name'); ?><?php wp_title(); ?></title>
    	<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo('charset'); ?>" />
    	<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please -->
    	<style type="text/css" media="screen">
    		@import url( <?php bloginfo('stylesheet_url'); ?> );
    	</style>
    	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
    	<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
    	<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
    
    	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
        <?php wp_get_archives('type=monthly&format=link'); ?>
    	<?php //comments_popup_script(); // off by default ?>
    	<?php wp_head(); ?>
    </head>
    <body>
    	<div id="menu">
    		<ul>
    			<li <?php if(is_home()){echo 'class="current_page_item"';}?>><a href="<?php bloginfo('siteurl'); ?>" title="׳“׳£ ׳”׳‘׳™׳×">׳“׳£ ׳”׳‘׳™׳×</a></li>
    			<?php wp_list_pages('title_li=&depth=1');?>
    		</ul>
    	</div>
    	<div id="header">
    		<h1><a href="<?php bloginfo('siteurl'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1>
    		<h2><?php bloginfo('description');?></h2>
    	</div>
  5. Jeanx9
    Member
    Posted 5 years ago #

    Hello,

    I finally succeeded and want to share it with you.

    I had no knowledge at all before in php and worked 4 hours by logic to create the solution.
    What I did is to insert the following script in 'my header.php'

    <?php if (is_page('8')) { ?>
    	<div id="header_author">
    	    <?php } ?>
    	<?php if (is_page('11')) { ?>
    	<div id="header">
    		<?php } ?>
    	</div>

    meaning that if the page id is 8 the 'header_author' will load and if the page id is 11 the 'header' will load.

    Than I went to the 'style.css' and defined the 'header_author' and the 'header':

    /* Header */
    #header
    {
    	background:url(img/header.jpg) no-repeat center;
    	height:180px;
    	width:900px;
    	border:#ccc 3px double;
    	margin:10px auto;
    }
    #header_author
    {
    	background:url(http://getattraction.eu/goglobal2/wp-content/themes/paalam/img/author_header.jpg) no-repeat center;
    	height:220px;
    	width:900px;
    	border:#ccc 3px double;
    	margin:10px auto;
    }

    so the header is in fact the picture (img/header.jpg)

    the header_author is the picture at (http://getattraction.eu/goglobal2/wp-content/themes/paalam/img/author_header.jpg)

    Hope this will help anyone in the future,
    btw I am using the paalam theme.

  6. jennytc
    Member
    Posted 5 years ago #

    This helped me a TOn thank you for sharing your solution it is very kind even though noone helped you out. I will do the same when I find a solution to my future problems. :) YOU R AWESUM!!!!!!!!!!!!

  7. ASM5
    Member
    Posted 5 years ago #

    I have been trying to do this, and it looks like you have solved my problem! Can you tell me where you put the code in the header.php file and the style.css files?

    Thanks a bunch!

  8. VonDada
    Member
    Posted 5 years ago #

    I also would like to know where in the header.php code do you put this:

    <?php if (is_page('8')) { ?>
    <div id="header_author">
    <?php } ?>
    <?php if (is_page('11')) { ?>
    <div id="header">
    <?php } ?>
    </div>

    Let us know.

  9. VonDada
    Member
    Posted 5 years ago #

    I got it to work. This thing is genius. Thanks for posting it.

    Here's the code I changed in the header. I'm using the deep-silent theme. I named the call after the page it's referencing in the css.

    </div>
    <div class="header-search">
    <?php include (TEMPLATEPATH . '/searchform.php'); ?>
    </div>
    </div>
    </div>
    <div id="page">

    <div id="header">
    <?php if (is_page('8')) { ?>
    <div id="headerimg">
    <?php } ?>
    <?php if (is_page('2')) { ?>
    <div id="headerimgabout">
    <?php } ?>
    <?php if (is_page('3')) { ?>
    <div id="headerimgvideo">
    <?php } ?>
    <?php if (is_page('45')) { ?>
    <div id="headerimglinks">
    <?php } ?>
    <?php if (is_page('6')) { ?>
    <div id="headerimgphotos">
    <?php } ?>
    <?php if (is_page('8')) { ?>
    <div id="headerimgcontact">
    <?php } ?>
    <div class="headerimg-left">
    <h1>/"><?php bloginfo('name'); ?></h1>
    <div class="description"><?php bloginfo('description'); ?></div>
    </div>
    <div class="headerimg-right">
    </div>
    </div>
    </div>

  10. BigScaryRobot
    Member
    Posted 4 years ago #

    I'm wanting to do the same thing with the site I'm working on. But when I add the suggested it code, it kills my spacing. Could someone walk me through this? What code should I paste for reference.

    Thanks. :)

  11. Ryan S
    Member
    Posted 4 years ago #

    Thanks JEanX9.. It works great for me...

    I wanted this from very long and was looking for this..

  12. BigScaryRobot
    Member
    Posted 4 years ago #

    This is my header code. Could someone tell me how to integrate this functionality?

    <!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" xml:lang="en" lang="en">
    
    <head>
    
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>"  />
    
    <title><?php if (is_home () ) { bloginfo('name'); echo " - "; bloginfo('description'); 
    
    } elseif (is_category() ) {single_cat_title(); echo " - "; bloginfo('name');
    
    } elseif (is_single() || is_page() ) {single_post_title(); echo " - "; bloginfo('name');
    
    } elseif (is_search() ) {bloginfo('name'); echo " search results: "; echo wp_specialchars($s);
    
    } else { wp_title('',true); }?></title>
    
    <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
    
    <meta name="robots" content="follow, all" />
    
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    
    <link rel="alternate" type="application/rss+xml" title="<?php bloginfo(wp-content/themes/pixel/images/".$random.".png); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
    
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    
    <style type="text/css">
    
    #header #logo {
    
    background: <?php
    
    $stylesarray = array("mastheadfinal");
    
    $random = $stylesarray[rand(0,count($stylesarray)-1)];
    
    echo "url(wp-content/themes/pixel/images/".$random.".png);"
    
    ?>
    
    }
    
    </style>
    
    <?php wp_head(); ?>
    
    <!-- this product is released under General Public License. Please see the attached file for details. You can also find details about the license at http://www.opensource.org/licenses/gpl-license.php -->
    
    <!--[if lt IE 8]>
    
    <link href="<?php bloginfo('template_url'); ?>/ie.css" rel="stylesheet" type="text/css" />
    
    <![endif]-->
    
    <!--[if lt IE 7]>
    
    <link href="<?php bloginfo('template_url'); ?>/ie6.css" rel="stylesheet" type="text/css" />
    
    <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
    
    <![endif]-->
    
    </head>
    
    <body>
    
    <div id="wrapper">
    
    <div id="header" onclick="location.href='<?php bloginfo('home') ?>'">
    
    <div id="logo">
    
    <span><?php bloginfo('description'); ?></span>
    
    </div> <div id="topright">
    
    <ul><li>
    
    <BODY><div id=EchoTopic>
    
    <a href="http://notstepfordwives.com/wordpress/?page_id=46" onmouseover="image1.src='http://notstepfordwives.com/wordpress/wp-content/themes/pixel/images/icons/cookingbutton_2.gif';"
    
    onmouseout="image1.src='http://notstepfordwives.com/wordpress/wp-content/themes/pixel/images/icons/cookingbutton_1.gif';">
    
    <img name="image1" src="http://notstepfordwives.com/wordpress/wp-content/themes/pixel/images/icons/cookingbutton_1.gif" border=0></a>
    
    <a href="http://notstepfordwives.com/wordpress/?page_id=48" onmouseover="image2.src='http://notstepfordwives.com/wordpress/wp-content/themes/pixel/images/icons/tipsbutton_2.gif';"
    
    onmouseout="image2.src='http://notstepfordwives.com/wordpress/wp-content/themes/pixel/images/icons/tipsbutton_1.gif';">
    
    <img name="image2" src="http://notstepfordwives.com/wordpress/wp-content/themes/pixel/images/icons/tipsbutton_1.gif" border=0></a>
    
    <a href="http://notstepfordwives.com/wordpress/?page_id=50" onmouseover="image3.src='http://notstepfordwives.com/wordpress/wp-content/themes/pixel/images/icons/shoppingbutton_2.gif';"
    
    onmouseout="image3.src='http://notstepfordwives.com/wordpress/wp-content/themes/pixel/images/icons/shoppingbutton_1.gif';">
    
    <img name="image3" src="http://notstepfordwives.com/wordpress/wp-content/themes/pixel/images/icons/shoppingbutton_1.gif" border=0></a>
    
    <a href="http://notstepfordwives.com/simplemachinesforum/" onmouseover="image4.src='http://notstepfordwives.com/wordpress/wp-content/themes/pixel/images/icons/forumbutton_2.gif';"
    
    onmouseout="image4.src='http://notstepfordwives.com/wordpress/wp-content/themes/pixel/images/icons/forumbutton_1.gif';">
    
    <img name="image4" src="http://notstepfordwives.com/wordpress/wp-content/themes/pixel/images/icons/forumbutton_1.gif" border=0></a>
    
    </BODY>
    </li>
    </ul>
    </div> 
    
    </div><!-- Closes header -->
    
    <div class="cleared"></div>
  13. Steve Shearer
    Member
    Posted 4 years ago #

    I have the same problem, but will have 2 images for 20+ pages. So to use image1 for some, and image2 for others, would this would be the code?

    <?php if (is_page('8')('10')('12')) { ?><br />
    	<div id="header_author"><br />
    	    <?php } ?><br />
    	<?php if (is_page('11'){'13')('15')) { ?><br />
    	<div id="header"><br />
    		<?php } ?><br />
    	</div>
  14. sergibosch
    Member
    Posted 4 years ago #

    i'm trying to accomplish something similar: i want a different colored logo to appear in the header of each page, ie About, News, etc.

    these links are helpful:
    http://www.nathanrice.net/blog/wordpress-2-8-and-the-body_class-function/#comment-40465

    http://fearlessflyer.com/2009/05/how-to-change-the-background-dynamically-in-your-wordpress-theme/

Topic Closed

This topic has been closed to new replies.

About this Topic