Update on February 17, 2017: Follow Theme Logo in Genesis instead of this one below.
First there was this, then this, then this, then this and now this:
Tested in and written for Genesis Sample 2.2.2.
Logo to be uploaded at Appearance > Header in the back end or Customize in the admin bar on front end via the WordPress Customizer.
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.
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. */ | |
| } |
References:
https://sridharkatakam.com/how-to-remove-site-description-tagline-in-genesis/
http://wpbeaches.com/adding-in-a-responsive-html-logoimage-header-via-the-customizer-for-genesis/
[…] update: Follow https://sridharkatakam.com/inline-logo-in-genesis/ […]
Sridhar FYI
I just implemented this with genesis-sample 2.2.6 and it worked. But the site title was repeating twice if the image wasn’t present. And if the image was present the site tile was showing to the right of the header image. Until I found that my genesis-sample didn’t have the “screen-reader-text” class added to the style sheet.
I unhooked the description as mentioned in the function and I added these 2 css styles to my style sheet and the duplicate title disappeared.
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
}
.title-area p {
padding: 0;
margin: 0;
}
If your child theme does not have CSS for screen reader text, add this: https://gist.githubusercontent.com/srikat/fc0100c127c3e149a31c/raw/6cda019bef6ff7cd641255206f821ffb86d62129/style.css
Reference: https://sridharkatakam.com/how-to-remove-site-description-tagline-in-genesis/
The current version of Genesis Sample is 2.2.2.
[…] setting up inline logo […]
Hmm. I swear I’ve done this a whole bunch of times but for some reason it’s not working. It shows that it’s there in the code but doesn’t display on the site http://ofearthandnature.ca/
I got it worked out, reverted my CSS back to what I had it before and then added the extra CSS to the bottom of my stylesheet. What I would really like it to do is partially float over the green bar above it (it’s the header widget area).
http://ofearthandnature.ca/
Hey Sridhar, is this wrapping the site-title in H1 throughout the entire site? Would it be possible to only wrap it in H1 on the homepage while wrapping it in H3 on every other page?
Aww, my bad, I literally figured out I had the “Use semantic HTML5 page and section headings throughout site?” option checked, which was forcing H1 everywhere. My bad!
GREAT tutorial. I’ve implemented the code but seem to be having issues uploading the logo I want through the wordpress customizer. The link is working and the site-title element is there but the logo image is not. Any thoughts as to why this is happening?
Can you provide the URL of your site?
I believe I’ve found the solution. My image was absolutely positioned and then aligned weird. I’ve corrected that and then added
span.screen-reader-text {
text-indent: -9999px;
position: absolute;
}
to the text I didn’t want displayed.
[…] sagekey on Inline Logo in Genesis […]
[…] https://sridharkatakam.com/inline-logo-in-genesis/ […]
[…] https://sridharkatakam.com/inline-logo-in-genesis/ […]
Took me a while to figure this out, so I thought I would share…
A simple way to use a logo instead of the site title is to just remove this portion of the custom CSS:
/* when using site title instead of logo image – start */
.header-image .site-title,
.header-image .site-title a {
width: auto;
height: auto;
text-indent: 0;
}
Then upload the logo and choose the size as normal under: Genesis> Dynamik Design>Header
Oops, that was supposed to be a comment for this tutorial: https://sridharkatakam.com/fixed-header-inline-site-title-primary-nav-social-icons-search-icon-dynamik/#comment-414681
[…] can easily set up a responsive retina-ready logo in Altitude Pro using this […]
[…] https://sridharkatakam.com/inline-logo-in-genesis/ […]