WordPress 4.5 added a new theme support feature for using a custom logo which allows a logo to be uploaded and used via the Customizer, this guide take you through using it with Genesis using the Sample Theme for an example.
The terminology of custom_logo will make more sense to end users than custom_header
To add the logo support to your theme add the add_theme_support function in your theme’s function.php add in your size dimensions, I leave flex values on so I can skip cropping.
| <?php | |
| add_theme_support( 'custom-logo', array( | |
| 'height' => 240, // set to your dimensions | |
| 'width' => 240, | |
| 'flex-height' => true, | |
| 'flex-width' => true, | |
| ) ); |
Now you can see the meta box in the Customizer under the site identity panel.
Displaying the logo in the front end of the site
To output the logo we need to check that it exists and use it if it does, if it doesn’t then the fallback is to use the site title and tag line. The logo is checked with the has_custom_logo check. I am using the genesis_seo_title filter to add in the logo.
| <?php | |
| /** | |
| * Add an image inline in the site title element for the main logo | |
| * | |
| * The custom logo is then added via the Customiser | |
| * | |
| * @param string $title All the mark up title. | |
| * @param string $inside Mark up inside the title. | |
| * @param string $wrap Mark up on the title. | |
| * @author @_AlphaBlossom | |
| * @author @_neilgee | |
| */ | |
| function genesischild_custom_logo( $title, $inside, $wrap ) { | |
| // Check to see if the Custom Logo function exists and set what goes inside the wrapping tags. | |
| if ( function_exists( 'has_custom_logo' ) && has_custom_logo() ) : | |
| $logo = get_custom_logo(); | |
| else : | |
| $logo = get_bloginfo( 'name' ); | |
| endif; | |
| // Use this wrap if no custom logo - wrap around the site name | |
| $inside = sprintf( '<a href="%s" title="%s">%s</a>', trailingslashit( home_url() ), esc_attr( get_bloginfo( 'name' ) ), $logo ); | |
| // Determine which wrapping tags to use - changed is_home to is_front_page to fix Genesis bug. | |
| $wrap = is_front_page() && 'title' === genesis_get_seo_option( 'home_h1_on' ) ? 'h1' : 'p'; | |
| // A little fallback, in case an SEO plugin is active - changed is_home to is_front_page to fix Genesis bug. | |
| $wrap = is_front_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; | |
| $title = sprintf( '<%1$s %2$s>%3$s</%1$s>', $wrap, genesis_attr( 'site-title' ), $inside ); | |
| return $title; | |
| } | |
| add_filter( 'genesis_seo_title','genesischild_custom_logo', 10, 3 ); | |
| /** | |
| * Add class for screen readers to site description. | |
| * This will keep the site description mark up but will not have any visual presence on the page | |
| * This runs if their is a header image set in the Customiser. | |
| * | |
| * @param string $attributes Add screen reader class if custom logo is set. | |
| * | |
| * @author @_neilgee | |
| */ | |
| function genesischild_add_site_description_class( $attributes ) { | |
| if ( function_exists( 'has_custom_logo' ) && has_custom_logo() ) { | |
| $attributes['class'] .= ' screen-reader-text'; | |
| return $attributes; | |
| } | |
| else { | |
| return $attributes; | |
| } | |
| } | |
| add_filter( 'genesis_attr_site-description', 'genesischild_add_site_description_class' ); |
In the 2nd function in this code block the site description is hidden if the custom logo exists, this also uses the has_custom_logo and if true adds the .screen-reader-text class to hide it.
Also worth noting is that a .custom-logo class is given to the img and a .custom-logo-link to the containing link tag.
You also can output the custom_logo() wherever you need to.
Removing the Default Genesis Title/Logo Meta Box
You can remove the default Genesis title/logo meta box in the theme settings and Customizer control under Site Identity
| <?php | |
| /* Removing custom title/logo metabox from Genesis theme options page. | |
| * See http://www.billerickson.net/code/remove-metaboxes-from-genesis-theme-settings/ | |
| * Updated to use $_genesis_admin_settings instead of legacy variable in Bill's example. | |
| */ | |
| add_action( 'genesis_theme_settings_metaboxes', 'be_remove_metaboxes' ); | |
| function be_remove_metaboxes( $_genesis_admin_settings ) { | |
| remove_meta_box( 'genesis-theme-settings-header', $_genesis_admin_settings, 'main' ); | |
| } | |
| /* | |
| * Removing custom title/logo metabox from Genesis customizer | |
| * See https://developer.wordpress.org/themes/advanced-topics/customizer-api/ | |
| */ | |
| add_action( 'customize_register', 'es_theme_customize_register', 99 ); // Priority had to be last for this to work | |
| function es_theme_customize_register( $wp_customize ) { | |
| $wp_customize->remove_control('blog_title'); | |
| } |
By adding the above in your functions.php
Great starting point Neil! I tweaked this for my needs, but found one important bug in yours. Calling `the_custom_logo()` outputs the logo. You want to use `get_custom_logo()` but note that function creates the link for you.
Cool thanks Mike – updated post
Hello, do you know how to do the same on Genesis Beautiful theme? I want to change dimensions of the logo but the header seems not to follow.
Thank for this tutorial. Hopefully, it will be default functions in future Genesis 🙂
Probably, Genesis 3.0
Thanks again Neil for this useful tutorial. I tried it and realized that the Image logo / Dynamic text option was still present in the Customizer (in the Site Identity panel). It’s not a great experience to have a non-working control in the Customizer so I went searching for a solution. Found this bit of code that solved it:
https://gist.github.com/evanwebdesign/1b49f132d0ae40fa1b62
Very good point – will update the post accordingly
Thank you for this post! I was having such a hard time finding information on using custom-logo with genesis since the feature is so new. Worked perfectly in my child-theme.