How to use a svg as custom header?

Question

I want to use a svg as a custom header in WordPress.

I tried two ways:

First

I want the user to be able to upload their own svg as a custom header. So I enabled svg uploads in the functions.php:

function cc_mime_types($mimes) {
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');

But that does not work because WordPress requires me to crop the image before using it as the custom header image. Even when it is the exact size I defined in the functions.php file.

Second

Since there seems to be no way to get svgs as a custom header from a simple user upload, I thought about adding the svg as a default image. This is what I did:

add_theme_support( 'custom-header', array(
    'default-image'   => get_stylesheet_directory_uri() . '/images/logo.svg',
    'width'           => 320,
    'height'          => 320,
    'header-selector' => '.site-title a',
    'header-text'     => false,
) );

When I set the header image to the default in the backend, it seems to work. The svg is shown as the header image, and I can save it. But when I close the customization panel and look at the frontend, the fallback text is shown. No sign of my settings …

The worst way

This leaves me with hard-coding the default logo directly to the theme. Which leaves me with no way to overwrite it from the WordPress backend, rendering the custom header function completely useless.

Any suggestions on how to solve this are much appreciated!

Answer 1

I solved it using the second way.

I found out that you have to register the default image also. So after registering the svg as a default header it displays like it should!

Here is my code:

register_default_headers( array(
    'kami-logo' => array(
        'url'   => get_stylesheet_directory_uri() . '/images/logo.svg',
        'thumbnail_url' => get_stylesheet_directory_uri() . '/images/logo.svg',
        'description'   => __( 'Kami Logo', 'fun' )
    )
));

add_theme_support( 'custom-header', array(
    'default-image'   => get_stylesheet_directory_uri() . '/images/logo.svg',
    'width'           => 320,
    'height'          => 320,
    'header-selector' => '.site-title a',
    'header-text'     => false
) );

Answer 2

An alternative to setting up the default image is to provide a button to "skip cropping" on the 2nd screen after selecting your svg image, which must be already cropped as the exact size you need.

All you need to do is take that array defined above, where you define the height and width, then add this:

    'flex-width'             => true,
    'flex-height'            => true,

so for my own custom theme the full snippet is:

function hikeitbaby_custom_header_setup() {
    add_theme_support( 'custom-header', apply_filters( 'hikeitbaby_custom_header_args', array(
        'default-image'          => '',
        'default-text-color'     => '000000',
        'width'                  => 190,
        'height'                 => 84,
        'flex-width'             => true,
        'flex-height'            => true,
        'wp-head-callback'       => 'hikeitbaby_header_style',
        'admin-head-callback'    => 'hikeitbaby_admin_header_style',
        'admin-preview-callback' => 'hikeitbaby_admin_header_image',
    ) ) );
}
add_action( 'after_setup_theme', 'hikeitbaby_custom_header_setup' );

which will provide you with a screen like this: