Theme Logo in Genesis

Theme Logo is a theme feature, first introduced in Version 4.5. This feature allows themes to add custom logos.

Theme/Custom Logo feature is the recommended method for adding logos in WordPress versus using the Custom Header especially with the built-in schema benefit of itemprop="logo" microdata for the logo image element.

In this article, I share code that I originally found on John Sundberg’s website, then modified by Tony Eppright, then by Neil Gowran with a little input by Mike Hemberger finally updated with code directly in the Genesis core.

The idea is to replace the logo appearing as CSS background with inline image added via Theme Logo WordPress feature.

While the tutorial has been written for Genesis Sample child theme, it should work with a few adjustments in any Genesis child theme.

Step 1

Edit child theme’s functions.php.

a) Remove the code to add support for custom header and add support for the custom logo instead.

Replace

//* 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,
) );

with

// Add support for custom logo.
add_theme_support( 'custom-logo', array(
	'width'       => 600,
	'height'      => 160,
	'flex-width' => true,
	'flex-height' => true,
) );

b) Add

add_filter( 'genesis_seo_title', 'custom_header_inline_logo', 10, 3 );
/**
 * Add an image inline in the site title element for the logo
 *
 * @param string $title Current markup of title.
 * @param string $inside Markup inside the title.
 * @param string $wrap Wrapping element for the title.
 *
 * @author @_AlphaBlossom
 * @author @_neilgee
 * @author @_JiveDig
 * @author @_srikat
 */
function custom_header_inline_logo( $title, $inside, $wrap ) {
	// If the custom logo function and custom logo exist, set the logo image element inside the wrapping tags.
	if ( function_exists( 'has_custom_logo' ) && has_custom_logo() ) {
		$inside = sprintf( '%s%s', esc_html( get_bloginfo( 'name' ) ), get_custom_logo() );
	} else {
		// If no custom logo, wrap around the site name.
		$inside	= sprintf( '<span class="screen-reader-text">%s</span>%s', trailingslashit( home_url() ), esc_html( get_bloginfo( 'name' ) ) );
	}

	// Build the title.
	$title = genesis_markup( array(
		'open'    => sprintf( "<{$wrap} %s>", genesis_attr( 'site-title' ) ),
		'close'   => "</{$wrap}>",
		'content' => $inside,
		'context' => 'site-title',
		'echo'    => false,
		'params'  => array(
			'wrap' => $wrap,
		),
	) );

	return $title;
}

add_filter( 'genesis_attr_site-description', 'custom_add_site_description_class' );
/**
 * Add class for screen readers to site description.
 * This will keep the site description markup but will not have any visual presence on the page
 * This runs if there is a logo image set in the Customizer.
 *
 * @param array $attributes Current attributes.
 *
 * @author @_neilgee
 * @author @_srikat
 */
function custom_add_site_description_class( $attributes ) {
	if ( function_exists( 'has_custom_logo' ) && has_custom_logo() ) {
		$attributes['class'] .= ' screen-reader-text';
	}

	return $attributes;
}

Step 2

Add the following in child theme’s style.css:

.wp-custom-logo .title-area {
	max-width: none;
	margin-top: 0;
}

.wp-custom-logo .site-title {
	text-indent: 0;
}

.wp-custom-logo .site-title > a {
	min-height: 0;
}

.custom-logo-link {
	display: block;
}

.custom-logo {
	vertical-align: top;
}

If your theme does not have the CSS for screen reader text, add:

/* ## Screen Reader Text
--------------------------------------------- */

.screen-reader-shortcut,
.screen-reader-text,
.screen-reader-text span {
	border: 0;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus,
.screen-reader-shortcut:focus,
.genesis-nav-menu .search input[type="submit"]:focus,
.widget_search input[type="submit"]:focus {
	background: #fff;
	box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
	clip: auto !important;
	color: #333;
	display: block;
	font-size: 1em;
	font-weight: bold;
	height: auto;
	padding: 15px 23px 14px;
	text-decoration: none;
	width: auto;
	z-index: 100000; /* Above WP toolbar. */
}

Step 3

Go to Appearance > Customize > Site Identity.

Click on “Select logo” button, upload/select your logo image, click on “Skip Cropping” button and finally “Save & Publish”.