How To Add Custom Logo Theme Support

How To Add Custom Logo Theme Support

It is very simple but it depends on the WordPress theme which you are using. Generally, you will find a custom logo in the WordPress Customizer area. After login into your website, go to Appearance > Customize >  Site Identity > Select logo – choose your website logo after uploading the logo file.

If you are developing a custom WordPress theme then you have to add custom logo theme support to your theme to enable this option. To do that you will have to use after_setup_theme action hooks in your theme function.php file. check the basic code of its usage-

<?php
function yourtheme_custom_logo() {
add_theme_support( 'custom-logo' );
}
add_action( 'after_setup_theme' , 'yourtheme_custom_logo' );
?>

This is straightforward code. Here after_setup_theme action hook use with a function called yourtheme_custom_logo . This function uses the add_theme_support function to enable support for the custom logo. This enables WordPress custom logo functionality in the customizer (Appearance > Customize > Site identity).

Display Custom Logo In Your Theme:

<nav class="navbar"> 
<?php echo get_custom_logo(); ?>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav">
<!-- Your menu goes here -->
</ul>
</div>
</nav>

Here echo the return value of get_custom_logo generate following html code:-

<a href="http://example.com/" class="custom-logo-link" rel="home">
<img
width="572"
height="179"
src="http://example.com/wp-content/uploads/2019/10/logo-image.jpg"
class="custom-logo"
alt="sujoyroy"
srcset="http://example.com/wp-content/uploads/2019/10/logo-image.jpg 572w, http://example.com/wp-content/uploads/2019/10/logo-image.jpg-300x94.jpg 300w" 
sizes="(max-width: 572px) 100vw, 572px"
/>
</a>  

Adding little CSS make your logo comfortable with your WordPress theme.

How To Add More Control Over Your Custom Logo

<?php
function yourtheme_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', 'yourtheme_custom_logo_setup' );
?>

height: Expected logo height in pixels. A custom logo can also use built-in image sizes, such as thumbnail, or register a custom size using add_image_size().
width: Expected logo width in pixels. A custom logo can also use built-in image sizes, such as thumbnail, or register a custom size using add_image_size().
flex-height: Whether to allow for a flexible height.
flex-width: Whether to allow for a flexible width.
header-text: Classes(s) of elements to hide. It can pass an array of class names here for all elements constituting header text that could be replaced by a logo.
unlink-homepage-logo: If the unlink-homepage-logo parameter is set to true, logo images inserted using get_custom_logo() or the_custom_logo() will no longer link to the homepage when visitors are on that page. In an effort to maintain the styling given to the linked image, the unlinked logo image is inside a span tag with the same “custom-logo-link” class.

Source: WordPress Documentation

Control More To Display Custom Logo

You can play around with this setting to display your theme logo more specific. Here is the output of custom logo

<?php
if ( has_custom_logo() ) {

$logo = wp_get_attachment_image_src( get_theme_mod( 'custom_logo' ) , 'full' );

echo '<a class="custom-logo-link" href="' . get_site_url() . '" >';
echo '<img class="custom-logo" src="' . esc_url( $logo[0] ) . '" width="' . $logo[1] . '" height="' . $logo[2] . '" alt="' . get_bloginfo( 'name' ) . '">';
echo "</a>";

} else {

echo '<h1>';
echo '<a href="' . get_site_url() . '">' . get_bloginfo( 'name' ) . '</a>';
echo '</h1>';

}
?>

Here the conditionally display the custom logo – if the custom logo presents then it displays the logo of the website, if not present it only display the site title of the website. The function get_site_url display the website homepage or frontpage URL and get_bloginfo(‘name’) display site title of the website. You can use get_bloginfo(‘description’) which display the website short description if you want to display it.

It is not very much an arduous task to set the client logo and manipulate the output.

• Wordpress Development
• May 27, 2021
• Sujoy Roy