WordPress: Add custom logo support to your theme.

Originally posted on my website on October 20th 2019

Introduction

Now I don't want to start of negative but even though I'm not the biggest fan of the WordPress customizer and it will probably be replaced with some kind of Gutenberg implementation in the future. I'm also not a fan of changing client logo's every time they or a designer decides it needs an update. So we'd better implement this option into the the WordPress admin and be done with it! 🙂

Enable the custom logo customizer

The customizer has this option to upload custom logo's out of the box, but we do have to enable it before it shows up. To do so we can add the code snippet below to our theme's functions.php file.

function config_custom_logo() {

    add_theme_support( 'custom-logo' );

}

add_action( 'after_setup_theme' , 'config_custom_logo' );

This code is pretty straightforward. All we do is hook into the after_setup_theme action with a function called config_custom_logo. This function uses the add_theme_support function to enable support for the custom logo.

This enables the custom logo feature on the customizer (Appearance > Customize > Site identity) like shown below.

When you click the "Select logo" button you can choose an image from your gallery or upload a new image. When you select an image you are presented with a crop tool for the logo like shown below.

Here you can select a region of the image and click "Crop image". You will then get a preview of the logo in the Customizer sidebar.

If you are happy with the logo you can click the "Publish" button at the top of the customizer sidebar.

Now for some reason the customizer doesn't update your logo in the site preview straight away. I haven't figured out how to fix this yet, but when i do I'll update this article. If you know of an answer, please share!

Adding the logo to your theme.

Adding the logo to your theme is also pretty simple. Check out the example header code shown below.

<section class="header">

    <div class="logo">

        <?php echo get_custom_logo(); ?>

    </div>

    <nav class="menu">

        <!-- Your menu goes here -->

    </nav>

</section>

Here we have some simple markup for a website header. The only thing you have to do to show the logo is to echo the return value from the get_custom_logo function.

The function call above will generate the following output in you 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="Skalet"
    srcset="http://example.com/wp-content/uploads/2019/10/logo-image.jpg 572w, http://skalet.test/wp-content/uploads/2019/10/logo-image.jpg-300x94.jpg 300w" 
    sizes="(max-width: 572px) 100vw, 572px"
  />
</a> 

All we have to do next is add a little Css to make the logo behave in the page layout. Add the Css code below to your style.css file.

header {
  height: 70px;
  margin: 0px 0px 50px 0px;
}

header .logo {
  height: 100%;
}

.custom-logo-link {
  display: inline-block;
  height: 100%;
}

.custom-logo-link .custom-logo {
  display: block;
  max-height: 100%;
  width: auto;
}

With this Css we give our header a fixed height of 70px. And we make the logo image take 100% of the headers height, with a proportional width.

Of course this Css is very basic and you will have to customize it to meet the needs of you specific theme. But this will give you a nice starting point.

Adding more control over your custom logo.

As you can see implementing a custom logo is pretty simple. But of course we want some more control over the logo. So first of we can add some configurations for the way the logo gets resized and cropped by the user.

Change the config_custom_logo function to reflect the changes below.

function config_custom_logo() {

    $defaults = array(
        'height' => 200,
        'width' => 200,
        'flex-height' => true,
        'flex-width' => true,
        'header-text' => array(),
    );

    add_theme_support( 'custom-logo' , $defaults );

}

add_action( 'after_setup_theme' , 'config_custom_logo' );

Above we add an additional defaults array to the add_theme_support function with the following options.

• Height: The height we want our logo to be resized to.
• Width: The width we want our logo to be resized to.
• Flex-height: Can a user change the height of the crop area?
• Flex-width: Can a user change the width of the crop area?
• Header-text: Classes of elements to hide. (Docs)

You will have to play around with these settings to make them fit your theme's specific logo area.

If you want you can also pass an custom image size, created with the add_image_size function, by passing it's name for the width and height properties like shown below.

function config_custom_logo() {

    // Custom image size created somewhere in your code.
    add_image_size( 'custom-image-size' , 200 , 200 , true );

    $defaults = array(
        'height' => 'custom-image-size',
        'width' => 'custom-image-size',
        'flex-height' => true,
        'flex-width' => true,
        'header-text' => array(  ),
    );

    add_theme_support( 'custom-logo' , $defaults );

}

add_action( 'after_setup_theme' , 'config_custom_logo' );

Do note that adding a custom size with the add_image_size function makes WordPress create a copy at that size of every image uploaded, not just your logo. So if your logo has a very specific size don't use this option because it will create a lot of unused images on disk.

Controlling the output for your custom logo

To customize the way our logo gets added to the page we can create a custom function to replace the get_custom_logo function. Copy the code below to your functions.php file.

function theme_get_custom_logo() {

    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 we check if there is a custom logo uploaded in the admin. if there is we use the get_theme_mod function to get the ID of that logo image, we then pass that to the wp_get_attachement_src function to get that image at a certain size, in this case the 'full' image size.

After that we just echo out some Html markup for the image with a link.

If there is no logo image chosen we echo an H3 tag with a link and the name of the blog/site.

Now that we have this custom function we can use it in our theme like shown below.

<section class="header">

    <div class="logo">

        <?php echo theme_get_custom_logo(); ?>

    </div>

    <nav class="menu">

        <!-- Your menu goes here -->

    </nav>

</section>

Here we replaced the get_custom_logo function with our custom theme_get_custom_logo function.

Our new function will output the Html code like shown below.

<a class="custom-logo-link" href="http://example.com" >
  <img
    class="custom-logo"
    src="http://example.com/wp-content/uploads/2019/10/logo-image.jpg"
    width="572"
    height="572"
    alt="site name"
  />
</a>

Conclusion

As you can see it's not very hard to add support for custom theme logo's, and manipulate the output. So now we are done with changing client logo's 😉

Follow me on twitter @Vanaf1979 or on Dev.to @Vanaf1979 to be notified about new articles, and other WordPress development related resources.

Thanks for reading