Replace Custom Header With Custom Logo In Customizer > Site Identity

WordPress now includes a site identity setting in the customizer which enables you to add a custom logo and site icon.

This new setting is in addition to the existing custom header setting which also enables you to add a header image or logo to your themes header. In this tutorial, you’ll learn how to use the new custom logo setting to add your logo or site title & description.

Once you add the code below to your child themes functions file, you can then choose to use Dynamic Text or Image Logo.

Using Title & Description

You must remove the image & add the text for your title & tagline.

Also, select the correct settings from: Use for site title/logo: Dynamic Text

Using Image

You must add your logo. There’s no need to remove the text.

Also, select the correct settings from: Use for site title/logo: Image Logo

Note : Support is not yet built into Genesis for the custom-logo function unlike support for customer-header which is currently a better solution.

Here’s the code for logged in members:

Step 1 : The Input – Add the following code to your functions file:

//* Add support for custom logo
add_theme_support( 'custom-logo', array(
	'width'           => 300,
	'height'          => 90,
	'header-selector' => '.site-title a',
	'header-text'     => true,
	'flex-height'     => true,
) );

If your theme includes code like the above for adding theme support a custom-header, you can remove that code or simply change the name in the code from custom-header to custom-logo.

Step 2 : The Output – Add the following code to your functions file:

add_filter( 'genesis_seo_title', 'add_logo_to_title' );

function add_logo_to_title( $title ) {

    $inside = sprintf( '<a href="%s">%s</a>', trailingslashit( home_url() ), the_custom_logo() );
    
     //* Determine which wrapping tags to use
	$wrap = genesis_is_root_page() && 'title' === genesis_get_seo_option( 'home_h1_on' ) ? 'h1' : 'p';

	//* A little fallback, in case an SEO plugin is active
	$wrap = genesis_is_root_page() && ! genesis_get_seo_option( 'home_h1_on' ) ? 'h1' : $wrap;

	//* Wrap homepage site title in p tags if static front page
	$wrap = is_front_page() && ! is_home() ? 'p' : $wrap;

	//* And finally, $wrap in h1 if HTML5 & semantic headings enabled
	$wrap = genesis_html5() && genesis_get_seo_option( 'semantic_headings' ) ? 'h1' : $wrap;

	$wrap = apply_filters( 'genesis_site_title_wrap', $wrap );
	
	return $title;
}

Step 3 : Add the following CSS to your style sheet:

.site-title,
.site-description {
	display: block;
	height: 0;
	margin-bottom: 0;
	text-indent: -9999px;
}

Thats it!

Optional

Remove the PHP code from functions.php for the custom header.

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

Other Options

Can also be coded this way:

add_filter( 'genesis_seo_title', 'add_logo_to_title' );

function add_logo_to_title( $title ) {

    $inside = sprintf( '<a href="%s">%s</a>', trailingslashit( home_url() ), the_custom_logo() );
    
	return $title;
}

Change the Custom Logo Link #

Here’s a filter function to change the link for the logo :

Comments

One response to “Replace Custom Header With Custom Logo In Customizer > Site Identity”

Evelyn Rios

May 14, 2018

Thank you! This is the first correct solution I’ve found to the issue of changing the actual logo URL (as opposed to the URL of the site title).

Log in to Reply