WordPress: Add custom logo support to your theme.
Tags: wordpress, webdev, php, tutorial
Published: 2019-10-20 17:57:37

---
title: WordPress: Add custom logo support to your theme.
published: true
description: A tutorial to show you how to add support for the custom logo option in the WordPress customizer to your theme.
canonical_url: https://since1979.dev/wordpress-add-custom-logo-support-to-your-theme/
cover_image: https://since1979.dev/wp-content/uploads/2019/10/wordpress-adding-a-custom-logo-to-your-themes-1000x450.jpg
tags: wordpress, webdev, php, tutorial
---

[Originally posted on my website on October 20th 2019](https://since1979.dev/wordpress-add-custom-logo-support-to-your-theme/)

### 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.

```php
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](https://developer.wordpress.org/reference/hooks/after_setup_theme/)* action with a function called *config_custom_logo*. This function uses the *[add_theme_support](https://developer.wordpress.org/reference/functions/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.

![](https://since1979.dev/wp-content/uploads/2019/10/wordpress-customizer-logo-uploader.png)

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.

![](https://since1979.dev/wp-content/uploads/2019/10/wordpress-customizer-logo-cropper.png)

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.

![](https://since1979.dev/wp-content/uploads/2019/10/wordpress-customizer-with-selected-logo.png)

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.

```php
<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](https://developer.wordpress.org/reference/functions/get_custom_logo/)* function.

The function call above will generate the following output in you Html code.

```html
<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.

```css
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.

![](https://since1979.dev/wp-content/uploads/2019/10/layout-with-custom-logo.png)

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.

```php
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](https://developer.wordpress.org/themes/functionality/custom-logo/))

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](https://developer.wordpress.org/reference/functions/add_image_size/)* function, by passing it's name for the width and height properties like shown below.

```php
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.

```php
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](https://developer.wordpress.org/reference/functions/get_theme_mod/)* function to get the ID of that logo image, we then pass that to the *[wp_get_attachement_src](https://developer.wordpress.org/reference/functions/wp_get_attachment_image_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.

```php
<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.

```html
<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**](https://twitter.com/Vanaf1979) **or on Dev.to** [**@Vanaf1979**](https://dev.to/vanaf1979) **to be notified about new articles, and other WordPress development related resources.**

**Thanks for reading**