askdesign
2/19/2017 - 5:30 PM

Responsive Logo - Theme Logo in Genesis

February 17, 2017 by Sridhar Katakam

Step 3
Go to Appearance > Customize > Site Identity. Click on “Select logo” button and upload your logo image.

References:

http://wpbeaches.com/using-new-custom-logo-theme-support-genesis/

https://sridharkatakam.com/inline-logo-in-genesis/

genesis/lib/structure/header.php
/*--- Step 2
Add the following in child theme’s style.css: ---*/

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

.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;
}
//* 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 @_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( '<span class="screen-reader-text">%s</span>%s', esc_html( get_bloginfo( 'name' ) ), get_custom_logo() );
	} else {
		// If no custom logo, wrap around the site name.
		$inside	= sprintf( '<a href="%s">%s</a>', trailingslashit( home_url() ), esc_html( get_bloginfo( 'name' ) ) );
	}

	// 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 a 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;

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