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

Question

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="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'); ?>
    <?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
}

Answer 1

The examples you've seen are out of date. From WordPress 4.5, released in 2016, the proper way to support a custom logo was to register support for the Custom Logo feature in your theme.

That link has the full documentation, but the short version is that you use this code to enable the standard logo field in the Customiser:

add_theme_support( 'custom-logo' );

Then you can output the selected logo in the theme with:

the_custom_logo();

In the modern Block themes no code is necessary; the user can add their logo by using the Site Logo block.