Inline Logo in Genesis

Posted on

Logo to be uploaded at Appearance > Header in the back end or Customize in the admin bar on front end via the WordPress Customizer in functions.php:

add_theme_support( 'custom-header', array(
	'width'            => 400,
	'height'           => 150,
	'flex-height'      => true,
	'flex-width'       => true,
	'header-text'      => false,
) );

// Remove custom Genesis custom header style
remove_action( 'wp_head', 'genesis_custom_header_style' );

/**********************************
 *
 * Replace Header Site Title with Inline Logo
 *
 * @author AlphaBlossom / Tony Eppright, Neil Gee
 * @link http://www.alphablossom.com/a-better-wordpress-genesis-responsive-logo-header/
 * @link https://wpbeaches.com/adding-in-a-responsive-html-logoimage-header-via-the-customizer-for-genesis/
 *
 * @edited by Sridhar Katakam
 * @link https://sridharkatakam.com/
 *
************************************/
add_filter( 'genesis_seo_title', 'custom_header_inline_logo', 10, 3 );
function custom_header_inline_logo( $title, $inside, $wrap ) {

	if ( get_header_image() ) {
              $logo = '<img src="' . get_header_image() . '" width="' . esc_attr( get_custom_header()->width ) . '" height="' . esc_attr( get_custom_header()->height ) . '" alt="' . esc_attr( get_bloginfo( 'name' ) ) . ' Homepage">';
        } else {
              $logo = get_bloginfo( 'name' );
        }

	$inside = sprintf( '<a href="%s">%s<span class="screen-reader-text">%s</span></a>', trailingslashit( home_url() ), $logo, 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 an SEO plugin is active
	$wrap = genesis_is_root_page() && ! genesis_get_seo_option( 'home_h1_on' ) ? 'h1' : $wrap;

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

	return sprintf( '<%1$s %2$s>%3$s</%1$s>', $wrap, genesis_attr( 'site-title' ), $inside );

}

// Add class for screen readers to site description (if header image has been set) to hide it
add_filter( 'genesis_attr_site-description', 'sk_attributes_screen_reader_class' );
function sk_attributes_screen_reader_class( $attributes ) {
	if ( get_header_image() ) {
		$attributes['class'] .= ' screen-reader-text';
	}

	return $attributes;
}

Width and height in the add_theme_support function are only to give a visual recommendation of the dimensions in the back end and not actually used anywhere in the logo display.

Header Image uploaded in Customizer will be shown in its actual dimensions in style.css:

.site-header {
	min-height: 0;
}

.title-area {
	padding: 0;
}

.header-image .site-title {
	text-indent: 0;
}

.header-image .site-title > a {
	background: none;
	float: none;
	min-height: 0;
	width: auto;
}

.site-title img {
	vertical-align: top;
}

@media only screen and (max-width: 960px) {

	.title-area {
		float: none;
	}

	.site-header .widget-area {
		float: none;
		text-align: center;
		margin-top: 20px;
	}

}

If you would like to use 2x sized image for retina displays, specify the 1x width and height for .site-title img.

Ex.: To show a 400 x 150 sharp image, upload 800 x 300 sized image and in style.css code, use:

.site-title img {
	vertical-align: top;
	width: 400px;
	height: 150px;
}

If the following CSS for Screen Reader Text is not already present in your site’s active child theme, add it.

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

.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 {
	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. */
}