Suggestions: Customizable header image and style colors that are different for each page

Question

I'm working on a project where each page should have a custom header image and custom style colors (borders, etc). So that I don't have to be the one creating a brand new style everytime a page is created, I'd like a way in the admin area for someone else to edit the image and colors.

My first thought is to use the custom fields, and they can put in the image URL and HEX codes. But that may be over the head of the people who will be creating the pages.

I'm just looking for some direction on how to accomplish this.

Thanks!

Answer 1

I think your options are to actually use custom fields, but you can make them user friendly.

The header is relatively simple, you can even have a preview or a selection of images to choose from, have a look at how the default twentyten theme enables header options, very user friendly, no urls are used , simple upload or choose an image.

As for colors, hex codes are a pain , but it would not be hard at all to add something like a jquery color picker ( like http://gusc.lv/jquery/gccolor.html) to the fields you define.

Answer 2

This answer is for the part of the question pertaining to allowing easy custom image-header for each page.

I recently did a website (http://www.ambassadorjourney.com/) that has custom images for each page in their header using WP's standard 'Featured Image' feature available for each page. This is a quick and easy way to set this up.

To avoid getting a blank header in case a user doesn't specify Featured Image for that page, I have a field in my Theme Options for a default header image, that is used if no 'Featured Image' was specified for a page.

Here is my code that I just added to header.php:

<?php if ( has_post_thumbnail() && ! post_password_required() ) : ?>                
            <?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );  ?>
        <?php else : ?>
            <?php $feat_image = get_option('theme_default_banner'); ?>
        <?php endif; ?>

        <?php echo('<div id="featured_banner" style="background-image: url(' . $feat_image . ');"><div class="inner"><h1>'); ?>
        <?php echo get_the_title(); ?> 
        <?php echo ('</div></h1></div>'); ?>