How to Add Custom Logo to Genesis Child Theme
2
Add Custom Logo to Genesis Child Theme

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 to Genesis Child Theme

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

PHP
1
2
3
4
5
6
7
8
// 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.

Custom Logo

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.

PHP
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 showing.

Display Custom Logo

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

PHP
1
2
3
4
5
6
7
8
/* 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.

Image-logo

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

PHP
1
2
3
4
5
6
7
8
/*
* 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 a few CSS lines. If you want you could add them to your style.css

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/*
* 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;
}

Here is the full snippet of adding the custom logo to Genesis child theme:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 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 );
/* 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 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');
}

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

Related Posts

How to Store XML Data to PHP Variable

Starting with WordPress Metafields

How to Use HTML Form [PHP]

11 Genesis Framework Hacks for Beginner
Editorial Staff
 

Editorial Staff is an in-house team of native WordPress developer and industry columnists.

  • Kamal kumar says:
    February 9, 2019 at 7:51 pm

    Very mush helpful, thanks for this awesome post

    Reply
  • venkatesh kumar says:
    April 5, 2019 at 3:18 pm

    Hi,
    The article is very much helpful. I was struck while installing the genesis theme. thanks for the help and adding the value.

    Reply
    • >