John there are lots of ways to do this, depending on what you want exactly and how much experience you have with html/php/css (or how much time you’d want to spend learning).
There are plenty of plugins on wordpress that could achieve this. You might want to just try some of them out:
https://wordpress.org/plugins/search.php?q=custom+header
If you want something straight out of the box it looks like this is a good option although options are changed in the backend not the widget customizer. Other plugins that could also achieve something like this are ones like Revolution Slider or Visual Composer although they also don’t let you use the customizer directly.
If you decide you really want to go theimage widget route, I’ve tried most of the rated ones on the plugin directory and they all work pretty well. However I’m not sure if if any have support for background images. If you find one that does, go with that and then simply create a custom template with a new widget area to display your banner.
Example of how to create custom widget area and page template in twenty-fifteen:
<?php
/* include in functions.php */
function register_banner_widget_area() {
$args = array(
'id' => 'custom-banner-area',
'name' => __( 'After Header - (Custom Banner Area)', 'my-theme' ),
'description' => __( 'This is an area for a custom banner', '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');
Next duplicate page.php from twenty fifteen theme and rename it to something else like “template_header-image.php”. Inside the file include your newly created hook which will add support for a custom widget area just above the content (assuming that’s what you wanted).
<?php
/**
* Template Name: Custom Header Area
* Description: A Template Which Allows Custom Header Areas
*/
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;
// End the loop.
endwhile;
?>
</main><!-- .site-main -->
</div><!-- .content-area -->
<?php get_footer(); ?>
If you are unable to find an image widget or you are looking to create a truly “custom” CMS with easy editable fields, and have some experience in css and html, Advanced Custom Fields has been a long time favorite by many and is probably the most feature rich of the custom field plugins. It has tons of documentation and tons of support and lest you easily create custom backends for your site templates.
Here is an example I put together that will let you select an image on each page (this example is for backend editing although you can also use ACF to create custom widget fields if you want.)
- Install Advanced Custom Fields
- On your site navigate to http://example.com/wp-admin/edit.php?post_type=acf-field-group&page=acf-settings-export and upload acf-banner-import.json.
- Add page_banner-header.php to your active theme folder. Last, add a new page at (http://example.com/wp-admin/post-new.php?post_type=page) and chose your new template called “Banner Header”.
- Now simply edit the fields that appear and publish your page.
Hopefully something here works for you… You’ll obviously need to probably edit to css to style it to your preferences.
UPDATE:
Take a look here on how wordpress adds custom header backgrounds (via css) to the twenty fifteen theme.
twentyfifteen/inc/custom-header.php#L141
twentyfifteen/inc/custom-header.php#L157
So if you were to edit that you would just comment out/delete the current background images or just expand upon them by adding to that same section in the custom-header.php file.
Example:
.css-selector {
background-image: url(<?php header_image(); ?>);
}
To edit this directly on your site change yoursite.com in the link below to your site name (you must be logged in to the wordpress backend) and this will take you straight to where you edit the header css for default twenty fifteen theme.
To be honest as long as a plugin doesn’t have terrible reviews, you should be fine using any of them claiming to add custom headers. If you using twenty fifteen most all of the custom header plugins will be adding them as background images because that’s how the theme works by default.
Try one of these out. The should both work fine.
Update 2: ACF Method
This is a reply to your last update on advanced custom fields. If you are putting this a simple page/post template you shouldn’t need that meta_key and WP_Query code in your latest update.
This alone should work:
<div class="header-banner" style="background-image:url(<?php the_field('header_image'); ?>)"></div>
If you want to be cleaner about it you can wrap in an if statement so it doesn’t spit out unnecessary html when no image is selected:
if(get_field('header_image'))
{
echo'<div class="header-banner" style="background-image:url(' . get_field('header_image') . ')"></div>';
}