Changing background color depending on parent page?

Question

I created a WordPress template and now I would like to use that template for several pages, however I would like to have different background color on some of the elements such as footer, header etc... which will depend on the parent.

So lets say I have PARENT A (green background) and PARENT B (white background) now when I will create child of PARENT A I would like it to have green background automatically. I know something similar could be done with posts using

<div class="post <?php
foreach((get_the_category()) as $cat) {
echo $cat->cat_name . ' ';
} ?>">
</div>

I need some advice what would be the best way to do that.

Answer 1

If your theme is using the body_class(); function then you can target pages via CSS.

If you have parent page with the ID of 2 and the background you wanted to change was the .content div, you would simply use :

.parent-pageid-2 .content { background: green; }

Or something similar to that effect. This would work for as many child pages you have.

Answer 2

You can do something along the lines of the code below, having a different div depending on the page id. Put the style in your CSS obviously, but this paints the picture. Put the code in whatever php file you're applying this to.

<?php if (is_page('30')) { ?>
    <div id="page30" style="background:blue;">
<?php } else { ?>
    <div id="default" style="background:white;">
<?php } ?>
<!-- content inside div -->
</div>

Answer 3

To add to what TomHarrigan wrote you can try something like post_parent, ... I'll assume you mean page parents.

$children = get_children( "post_type=page&post_parent=PARENT_A" );

if $children { 
<div id="page30" style="background:blue;">
}

You should have a look into using the Options API for this type of stuff. http://codex.wordpress.org/Options_API