Skip to main content
3 of 4
clarity

Custom Theme functions.php – Using add_settings_field and input type="file" to set custom logo

I've seen several examples for "add custom logo" to wordpress theme, most of which use this basic code, specifically `function display_logo_element() { ?>

<input type="submit" name="submit" value="Upload File" />
<?php echo get_option('customtheme_logo'); ?>
<?php
}`

OR the following, which I've come to understand that is using a different approach e.g. set_theme_mod() which does not work with add_settings_field() / register_setting()

function customtheme_display_logo()
{
    $custom_logo_id = get_theme_mod('customtheme_logo');
    $logo = wp_get_attachment_image_src($custom_logo_id, 'full');
    if (has_custom_logo()) {
        echo '<img src="' . esc_url($logo[0]) . '" alt="' . get_bloginfo('name') . '">';
    } else {
        echo '<h1>' . get_bloginfo('name') . '</h1>';
    }
}
add_action('admin_init', 'customtheme_display_logo');

Note: the above not used in my version of the functions.php page, below. In any case, it seems my image upload form is not putting the selected image (from the form as below) into the wp-content/uploads directory. The form will show and save the name of the image file which was selected, but from other advisory i've received, it seems this will never work if WordPress isn't able to access an image ID. How is this supposed to be done: to use a "custom theme settings" page, to add a logo for the theme? Thank you!

<?php /* functions.php */ 
function display_theme_panel_fields()
{
    add_settings_section('settings_html_fields', 'Theme Options', null, 'theme_options');

    add_settings_field('theme_phone_number', 'Phone Number', 'display_phone_element', 'theme_options', 'settings_html_fields');
    add_settings_field('customtheme_logo', 'Website Logo', 'display_logo_element', 'theme_options', 'settings_html_fields');    
    add_settings_field("twitter_url", "Twitter Profile Url", "display_twitter_element", "theme_options", "settings_html_fields");
    add_settings_field("facebook_url", "Facebook Profile Url", "display_facebook_element", "theme_options", "settings_html_fields");
    add_settings_field("address_info", "Mailing Address", "display_address_element", "theme_options", "settings_html_fields");
    add_settings_field("fax_number", "Fax Number", "display_fax_element", "theme_options", "settings_html_fields");

    register_setting("settings_html_fields", "twitter_url");
    register_setting("settings_html_fields", "facebook_url");
    register_setting("settings_html_fields", "address_info");
    register_setting("settings_html_fields", "fax_number");
    register_setting('settings_html_fields', 'theme_phone_number');
    register_setting("settings_html_fields", "customtheme_logo", ); // callback can be passed here, but i've tried uncertain what to do with that as Ive tried and didnt help
}

add_action("admin_init", "display_theme_panel_fields");

function customtheme_my_admin_menu()
{
    $page_title = 'Theme Settings Page';
    $menu_title = 'Theme Settings';
    $capability = 'edit_posts';
    $menu_slug = 'theme_options';
    $function = 'customtheme_theme_settings_page';
    $icon_url = '';
    $position = 110;

    add_menu_page($page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position);
}

add_action('admin_menu', 'customtheme_my_admin_menu');

function display_phone_element()
{
?>
<input type="text" name="theme_phone_number" id="theme_phone_number"
    value="<?php echo get_option('theme_phone_number'); ?>" />
<?php
}

function display_logo_element()
{
?>
<input type="file" name="customtheme_logo" id="customtheme_logo" enctype="multipart/form-data" />

<input type="submit" name="submit" value="Upload File" />
<?php echo get_option('customtheme_logo');
    var_dump(get_option('customtheme_logo')); ?>
<?php
}

function display_twitter_element()
{
?>
<input type="text" name="twitter_url" id="twitter_url" value="<?php echo get_option('twitter_url'); ?>" />
<?php
}

function display_facebook_element()
{
?>
<input type="text" name="facebook_url" id="facebook_url" value="<?php echo get_option('facebook_url'); ?>" />
<?php
}
function display_address_element()
{
?>
<input type="text" name="address_info" id="address_info" value="<?php echo get_option('address_info'); ?>" />
<?php
}

function display_fax_element()
{
?>
<input type="text" name="fax_number" id="fax_number" value="<?php echo get_option('fax_number'); ?>" />
<?php
}

function customtheme_theme_settings_page()
{
?>
<div class="wrap">
    <h1>Theme Panel</h1>
    <form method="post" action="options.php?page=theme_options"> <!-- AM I USING THE WRONG PAGE HERE? -->
        <?php
    settings_fields("settings_html_fields");
    do_settings_sections("theme_options");
    submit_button();
        ?>
    </form>
</div>
<?php
}