How to use a svg as custom header?

by

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!

2 Answers
2

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

Leave a Comment