Latest update: Follow https://sridharkatakam.com/inline-logo-in-genesis/ instead.
Updated on October 18, 2015.
The standard method for displaying logos in Genesis is by adding theme support for custom header like this:
| //* Add support for custom header | |
| add_theme_support( 'custom-header', array( | |
| 'width' => 260, | |
| 'height' => 100, | |
| 'header-selector' => '.site-title a', | |
| 'header-text' => false | |
| ) ); |
by (code from Executive Pro’s functions.php)
What if you want to display the logo as a normal HTML image element instead?
In this article I show how genesis_seo_title filter can be used to display an inline image logo in Genesis.
I read about this method first here and then here.
The main benefit is that there’s less headache which directly contributes to increased number of hairs left on your skull when you want the logo to look good (in full and not cut off) in various devices like tablets and mobiles.
Screenshot of sample output after following this tutorial:
Step 1
Upload your logo image to child theme’s images directory.
Step 2
Add the following in active (child) theme’s functions.php:
| /********************************** | |
| * | |
| * Replace Header Site Title with Inline Logo | |
| * | |
| * @author AlphaBlossom / Tony Eppright | |
| * @link http://www.alphablossom.com/a-better-wordpress-genesis-responsive-logo-header/ | |
| * | |
| * @edited by Sridhar Katakam | |
| * @link https://sridharkatakam.com/use-inline-logo-instead-background-image-genesis/ | |
| * | |
| ************************************/ | |
| add_filter( 'genesis_seo_title', 'custom_header_inline_logo', 10, 3 ); | |
| function custom_header_inline_logo( $title, $inside, $wrap ) { | |
| $logo = '<img src="' . get_stylesheet_directory_uri() . '/images/logo.png" alt="' . esc_attr( get_bloginfo( 'name' ) ) . ' Homepage" width="200" height="100" />'; | |
| $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 ); | |
| } |
Replace logo.png with the name of your logo image.
Change the width and height values to match that of your logo. For screens with high resolutions like MacBooks, you may want to use image that is 2x sized. Ex.: logo.png is 500px x 160px but in the code we specify 250 and 80.
The above is a modified version of Tony Eppright’s code.
If your child theme’s style.css does not have CSS defined for screen-reader-text, add the following in it:
| /* ## Screen Reader Text | |
| --------------------------------------------- */ | |
| .screen-reader-text, | |
| .screen-reader-text span { | |
| position: absolute !important; | |
| clip: rect(0, 0, 0, 0); | |
| height: 1px; | |
| width: 1px; | |
| border: 0; | |
| overflow: hidden; | |
| } | |
| .screen-reader-text:focus { | |
| clip: auto !important; | |
| height: auto; | |
| width: auto; | |
| display: block; | |
| font-size: 1em; | |
| font-weight: bold; | |
| padding: 15px 23px 14px; | |
| color: #333; | |
| background: #fff; | |
| z-index: 100000; /* Above WP toolbar. */ | |
| text-decoration: none; | |
| box-shadow: 0 0 2px 2px rgba(0,0,0,.6); | |
| } |
Step 3
If you do not wish the tagline (Site Description) to appear, add this in style.css file:
| .site-description { | |
| text-indent: -9999px; | |
| height: 0; | |
| } |
Step 4
Depending on your active theme you may have to adjust styling. I am providing the needed CSS in a few themes here. The code below goes in the corresponding child theme’s style.css.
Genesis Sample
| .header-image .site-title > a { | |
| background: transparent; | |
| } | |
| .header-image .site-title { | |
| text-indent: 0; | |
| } | |
| .site-title img { | |
| vertical-align: top; | |
| } | |
| .title-area { | |
| padding: 0; | |
| } |
Dimensions of logo image used in the example: 260 x 100.
Executive Pro
| .title-area { | |
| padding-top: 10px; | |
| } | |
| .site-title { | |
| margin-bottom: 0; | |
| } | |
| .site-title a, .site-title a:hover { | |
| padding-top: 0; | |
| } | |
| a img { | |
| margin-bottom: 0; | |
| } | |
| .site-title a img { | |
| vertical-align: top; | |
| } |
Dimensions of logo image used in the example: 260 x 80.
Parallax Pro
| .site-title img { | |
| vertical-align: top; | |
| } |
Dimensions of logo image used in the example: 360 x 70.
Magazine Pro
| .site-title img { | |
| vertical-align: top; | |
| } | |
| .title-area { | |
| padding-top: 0; | |
| } |
Dimensions of logo image used in the example: 380 x 90.
Metro Pro
| .site-title a, .site-title a:hover { | |
| padding: 0; | |
| } | |
| .site-title img { | |
| vertical-align: top; | |
| } |
Dimensions of logo image used in the example: 270 x 80.
Agency Pro
| a img { | |
| margin-bottom: 0; | |
| } | |
| .site-title a img { | |
| vertical-align: top; | |
| } |
Dimensions of logo image used in the example: 300 x 60.
