How to Add Custom Logo to Genesis Child Theme

There are a bunch of tutorials that would work for you to add the custom logo to Genesis child theme. However, for my the last project, I had to write 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 a 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' ),
) );

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 );

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

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

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
add_action( 'genesis_theme_settings_metaboxes', 'be_remove_metaboxes' );

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:

function es_theme_customize_register( $wp_customize ) {
    $wp_customize->remove_control('blog_title');
}

// Remove title/logo metabox from Genesis customizer
add_action( 'customize_register', 'es_theme_customize_register', 99 );

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

.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;
}

Here is the full snippet of adding the custom logo to Genesis 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' ),
) );

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

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
add_action( 'genesis_theme_settings_metaboxes', 'be_remove_metaboxes' );

function es_theme_customize_register( $wp_customize ) {
 
    $wp_customize->remove_control('blog_title');
 
}

//Remove title/logo metabox from Genesis customizer
add_action( 'customize_register', 'es_theme_customize_register', 99 );

Leave feedback if you face there any issue. Thank you all. Happy coding!

You will love the following tutorials:

• How to Add Nofollow Tag to a Certain Domain
• How to Add Visitor Counter to Website in PHP
• How to Combine a Background Image and CSS3 Gradient on the Same Element
• How to Popup Genesis eNews Extended Opt-in Form
• 11 Genesis Framework Hacks for Beginner
• How to Use HTML Form [PHP]
• Starting with WordPress Metafields
• How to Store XML Data to PHP Variable
• How to Create Awesome Input Range Slider
• How to Make HTML Form Work and Send Mail