How to Add Custom Logo to Genesis Child Theme

There are a bunch of tutorials those would work for you to add the custom logo to Genesis child theme. However, for my the last project I had to craft custom logo functions for a client site’s theme. Here is the step I added to functions.php:

Add custom logo function
Display custom logo function
Remove title/logo metabox from Genesis theme options page function
Remove title/logo metabox from Genesis customizer function

Add Custom Logo to Genesis Child Theme

So, here is the code snippet to add the custom logo to child theme:

// Add custom logo or Enable option in Customizer > Site Identity
add_theme_support( 'custom-logo', array(
	'width'       => 244,
	'height'      => 315,
	'flex-width' => true,
	'flex-height' => true,
	'header-text' => array( '.site-title', '.site-description' ),
) );

// Add custom logo or Enable option in Customizer > Site Identity

add_theme_support( 'custom-logo', array(

'width' => 244,

'height' => 315,

'flex-width' => true,

'flex-height' => true,

'header-text' => array( '.site-title', '.site-description' ),

) );

After adding this code to your theme’s functions.php, you’ll see something like the screenshot below.

We enable the option in Customizer > Site Identity

Select your logo and save it. Let’s display your logo now. Add the code below to display the custom logo that has selected already.

// Display custom logo
add_action( 'genesis_site_title', 'the_custom_logo', 0 );

1 2	// Display custom logo add_action( 'genesis_site_title', 'the_custom_logo', 0 );

You’ll see your custom logo displaying as like as the screenshot below after adding the code of displaying.

Display Custom Logo to Genesis Child Theme

Okay, we have a metabox for selecting the option for the header; “Image Logo” and “Dynamic Text” in Genesis Theme Setting page. So, I think we don’t need that metabox anymore. Let’s remove it. Add the following function to your theme’s functions.php

/* Remove 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' );
}

/* Remove 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' );

}

I think we don’t need title/logo metabox in Genesis customizer also. So, here is the screenshot with red marking area going to remove.

Here is the code snippet to remove title/logo metabox from Genesis customizer:

/*
 * Remove 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');
}

* Remove 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');

}

We have done except adding few CSS line. If you want you could add them to your style.css

/*
 * Custom Logo Sytle
 */

.wp-custom-logo .site-title {
    position: absolute!important;
    clip: rect(0,0,0,0);
    height: 0;
    width: 0;
    border: 0;
    overflow: hidden;
}

.wp-custom-logo .site-description {
    position: absolute!important;
    clip: rect(0,0,0,0);
    height: 0;
    width: 0;
    border: 0;
    overflow: hidden;
}

* Custom Logo Sytle

.wp-custom-logo .site-title {

position: absolute!important;

clip: rect(0,0,0,0);

height: 0;

width: 0;

border: 0;

overflow: hidden;

}

.wp-custom-logo .site-description {