Different Header Images

  • Resolved jeanx9

    (@jeanx9)


    16 years, 2 months ago

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

    Thanks,
    Jean

Viewing 13 replies - 1 through 13 (of 13 total)
  • Thread Starter jeanx9

    (@jeanx9)

    anyone has an answer I must have it

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

    Thread Starter jeanx9

    (@jeanx9)

    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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head profile="https://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>
    Thread Starter jeanx9

    (@jeanx9)

    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(https://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 (https://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.

    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!!!!!!!!!!!!

    asm5

    (@asm5)

    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!

    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.

    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>

    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. ??

    Ryan S

    (@ryan_accuwebhosting)

    Thanks JEanX9.. It works great for me…

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

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

    <!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" 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 https://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="https://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="https://notstepfordwives.com/wordpress/?page_id=46" onmouseover="image1.src='https://notstepfordwives.com/wordpress/wp-content/themes/pixel/images/icons/cookingbutton_2.gif';"

onmouseout="image1.src='https://notstepfordwives.com/wordpress/wp-content/themes/pixel/images/icons/cookingbutton_1.gif';">

<img name="image1" src="https://notstepfordwives.com/wordpress/wp-content/themes/pixel/images/icons/cookingbutton_1.gif" border=0></a>

<a href="https://notstepfordwives.com/wordpress/?page_id=48" onmouseover="image2.src='https://notstepfordwives.com/wordpress/wp-content/themes/pixel/images/icons/tipsbutton_2.gif';"

onmouseout="image2.src='https://notstepfordwives.com/wordpress/wp-content/themes/pixel/images/icons/tipsbutton_1.gif';">

<img name="image2" src="https://notstepfordwives.com/wordpress/wp-content/themes/pixel/images/icons/tipsbutton_1.gif" border=0></a>

<a href="https://notstepfordwives.com/wordpress/?page_id=50" onmouseover="image3.src='https://notstepfordwives.com/wordpress/wp-content/themes/pixel/images/icons/shoppingbutton_2.gif';"

onmouseout="image3.src='https://notstepfordwives.com/wordpress/wp-content/themes/pixel/images/icons/shoppingbutton_1.gif';">

<img name="image3" src="https://notstepfordwives.com/wordpress/wp-content/themes/pixel/images/icons/shoppingbutton_1.gif" border=0></a>

<a href="https://notstepfordwives.com/simplemachinesforum/" onmouseover="image4.src='https://notstepfordwives.com/wordpress/wp-content/themes/pixel/images/icons/forumbutton_2.gif';"

onmouseout="image4.src='https://notstepfordwives.com/wordpress/wp-content/themes/pixel/images/icons/forumbutton_1.gif';">

<img name="image4" src="https://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>

    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>

    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:
    https://www.nathanrice.net/blog/wordpress-2-8-and-the-body_class-function/#comment-40465

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

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Different Header Images’ is closed to new replies.