Essence Pro Add Custom Logo Size

This tutorial shows you how to add a custom logo to the Essence Pro child theme by StudioPress.

There’s no need to modify the CSS as this solution uses the Site Identity > Logo setting field in the customizer and not the custom header/header image field normally used for the site header because its already in use for the hero background image.

There’s only 1 step :

Lines 185 & 186 in the Essence Pro themes functions.php file should match the dimensions of your logo :

// Adds support for custom logo.
add_theme_support(
    'custom-logo', array(
        'flex-height'     => true,
        'flex-width'      => true,
        'header-selector' => '.site-title a',
        'header-text'     => false,
        'height'          => 80,
        'width'           => 300,
    )
);

In this case we use a image 300px width by 80px height.

#Demo Video

Here’s how the image is added using the customize link :

This tutorial has been published based on the following question from a logged in user :

Hey Brad,

I just bought access to your membership in hopes of a tutorial on how to modify the size of the Essence Pro genesis child theme’s custom logo size.

I’ve been reading your tutorials on logo resizing for other child themes and successfully changed the functions:

// Adds support for custom logo.
add_theme_support(
    'custom-logo', array(
        'flex-height'     => true,
        'flex-width'      => true,
        'header-selector' => '.site-title a',
        'header-text'     => false,
        'height'          => 80,
        'width'           => 300,
    )
);

But when it comes to the css, I can’t seem to find the equivalent of :

.header-image .site-title > a {

area or what exactly to adjust the title-area too either.

In my case I want to make the custom logo image smaller as I feel the default 600 by 160 is a bit excessive. A 300 by 80 seems to flow nicer with the design, especially if it can be centered when in desktop but floated left when resized to smaller screens.

Would this be at all possible?

#Other Options

You can also use this solution assuming you want to display a image 300px width by 80px height :

1. Set the width & height to double the size you want to display on lines 185 & 186 in the Essence Pro themes functions.php file like this :

// Adds support for custom logo.
add_theme_support(
    'custom-logo', array(
        'flex-height'     => true,
        'flex-width'      => true,
        'header-selector' => '.site-title a',
        'header-text'     => false,
        'height'          => 160,
        'width'           => 600,
    )
);

1. Modify the CSS on line 1494 of style.css like this :

.no-off-screen-menu.wp-custom-logo .custom-logo {
    float: left;
    width: 50%;
}

Change the value for the width property to meet your own needs.