How to support letting users add their OWN logo to a custom theme?

Question

I am a rookie theme developer (3 months in) and I am trying to figure out how to implement the following functionality:

1. The theme I am building has a logo which I would like for users to be able to change.
2. I'd like for them to NOT have to do so in the code.
3. Rather I'd like to develop some type of low-tech "Theme Control Panel" or some such thing where they can add the logo to the header.

Here is a screenshot so you can see more clearly what I am trying to do.

I am using Theme-Check which is currently telling me:

RECOMMENDED: No reference to add_custom_image_header was found in the theme. It is recommended that the theme implement this functionality if using an image for the header.

But I don't think this applies to my theme as I am NOT using the ENTIRE header for an image. Rather, just a portion is used for the logo (plus it is absolutely positioned).

So is there some template tag which can accomplish this? Cuz, I surely cant find it in the Codex.

Thanks In Advance, sleeper

Answer 1

You can create a basic theme options page using the WordPress settings api

Here is a simple example that will create an input field for the user to enter a path to the custom logo.

// Add a menu for our option page
add_action('admin_menu', 'prefix_myplugin_add_page');
function prefix_myplugin_add_page() {
    add_options_page( 'My Theme Options', 'Theme Name Options', 'manage_options', 'prefix_mytheme', 'prefix_myplugin_option_page' );
}

// Draw the option page
function prefix_mytheme_option_page() {
    ?>
    <div class="wrap">
        <h2>Really Simple Google Analytics</h2>
        <form action="options.php" method="post">
            <?php settings_fields( 'prefix_mytheme_options' ); ?>
            <?php do_settings_sections( 'prefix_mytheme' ); ?>
            <input name="Submit" type="submit" value="Save Changes" />
        </form>
    </div>
    <?php
}

// Register and define the settings
add_action( 'admin_init', 'prefix_mytheme_admin_init' );
function prefix_mytheme_admin_init(){
    register_setting(
        'prefix_mytheme_options',
        'prefix_mytheme_options'
    );
    add_settings_section(
        'prefix_mytheme_main',
        'prefix_mytheme_options',
        'prefix_mytheme_section_text',
        'prefix_mytheme'
    );
    add_settings_field(
        'prefix_mytheme_text_string',
        'Enter text here',
        'prefix_mytheme_setting_input',
        'prefix_mytheme',
        'prefix_mytheme_main'
    );
}

// Draw the section header
function prefix_mytheme_section_text() {
    echo '<p>Enter path to custom logo.</p>';
}

// Display and fill the form field
function prefix_mytheme_setting_input() {
    // get option 'text_string' value from the database
    $options = get_option( 'prefix_mytheme_options' );
    $text_string = $options['text_string'];
    // echo the field
    echo "<input id='text_string' name='prefix_mytheme_options[text_string]' type='text' value='$text_string' />";
}

Calling the custom logo option in your header.php file:

$options = get_option( 'prefix_mytheme_options' );
if ( ! empty( $options['text_string'] ) ) { 
    $logo = $options['text_string'];
} else { $logo = 'http://path_to_default_logo'; 
}

Answer 2

I just finished posting this My Options Panel a couple of hours a ago which will answers you question.

Answer 3

Even if your image doesn't cover the typical full-width area you're used to seeing in twentyten and twentyeleven, add_custom_image_header is the appropriate way to do this, and it's far simpler to use the built-in functionality than building a new options panel to handle it.

In the process of declaring support for custom headers, you define the height and width of your image; you also control the code in which you output it, including whatever positioning you choose to apply to it. So there's really no reason to limit your design thinking to only a full-width header.