Adding Custom Site Logo Support In WordPress

WordPress has been constantly updated day by day with more bug fixes as well as with the arrival of new features on each of the version updates of WordPress. One of the version updates of WordPress, ie, from the WordPress version 4.5, it has new update released as to support the Custom Logo feature, which can be added in your site, just like the Header Image, which is already available in WordPress in its very earlier version. Also, for the theme developers displaying the site logo for their site, now requires the custom site logo feature to be included in it, ie, theme added function to add the site logo is not feasible and accepted now, since this feature is in WordPress core now. So, here we will discuss about the custom site logo support in WordPress from version 4.5 and above.

For adding the custom site logo support in WordPress 4.5 and above, first of all what you have to do is, you need to add the theme support code for it in the functions.php file of your theme, which needs to be hooked under the after_theme_setup function. The code to be written in this file is below:

add_theme_support('custom-logo', array(
    'height' => 100,
    'width' => 300,
    'flex-width' => true,
    'flex-height' => true,
));

Here, in the above code, what we have done is we have added the theme support for the WordPress custom site logo by adding the code add_theme_support('custom-logo'), and we have passed an array of argument there, in this function. The passed function or array inside that function will perform these work:

1. height: It will provide the height for the site logo feature to be cropped to.
2. width: It will provide the width for the site logo feature to be cropped to.
3. flex-height: If provided, then you can change the image size to be cropped height wise.
4. flex-width: If provided, then you can change the image size to be cropped width wise.

If you are getting confused about how the final code for this would look like, then, we will clear your confusion on this by providing the required code to be added in the functions.php file, which is below:

function theme_slug_setup() {
    add_theme_support('custom-logo', array(
        'height' => 100,
        'width' => 300,
        'flex-width' => true,
        'flex-height' => true,
    ));
}
add_action('after_setup_theme', 'theme_slug_setup');

Now, since the WordPress custom site logo support feature is added, if you have added the above code in the mentioned file in your theme, now the only remaining part is, we need to display it in the front-end. Hence, for this, you need to open your header.php file and then add this below given code there, where ever appropriate to display the WordPress site logo for your theme:

<?php if (function_exists('the_custom_logo')) {
    the_custom_logo();
} ?>

Now, the custom site logo will be displayed in your site if you have already performed the mentioned steps above properly in your site. The respective image for this feature is shown below:

Now, after you have learnt and followed from the above steps, we can assume that you can now add the custom site logo support for your site more easily than before.