How to convert a custom HTML logo to WordPress dynamic logo

How to add a Custom HTML theme Logo in WordPress theme

Step 1: Open your WordPress function.php file in your theme folder and locate this line:

add_theme_support( 'custom-logo' );

Replace it with this:

function themename_custom_logo_setup() {
add_theme_support( 'custom-logo', array(
	'height'      => 100,
	'width'       => 400,
	'flex-height' => true,
	'flex-width'  => true,
	'header-text' => array( 'site-title', 'site-description' ),
) );
}
add_action( 'after_setup_theme', 'themename_custom_logo_setup' );

This gives the logo a set width and height, which you can change, it also states that the width and height can be flexible based on the actual image size so that you don’t get a warped image.

Step 2: Open your header file and put below code.

<?php

$custom_logo_id = get_theme_mod( 'custom_logo' );
$image = wp_get_attachment_image_src( $custom_logo_id , 'full' );
echo $image[0];

?>

But you need to change it a little.

<?php 
   $custom_logo_id = get_theme_mod( 'custom_logo' );
   $image = wp_get_attachment_image_src( $custom_logo_id , 'full' );
      ?>
<img src="<?php echo $image[0]; ?>" alt="">