WordPress theme Custom logo: Display & Add Custom logo Support

Custom Logo is more useful functionality as compared to Custom Header Since without all shown on your Site name is the name of your Website in Text format.

Adding Custom Logo functionality allows you to add a Website Logo to your website.

Adding a Custom Logo feature to your theme is achieved in two simple steps:

1. First Add Custom Logo support in function.php file of your theme.
2. Now edit your header.php template file to Display Logo in approtiate way and on approtiate way.

Add Custom Logo Support in Theme

To add custom logo functionality to our theme we add the following line in our functions.php file:

add_theme_support('custom-logo');

Adding this line of code is enough, but it is not the right way.

If we are going to add the Custom logo to our WordPress theme, we also might want to configure the available options for the custom logos.

Here is how we can achieve this:

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' => true, 
    );
 
    add_theme_support( 'custom-logo', $defaults );
}
 
add_action( 'after_setup_theme', 'themename_custom_logo_setup' );

Display Custom Logo in Theme

Once we add a custom logo feature to our theme we are ready for the next step.

Which is to customize and display the Custom Logo.

The custom logo is displayed by using the function the_custom_logo().

We can add this code directly in our header.php but if we want to maintain backward compatibility with the older version here is the code:

if (function_exists('the_custom_logo')){
	the_custom_logo();
}

In case you want to get the current logo URL (OR own Markup) we can use the following code:

$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>';
}

Important Logo Template Tags

To Display a Custom Logo on the front end of our Website we use the following template tags:

• get_custom_logo(): Returns Markup for the a custom logo.
• the_custom_logo(): Display markup for a custom logo.
• has_custom_logo(): Returns a boolean true/false, whether a cutom logo is set or not.