Using the new WordPress custom-logo theme support with Genesis

April 16, 2016| 7 comments

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,
) );
view raw custom-logo.php hosted with ❤ by GitHub

Now you can see the meta box in the Customizer under the site identity panel.

custom-logo-genesis

 

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' );
view raw output-logo.php hosted with ❤ by GitHub

 

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.

 

genesis-custom-logo

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

remove-genesis-logo-box

<?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');
}
view raw genesis-remove-custom-title-logo.php hosted with ❤ by GitHub

By adding the above in your functions.php

Ref & Ref & Ref

7 comments

  • Mike Hemberger
    8 years ago Reply

    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.

  • John Divramis
    9 years ago Reply

    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.

  • Jamaluddin Rahmat
    9 years ago Reply

    Thank for this tutorial. Hopefully, it will be default functions in future Genesis :)
    Probably, Genesis 3.0

  • David
    9 years ago Reply

    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

  • Hanna
    9 years ago Reply

    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.

Leave your comment