Crear una imagen de encabezado responsive de ancho completo por página

John, hay muchas formas de hacer esto, dependiendo de lo que quieras exactamente y cuánta experiencia tengas con html/php/css (o cuánto tiempo quieras invertir aprendiendo).

Hay muchos plugins en WordPress que podrían lograr esto. Quizás quieras probar algunos de ellos:

https://wordpress.org/plugins/search.php?q=custom+header

Si quieres algo listo para usar, parece que este es una buena opción, aunque las opciones se cambian en el backend, no en el personalizador de widgets. Otros plugins que también podrían lograr algo similar son Revolution Slider o Visual Composer, aunque tampoco permiten usar el personalizador directamente.

Si decides que realmente quieres ir por la ruta del widget de imagen, he probado la mayoría de los mejor valorados en el directorio de plugins y todos funcionan bastante bien. Sin embargo, no estoy seguro de si alguno tiene soporte para imágenes de fondo. Si encuentras uno que lo tenga, úsalo y luego simplemente crea una plantilla personalizada con un área de widgets nueva para mostrar tu banner.

Ejemplo de cómo crear un área de widgets personalizada y una plantilla de página en twenty-fifteen:

<?php

/* incluir en functions.php */

function register_banner_widget_area() {

    $args = array(
        'id'            => 'custom-banner-area',
        'name'          => __( 'Después del encabezado - (Área de banner personalizado)', 'my-theme' ),
        'description'   => __( 'Esta es un área para un banner personalizado',  'my-theme'  ),
        'class'         => 'banner-area',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '',
        'after_title'   => '',
    );

    register_sidebar( $args );

}
add_action('widgets_init', 'register_banner_widget_area');

function do_custom_banner_area() {
   if ( is_active_sidebar( 'custom-banner-area' ) {
        dynamic_sidebar( 'custom-banner-area' );
   }
}
add_action('custom_banner_widget_area', 'do_custom_banner_area');

Luego duplica page.php del tema twenty fifteen y renómbralo a algo como "template_header-image.php". Dentro del archivo, incluye tu nuevo hook que añadirá soporte para un área de widgets personalizada justo encima del contenido (asumiendo que eso es lo que querías).

 <?php
  /**
   * Template Name: Área de encabezado personalizado
   * Description: Una plantilla que permite áreas de encabezado personalizadas
   */

 get_header(); ?>
 <?php do_action( 'custom_banner_widget_area' ); ?> 
    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">
        <?php
        while ( have_posts() ) : the_post();
            get_template_part( 'content', 'page' );
            if ( comments_open() || get_comments_number() ) :
                comments_template();
            endif;
        // Fin del loop.
        endwhile;
        ?>
        </main><!-- .site-main -->
    </div><!-- .content-area -->
<?php get_footer(); ?>

Si no puedes encontrar un widget de imagen o estás buscando crear un CMS verdaderamente "personalizado" con campos editables fácilmente, y tienes algo de experiencia en css y html, Advanced Custom Fields ha sido un favorito de muchos durante mucho tiempo y probablemente es el más completo de los plugins de campos personalizados. Tiene mucha documentación y mucho soporte, y te permite crear fácilmente backends personalizados para tus plantillas de sitio.

Aquí hay un ejemplo que armé que te permitirá seleccionar una imagen en cada página (este ejemplo es para edición en el backend, aunque también puedes usar ACF para crear campos de widgets personalizados si lo deseas).

1. Instala Advanced Custom Fields
2. En tu sitio, navega a http://example.com/wp-admin/edit.php?post_type=acf-field-group&page=acf-settings-export y sube acf-banner-import.json.
3. Añade page_banner-header.php a la carpeta de tu tema activo. Por último, añade una nueva página en (http://example.com/wp-admin/post-new.php?post_type=page) y elige tu nueva plantilla llamada "Banner Header".
4. Ahora simplemente edita los campos que aparecen y publica tu página.

Espero que algo aquí funcione para ti... Obviamente, probablemente necesitarás editar el css para darle el estilo que prefieras.

ACTUALIZACIÓN:

Mira aquí cómo WordPress añade fondos de encabezado personalizados (vía css) al tema twenty fifteen.

twentyfifteen/inc/custom-header.php#L141

twentyfifteen/inc/custom-header.php#L157

Así que si quisieras editar eso, simplemente comentarías/eliminarías las imágenes de fondo actuales o expandirías sobre ellas añadiendo a esa misma sección en el archivo custom-header.php.

Ejemplo:

.css-selector {
    background-image: url(<?php header_image(); ?>);
}

Para editar esto directamente en tu sitio, cambia yoursite.com en el enlace de abajo por el nombre de tu sitio (debes estar logueado en el backend de WordPress) y esto te llevará directamente a donde editas el css del encabezado para el tema twenty fifteen por defecto.

http://yoursite.com/wp-admin/theme-editor.php?file=inc%2Fcustom-header.php&theme=twentyfifteen&scrollto=2397

Honestamente, mientras un plugin no tenga reseñas terribles, deberías estar bien usando cualquiera de los que dicen añadir encabezados personalizados. Si estás usando twenty fifteen, la mayoría de los plugins de encabezado personalizado los añadirán como imágenes de fondo porque así funciona el tema por defecto.

Prueba uno de estos. Ambos deberían funcionar bien.

Custom Headers Extended

Unique Headers

Actualización 2: Método ACF

Esta es una respuesta a tu última actualización sobre Advanced Custom Fields. Si estás poniendo esto en una plantilla simple de página/entrada, no deberías necesitar ese código de meta_key y WP_Query en tu última actualización.

Esto solo debería funcionar:

<div class="header-banner" style="background-image:url(<?php the_field('header_image'); ?>)"></div>

Si quieres ser más limpio al respecto, puedes envolverlo en un if para que no genere html innecesario cuando no se selecciona ninguna imagen:

if(get_field('header_image'))
{
    echo'<div class="header-banner" style="background-image:url(' . get_field('header_image') . ')"></div>';
}