Brand new to WordPress.
I’m trying to reproduce the attached image. My goal is to change the image, the two color boxes and the title of the page depending on the page. So for example if you go to the “Minutes” page you would get two shades of green, the title “Minutes” and a new image instead of the flowers. The header.php contains the navigation and center logo. The sidebar.php contains the color boxes, the image and the title, the purples, the flowers and “Minutes” respectively.
Is this doable?
Thank you very much.
You can do it with IDs on the <body> tag, changing them page by page using some PHP and Wordpress conditional comments.
Here’s an example:
<?php
if ( is_page('home') ) {
$bodyID = 'home';
} elseif ( is_page('minutes') ) {
$bodyID = 'minutes';
} elseif ( is_page('about') ) {
$bodyID = 'about';
} else {
$bodyID = 'home';
}
?>
… and so on one for each page you want to style differently…
There are lots of possibilities besides “is_page()”: http://codex.wordpress.org/Conditional_Tags
Then for the <body> tag:
<body id="<?php echo $bodyID; ?>">
Then in your .css file, target the body ID in front of each selector that you have differing {properties:values;} for:
#home img{property:value;}
#about img{property:value;}
#minutes img{property:value;}
These selectors are just examples. I don’t know what your HTML/CSS looks like.
Hope it helps. 
Thank you very much. That worked really well. I am able to get each piece to work like I want it to pretty much.
I’d read similar explanations and couldn’t understand or get them to all come together. Your ideas and code were just what was needed.
thanks again.
No problem, glad to assist when I can.
Hi again,
thanks so much for your answer,
A new related problem …
I put in the following PHP into the sidebar
<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('Sidebar Widgets')) : else : ?>
<div id="aside">
<div id="photo">
<div class="page-name">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php endwhile; ?>
<h2 class="page-title"><?php the_title(); ?></h2>
<?php include (TEMPLATEPATH . '/inc/nav.php' ); ?>
<?php else : ?>
<!--<h2>Not Found</h2>-->
<?php endif; ?>
</div>
<div class="photo">
<img src="<?php echo $bodyID; ?>" />
</div>
</div><!--end of TEXT-IMAGE-->
<div class="clearfix"></div>
<div class="content">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div>
<div class="entry">
<?php the_content(); ?>
</div>
</div>
<?php endwhile; ?>
<?php include (TEMPLATEPATH . '/inc/nav.php' ); ?>
<?php else : ?>
<p style="position:absolute; top:-200px;width:200px;line-height:20.75px;">The page was not found. Please click on the menu item to the right to return to your desired page.</p>
<?php endif; ?>
</div><!--end of CONTENT-->
</div><!--end of ASIDE-->
<?php endif; ?>
There’s some extraneous stuff in there I know and I do want to strip this out, but that (will) be a later thing.
The problem now is there is a blank image error in IE, the little red x in the upper left hand corner.
My thought is because I don’t have a “empty image” image nor a way to describe it. That is, there is (I think) there is no else for none of the menu items.
<?php
if ( is_page('home') ) {
$bodyID = 'home';
} elseif ( is_page('updates') ) {
$bodyID = 'updates';
} elseif ( is_page('about') ) {
$bodyID = 'about';
} elseif ( is_page('community-info') ) {
$bodyID = 'community-info';
} elseif ( is_page('board-members') ) {
$bodyID = 'board-members';
} elseif ( is_page('minutes') ) {
$bodyID = 'minutes';
} elseif ( is_page('covenants') ) {
$bodyID = 'covenants';
} elseif ( is_page('by-laws') ) {
$bodyID = 'by-laws';
} elseif ( is_page('financials') ) {
$bodyID = 'financials';
} elseif ( is_page('contact') ) {
$bodyID = 'contact';
} else {
$bodyID = 'home';
}
?>
<body id="<?php echo $bodyID; ?>">
Am I making sense?
If that is the reason, how do I say not any of the above?
Is this thinking along the right path?
thank you.
The image path that you have set is:
<img src="<?php echo $bodyID; ?>" />
that is just going to print:
<img src="home" ... />
or whatever the body ID is for that particular page. You need to add a path to an image file that is on your server into the src=“” attribute.
Though to tell it if “IS NOT” this add an ! (exclamation point) before the “if” like so:
<?php
if ( !is_page('home') ) {
$bodyID = 'not-home';
} else {
$bodyID = 'home';
}
?>
Hope it helps.
Hi
I’m still getting the red X indicating a missing image. The page has the image I would like but there is also the X icon so I know that some image is missing somewhere.
When I change from " is_page(‘home’) " to " !is_page(‘home’) " I still get the X but the image and background color stays the same from page to page. The image/color scheme is the home page one.
Though to tell it if “IS NOT” this add an ! (exclamation point) before the “if” like so:
<?php
if ( !is_page('home') ) {
$bodyID = 'not-home';
} else {
$bodyID = 'home';
}
?>
The client decided she actually wanted the “about” page to be the home page. I did go into the CSS and the PHP and make what I thought were the changes, but from what I could tell (still limited understanding) those changes did not change the effects I wanted.
More thoughts and help please.
thanks
Hi, I got the problem solved about the missing image (the red X) on the page.
I made a transparent .gif the size of the image I was replacing with the php code. So the default was the .gif which appears on all the pages and the background-image that is pulled up with the “$bodyID =‘abc’” CSS definition.
<div class="photo">
<img src="/wp-content/uploads/2011/11/Meadow_Creek_HOA1.gif" alt="Meadow Creek Homeowners Association"<?php
if ( is_page('home') ) {
$bodyID = 'home';
} elseif ( is_page('updates') ) {
$bodyID = 'updates';
} elseif ( is_page('about') ) {
$bodyID = 'about';
} elseif ( is_page('community-info') ) {
$bodyID = 'community-info';
} elseif ( is_page('board-members') ) {
$bodyID = 'board-members';
} elseif ( is_page('minutes') ) {
$bodyID = 'minutes';
} elseif ( is_page('covenants') ) {
$bodyID = 'covenants';
} elseif ( is_page('by-laws') ) {
$bodyID = 'by-laws';
} elseif ( is_page('financials') ) {
$bodyID = 'financials';
} elseif ( is_page('trials') ) {
$bodyID = 'trials';
} elseif ( is_page('contact') ) {
$bodyID = 'contact';
} else {
$bodyID = 'home';
}
?> />
</div>
thanks for the help along the way
:)