Logo on left and site title next to it in Monochrome Pro

Update on April 13, 2020: Follow this tutorial instead.

In the comments section of Site Title – Image Logo in Genesis tutorial a user asked:

Hi Sridhar,

I am tying to do this with the Monochrome Pro theme but with the logo on left and site title next to it. Do you have a tutorial for this?

Thanks!

In this tutorial, we shall replace the custom header with theme logo and use genesis_seo_title filter to customize the markup of the .tilte-area in Monochrome Pro to have logo and site title text linking to the site URL in the header.

Tested in Monochrome Pro 1.0.

Step 1

Edit Monochrome Pro's functions.php.

a) Replace

// Add support for custom header.
add_theme_support( 'custom-header', array(
    'width'           => 320,
    'height'          => 120,
    'header-selector' => '.site-title a',
    'header-text'     => false,
    'flex-height'     => true,
    'flex-width'     => true,
) );

with

// Add support for custom logo.
add_theme_support( 'custom-logo', array(
    'width'       => 120,
    'height'      => 120,
    'flex-width' => true,
    'flex-height' => true,
) );

b) add