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.

View the code on Gist.

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.

View the code on Gist.

 

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

View the code on Gist.

By adding the above in your functions.php

Ref & Ref & Ref

Share:

Leave a Reply