2

Clarification: My default header image will not RE-display (by clicking suggested image) after it has been removed using theme customizer "Hide Image" option.

  1. I added theme support for Custom Header Image

    // Add Theme Support for Custom Header Image
    add_theme_support( 'custom-header', 
        array(
            'default-image' => get_template_directory_uri() . '/assets/img/hdr_earth.jpg',
            'default-text-color' => '#e2f0d6',
            'header-text' => true,
            'uploads' => true,
            'width' => 1140,
            'height' => 200,
            'wp-head-callback' => 'wpfw_style_header',
        )
    );
    
  2. Inside the Theme Customizer I see the (default) image displayed as:

    • The "Current Header" box, and
    • In the "Suggested" box
  3. I deleted the current header image by clicking the "Hide Image" button.

And this is where the problem started

When I attempt to re-add the default image by clicking on the "Suggested" (i.e. default) image...

  1. The image is displayed in the customizer window.
  2. But the image will not save, so the image does not display on the web page.

A var_dump( get_header_image() ); returned false, so after reading the function in the core, I see this if ( 'remove-header' == $url ) return false;.

So a var_dump( get_theme_mods() ) does indeed show 'header_image' => string 'remove-header' (length=13).

???

... now this is after I added the default image back and saved.

What am I missing?

The entire script (custom-header.php)

    if ( ! function_exists( 'wpfw_custom_header' ) ) {
        function wpfw_custom_header() {
            // Add theme Support for Custom Backgrounds
            add_theme_support( 'custom-background',
                array(
                    'default-color' => '#e2f0d6',
                    'default-image' => get_template_directory_uri() . '/assets/img/bgp-128x180.jpg',
                )
            );

            // Add Theme Support for Custom Header Image
            add_theme_support( 'custom-header', 
                array(
                    'default-image'             => get_template_directory_uri() . '/assets/img/hdr_earth.jpg',
                    'default-text-color'    => '#e2f0d6',
                    'header-text'                   => true,
                    'uploads'                       => true,
                    'width'               => 1140,
                    'height'              => 200,
                    'wp-head-callback'      => 'wpfw_style_header',
                )
            );
        } // end wpfw_custom_header()
    } // end if 

    // Hook into the 'after_setup_theme' action
    add_action( 'after_setup_theme', 'wpfw_custom_header', 11 );

    /**
     * ---------------------------------------------- 
     * Callback function for updating header styles
     * ----------------------------------------------
     */

    if ( ! function_exists( 'wpfw_style_header' ) ) {
        function wpfw_style_header() {
          $text_color = get_header_textcolor();
          ?>  
          <style type="text/css" id="wpfw-custom-header-styles">
              .site-title a.site-title-link {
                color: #<?php echo esc_attr( $text_color ); ?>;
              }

              <?php if ( display_header_text() != true ) : ?>
                  .site-title {
                    display: none;
              } 
              <?php endif; ?> 
          </style>
          <?php 
        } // end wpfw_style_header()
    } // end if...
1

You should register the default headers using register_defaults_headers - e.g.

register_default_headers( array(
    'default-image' => array(
        'url'           => get_stylesheet_directory_uri() . '/assets/img/default-header.jpg',
        'thumbnail_url' => get_stylesheet_directory_uri() . '/assets/img/default-header.jpg',
        'description'   => __( 'Default Header Image', 'textdomain' )
    ),
) );

See the codex entry for more info on the function - https://codex.wordpress.org/Function_Reference/register_default_headers.

The Codex isn't clear, but this function is actually required for custom_headers to function correctly.

  • I don't even have anything like this and i have a working custom headers in my customizer. – CompactCode Apr 23 '17 at 17:44
  • Never mind , this is needed in order for it to work! Good comment – CompactCode Apr 23 '17 at 18:06
0

Try this where you need to get the url of the header image and you have set the default:

    $url = has_header_image() ? get_header_image() : get_theme_support( 'custom-header', 'default-image' );
0

To be honnest i have a working header image in my customizer using the following code :

Functions.php

/* custom header image */
$headerimage = array(
    'default-image' => '%s/images/image1.jpg',
    'width' => 1920,
    'height' => 1080,
    'flex-height' => false,
    'flex-width' => true,
    'uploads' => true,
    'random-default' => false,
    'header-text' => true,
    'default-text-color' => '',
    'wp-head-callback' => '',
    'admin-head-callback' => '',
    'admin-preview-callback' => '',
);
add_theme_support('custom-header', $headerimage);

Nothing in customizer.php

Where i call the header-image :

<header class="site-header">
    <div class="row header-home no-gutters" <?php echo 'style="background-image:url(' . get_header_image() . ');' . 'background-repeat: no-repeat;
     background-position: center; background-size: cover;min-height:100vh">'; ?>
    </div>
</header>

Register default images (appearently this is needed ALSO functions.php)

register_default_headers( array(
    'headerimage' => array(
        'url'           => '%s/images/image1.jpg',
        'thumbnail_url' => '%s/images/image1.jpg',
        'description'   => __( 'headerimage', 'DesignitMultistore' )
        ),
    ) );
  • I have editted some of these so please review my edits. This works like a charm for me – CompactCode Apr 23 '17 at 18:07
0

For people still having problems, the complete code you need is:

in your functions.php:

register_default_headers( array(
    'default-image' => array(
        'url'           => get_template_directory_uri() . '/img/header.jpg',
        'thumbnail_url' => get_template_directory_uri() . '/img/header.jpg',
        'description'   => __( 'Default Header Image', 'textdomain' )
    ),
) );

function yourtheme_custom_header_setup() {
    $args = array(
        'default-image'      => get_template_directory_uri() . '/img/header.jpg',
        'default-text-color' => '000',
        'width'              => 1200,
        'height'             => 720,
        'flex-width'         => true,
        'flex-height'        => true,
    );
    add_theme_support( 'custom-header', $args );
}
add_action( 'after_setup_theme', 'yourtheme_custom_header_setup' );

In your template file (probally header.php):

echo(has_header_image() ? get_header_image() : get_theme_support( 'custom-header', 'default-image' ));

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.