Create a full width responsive header image per page

All we need is an easy explanation of the problem, so here it is.

I’m new to WordPress – currently building a site that has a few pages (Home, Artists, History, Videos).

Each of those pages need a custom header containing a responsive full width image (the image will be used as a background image in the CSS).

I’d like to make this CMS friendly and allow the content editors to pick & upload the header image (ideally 2 images, desktop and mobile) from the widget area (from the page section).

How would you approach this?

info: (I’m using Twenty fifteen theme).



I created a Custom Field for the page
– header_imge – (Field Type –> Image)

Then I set the background-image (with the value of my Custom Field) from the tag. The rest is managed via CSS.

        $args = array(
            'meta_key' => 'header_image'
        $the_query = new WP_Query( $args );

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

This the quickest and easier solution so far. Adding inline style & PHP inside feels a bit hacky though.

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

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:

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:


/* 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).

   * 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">
        while ( have_posts() ) : the_post();
            get_template_part( 'content', 'page' );
            if ( comments_open() || get_comments_number() ) :
        // End the loop.
        </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.)

  1. Install Advanced Custom Fields
  2. On your site navigate to and upload acf-banner-import.json.
  3. Add page_banner-header.php to your active theme folder. Last, add a new page at ( and chose your new template called “Banner Header”.
  4. 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.


Take a look here on how wordpress adds custom header backgrounds (via css) to the twenty fifteen theme.



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.


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

To edit this directly on your site change 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.

Custom Headers Extended

Unique Headers

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:

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

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply