How to add SVG logo before website name in header?

[Matus]

I'd like to display SVG logo before website name in header. Both, the text and logo should be linked to homepage on click.

What I've tried?
Current status is, I can only see logo or only text. I'd like to show them both.

1. I edit this code in Genesis Sample child theme's functions.php file:

// Add support for custom header.
add_theme_support( 'custom-header', array(
	'width'           => 110,
	'height'          => 79,
	'header-selector' => '.site-title a',
	'header-text'     => false,
	'flex-width'      => true,
	'flex-height'     => true,
) );

// Show option to change logo in WP customizer
register_default_headers( array(
    'svg-logo' => array(
    'url'   => '%2$s/images/logo.svg',
    'thumbnail_url' => '%2$s/images/logo.svg',
    'description'   => __( 'SVG Logo', 'CHILD_TEXT_DOMAIN' ),
    ),
));

2. I replaced width and height in code above to match image size I want to use.
3. Also, I uploaded image with name logo.svg to the genesis-sample/images folder.

What should I do next?
Any help appreciated.

https://akouspesne.sk

[Victor Font]

WordPress does not support SVG images out of the box. Install the SVG Support plugin so the correct mime type is setup. https://wordpress.org/plugins/svg-support/

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Matus]

Thank you Victor, what should I do next?

[Victor Font]

I wouldn't have added any code for registering the default headers. Support for Custom headers should already exist in your theme. Enabling the flex-height and flex-width is correct. This allows you to skip cropping when a SVG is uploaded.

After you upload the SVG, only the image will display. The site description is easy enough. You need to change the text indent to bring it back onto the screen. The site title is a little more difficult. Uploaded images are added as background images to the site-title link. The text is still there but hidden off screen. You can change the text-indent for the site-title a element to bring the text back on the screen, but it will be over the image. You have to adjust the positioning to show it where you want to. It all sounds easy, but it's not.

The alternative is to create your own custom header to replace the standard Genesis header. I have a tutorial that teaches you how to do this using CSS Grid: https://victorfont.com/customize-the-genesis-header-with-css-grid-layout/

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Author]

Posts