In Genesis Facebook group a user asked,
Is it possible to display the Site Title on the homepage and the Site Logo on all other pages? I’m using Altitude Pro. Thanks for any help.
In this tutorial I share the code for displaying header image (logo) uploaded in customizer as an inline image rather than as a background for inner pages of Altitude Pro. Front page will have the site title in header instead of logo.
Step 1
In functions.php replace
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //* Add support for custom header | |
| add_theme_support( 'custom-header', array( | |
| 'flex-height' => true, | |
| 'width' => 360, | |
| 'height' => 76, | |
| 'header-selector' => '.site-title a', | |
| 'header-text' => false, | |
| ) ); |
with
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Add support for custom header | |
| // https://codex.wordpress.org/Custom_Headers | |
| add_theme_support( 'custom-header', array( | |
| 'width' => 360, | |
| 'height' => 76, | |
| '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 on inner pages | |
| * | |
| * @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() && !is_front_page() ) { | |
| $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_filter( 'genesis_attr_site-description', 'abte_add_site_description_class' ); | |
| /** | |
| * Add class for screen readers to site description. | |
| * | |
| * Unhook this if you'd like to show the site description. | |
| * | |
| * @since 1.0.0 | |
| * | |
| * @param array $attributes Existing HTML attributes for site description element. | |
| * @return string Amended HTML attributes for site description element. | |
| */ | |
| function abte_add_site_description_class( $attributes ) { | |
| $attributes['class'] .= ' screen-reader-text'; | |
| return $attributes; | |
| } | |
| add_filter( 'body_class', 'sk_body_class' ); | |
| /** | |
| * Add "inner" class to 'body' element for inner pages | |
| * i.e., for all pages other than site's homepage/front page. | |
| * | |
| * @author Sridhar Katakam | |
| * @link http://sridharkatakam.com/add-inner-body-class-inner-pages-wordpress/ | |
| */ | |
| function sk_body_class( $classes ) { | |
| if ( ! is_front_page() ) { | |
| $classes[] = 'inner'; | |
| } | |
| return $classes; | |
| } |
Step 2
In style.css replace
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .title-area { | |
| float: left; | |
| padding: 25px 0; | |
| width: 360px; | |
| } | |
| .site-header.dark .title-area { | |
| padding: 15px 0; | |
| } | |
| .site-title { | |
| font-size: 24px; | |
| font-weight: 800; | |
| letter-spacing: 2px; | |
| line-height: 1; | |
| margin-bottom: 0; | |
| text-transform: uppercase; | |
| } | |
| .site-title a, | |
| .site-title a:hover { | |
| color: #fff !important; | |
| } | |
| .header-image .title-area, | |
| .header-image .site-header.dark .title-area { | |
| padding: 0; | |
| } | |
| .header-image .site-title > a { | |
| background-size: contain !important; | |
| display: block; | |
| height: 76px; | |
| text-indent: -9999px; | |
| } | |
| .header-image .dark .site-title > a { | |
| height: 56px; | |
| } |
with
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .title-area { | |
| float: left; | |
| padding: 25px 0; | |
| /*width: 360px;*/ | |
| } | |
| .site-header.dark .title-area { | |
| padding: 15px 0; | |
| } | |
| .site-title { | |
| font-size: 24px; | |
| font-weight: 800; | |
| letter-spacing: 2px; | |
| line-height: 1; | |
| margin-bottom: 0; | |
| text-transform: uppercase; | |
| } | |
| .site-title a, | |
| .site-title a:hover { | |
| color: #fff !important; | |
| } | |
| /*.header-image .title-area, | |
| .header-image .site-header.dark .title-area { | |
| padding: 0; | |
| }*/ | |
| .inner.header-image .title-area { | |
| padding: 0; | |
| } | |
| .header-image .site-title > a { | |
| /*background-size: contain !important;*/ | |
| /*display: block;*/ | |
| /*height: 76px;*/ | |
| /*text-indent: -9999px;*/ | |
| } | |
| .site-title a img { | |
| vertical-align: top; | |
| width: 360px; | |
| height: 76px; | |
| -webkit-transition: all 0.2s ease-in-out; | |
| -moz-transition: all 0.2s ease-in-out; | |
| -ms-transition: all 0.2s ease-in-out; | |
| -o-transition: all 0.2s ease-in-out; | |
| transition: all 0.2s ease-in-out; | |
| } | |
| /*.header-image .dark .site-title > a { | |
| height: 56px; | |
| }*/ | |
| .header-image .dark .site-title > a img { | |
| width: 265px; | |
| height: 56px; | |
| } | |
| .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
Upload your logo image at Appearance > Header.
References:
https://sridharkatakam.com/inline-logo-in-genesis/
https://sridharkatakam.com/how-to-remove-site-description-tagline-in-genesis/
https://sridharkatakam.com/add-inner-body-class-inner-pages-wordpress/
Question for you: How to hide the site title on the front page and just have the logo on the other pages?
Thank you!
This will hide the site title only on the frontpage.
.front-page .site-description, .front-page .site-title {
margin-bottom: 0;
display: none;
}
-Scot
Hello, How can i change the font size of Titles in Altitude pro? They are larger. Thanks