Add Custom Image Field to WordPress Theme Customizer

/**
 * Register new customizer fields
 */
function my_customize_register($wp_customize)
{
    $wp_customize->add_setting('footer_image', array(
        'default' => '',
        'type' => 'theme_mod',
        'sanitize_callback' => 'my_customize_sanitize_footer_image',
    ));

    $wp_customize->add_control(
        new WP_Customize_Image_Control(
            $wp_customize, 'my_footer_image', array(
                'label'    => 'Footer Image',
                'settings' => 'footer_image',
                'section'  => 'title_tagline',
                'priority' => 50,
            )
        )
    );
}

add_action('customize_register', 'my_customize_register');

/**
 * Sanitize footer image
 *
 * @param $input
 *
 * @return string
 */
function my_customize_sanitize_footer_image($input)
{
    error_log(attachment_url_to_postid($input));//debug
    return attachment_url_to_postid($input);
}

To make the theme preview work, in JS in the admin you will need to add…

// Footer image
wp.customize('my_footer_image', function (value) {
    value.bind(function (to) {
        $('.footer-image').text(to);
    });
 });

Then to output in your theme you can either output directly using…

<?php echo get_theme_mod('footer_image'); ?>

However, since we are saving this in the DB as an attachment ID, you will probably want to create a template tag function to convert it to HTML to output.

/**
 * Returns a custom footer image set in the WordPress Customizer
 *
 * @see get_custom_logo()   based on core function for the custom logo
 *
 * @param int $blog_id Optional. ID of the blog in question. Default is the ID of the current blog.
 *
 * @return string Custom logo markup.
 */
function my_get_footer_image($blog_id = 0)
{
    $html = '';
    $switched_blog = false;

    if (is_multisite() && !empty($blog_id) && (int)$blog_id !== get_current_blog_id()) {
        switch_to_blog($blog_id);
        $switched_blog = true;
    }

    $custom_logo_id = get_theme_mod('footer_image');

    if ($custom_logo_id) {
        $custom_logo_attr = array(
            'class' => 'footer-image',
        );

        /*
         * If the image alt attribute is empty, get the site title and explicitly
         * pass it to the attributes used by wp_get_attachment_image().
         */
        $image_alt = get_post_meta($custom_logo_id, '_wp_attachment_image_alt', true);
        if (empty($image_alt)) {
            $custom_logo_attr['alt'] = get_bloginfo('name', 'display');
        }

        /*
         * If the alt attribute is not empty, there's no need to explicitly pass
         * it because wp_get_attachment_image() already adds the alt attribute.
         */
        $html = sprintf(
            '<div class="footer-image-wrap" rel="home">%2$s</div>',
            esc_url(home_url('/')),
            wp_get_attachment_image($custom_logo_id, 'full', false, $custom_logo_attr)
        );
    } elseif (is_customize_preview()) {
        // If no image is set but we're in the Customizer, leave a placeholder (needed for the live preview).
        $html = sprintf(
            '<div class="footer-image-wrap" style="display:none;"><img class="footer-image"/></div>',
            esc_url(home_url('/'))
        );
    }

    if ($switched_blog) {
        restore_current_blog();
    }

    /**
     * Filters the custom footer image output
     *
     * @param string $html    Custom footer image HTML output
     * @param int    $blog_id ID of the blog to get the custom footer image for
     */
    return apply_filters('my_get_footer_image', $html, $blog_id);
}

Then output it in your theme file using…

<?php echo my_get_footer_image(); ?>