When creating a new theme in WordPress, a custom WordPress logo configuration via functions.php is required for the logo to add to the page.
There is an area where you can add a logo in the Appearance > Customize > Site Identity tab on the panel. If you do not activate this field via functions.php in a newly created WordPress theme, the logo adding area will not appear in the “Site Identity” tab.
WordPress customization screen not configured via functions.php
When you copy and paste the code below into the functions.php file, the logo insertion area in the “Site Identity” tab becomes active.
add_theme_support( 'custom-logo' );
The code above triggers the custom logo, but with the code structure below, you can change some parameters of the add_theme_support('custom-logo')
function while adding the custom logo. The code must be included in the functions.php file.
function themename_custom_logo_setup() {
$defaults = array(
'height' => 100,
'width' => 400,
'flex-height' => true,
'flex-width' => true,
'header-text' => array( 'site-title', 'site-description' ),
'unlink-homepage-logo' => false,
);
add_theme_support( 'custom-logo', $defaults );
}
add_action( 'after_setup_theme', 'themename_custom_logo_setup' );
Use the code below to show the logo. The code usually uses in the header.php file, but this depends on the developer’s preference.
the_custom_logo();
Only the_custom_logo()
code can show the logo on the page, but WordPress recommends using the function_exists()
code as in the format below to maintain compatibility with previous versions of WordPress. Because in old WordPress versions, the function may be used differently as a name.
if ( function_exists( 'the_custom_logo' ) ) {
the_custom_logo();
}
If you want to use a different logo URL or if you need to edit the <img>
tag yourself, you can use a structure like the example below.
$custom_logo_id = get_theme_mod( 'custom_logo' );
$logo = wp_get_attachment_image_src( $custom_logo_id , 'full' );
if ( has_custom_logo() ) {
echo '<img src="' . esc_url( $logo[0] ) . '" alt="' . get_bloginfo( 'name' ) . '">';
} else {
echo '<h1>' . get_bloginfo('name') . '</h1>';
}
Source:
https://developer.wordpress.org/themes/functionality/custom-logo/