1

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

Thanks

UPDATE

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.

    <?php   
        $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.

3

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

  1. Install Advanced Custom Fields
  2. 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.
  3. 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".
  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.


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.

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

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:

if(get_field('header_image'))
{
    echo'<div class="header-banner" style="background-image:url(' . get_field('header_image') . ')"></div>';
}
  • Hi Bryan - thanks for your swift response. Looking into very soon and I come back to you. Thanks again. – John Oct 5 '15 at 11:26
  • Hi Bryan, would Customer Header let me add the image as a background image? – John Oct 6 '15 at 16:46
  • I'm not sure what customer header is. Is that a plugin? Or are you just referring to custom headers in general. It's hard to really tell what is best when I don't know what you're trying to do exactly. Did you want to just override the default sidebar background image in twenty fifteen on a page by page basis? Or are you changing the complete design of your site? Your best bet is to learn exactly how this is all working, but take a look at my updated answer on custom headers above, hopefully that will help. – Bryan Willis Oct 7 '15 at 11:00
  • Hi Bryan, from all your suggestions I picked the Custom Fields one. See my update. It works but feels a bit hacky. Thanks for your help. – John Oct 8 '15 at 16:33
  • See my latest update on the bottom in reply to your custom field question. – Bryan Willis Oct 16 '15 at 12:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.