How to Enable Support for Custom Logos in WordPress

A logo can be an extremely important part of a website’s branding. Just think back to the number of famous sites you visit every day and how their logos are instantly recognizable. Creating something like that for your own WordPress blog starts you down the path of marketing your brand so that visitors are able to associate a visual image with the kind of content on your blog.

From a technical point of view, this is not the same thing as a site icon – though ideally, they would both be the same image. A site icon appears as the little picture in the tab in which your site is open. Users are able to quickly identify the site based on the site icon. A logo however is displayed in WordPress in a more prominent form as part of the webpage itself. Most of the time it’s displayed at the top of the page next to or instead of the name of the site.

Custom Logos in WordPress 4.5

WordPress has a concept of the “site logo” as a separate entity compared to the rest of the images on the blog. This wasn’t the case before version 4.5, when WordPress finally introduced a “custom logo” functionality that allowed site owners to specifically set aside a logo image. Before this, users could take advantage of the functionality available in Jetpack which allowed the same logo to even be shared across multiple themes.

But with version 4.5 early in the year 2016, WordPress introduced a new logo functionality that was easily accessible via the standard customization module for theme editing. Initially, only the default themes shipped with the latest version of WordPress had support for logos. But the ability to extend theme capability for supporting logos was provided to every WordPress developer via a few easy inbuilt functions.

In this article we’re going to learn all about custom logos, how to make sure that your theme supports them, how to display and resize them, as well as the best formats.

Accessing your Logos

You can access the custom logo section by selecting the “Customize” menu option under “Appearance” on the left-hand side of the WordPress administration dashboard. Over here, you’ll be presented with a large number of theme options, one of which will be labeled “Site Identity”. Clicking this will bring up various elements associated with major aspects of your site such as the title and the tagline.

If you don’t see a dedicated “Logo” area here, it means that your site doesn’t support custom logos by default.

Don’t be disheartened! It just means that we need to manually enable support for them. In the meantime, here’s a little Easter egg – if you want to quickly change an already existing site logo, then once you enter the “Customization” screen, click your existing logo while holding down the “Shift” key. When you do this, you’ll automatically be taken to the relevant section and the button labeled “Change Logo” will be magically selected for you!

Now that we’ve seen where our logos should be, here’s how to enable support for custom logos if your theme doesn’t already support them.

Enabling Support for Custom Logos

To get your theme ready for custom logos, open up your functions.php file and place the following before the closing ?> PHP tag:

add_theme_support( 'custom-logo');

These simple lines of code magically enables you to set a custom logo in the customization section of your WordPress theme in version 4.5 and above. If you don’t know how to add custom code like this to your installation, check out my earlier tutorial on the same.

Going back to the previous screen, you can now see that a new “Logo” section has been added.

Simply select the logo you want either from your computer or from an existing image on your site and you’re good to go!

The Best Format for Logos

You never know beforehand in what situation you would need to display a logo. For this reason, it’s best to have it in a large number of sizes. Even better, the ideal would be to have it in a vector based format that can shrink and expand infinitely without losing any detail.

However, even if your graphics designer manages to create a vector based image for you, WordPress doesn’t allow you to upload SVG media files by default. That’s okay, because I’ve written a tutorial on how to overcome this restriction and allow you to upload SVG media files onto WordPress.

Displaying the Logo

Now that the image has been uploaded, it’s time to display it. If your theme doesn’t automatically include the logo by default, you can display it manually by using one of the following WordPress functions:

the_custom_logo()
get_custom_logo()

The second function “get_custom_logo” will return the HTML markup instead of actually displaying the logo. So if you’re thinking of appending it to another piece of content, you might want to use that one instead of the first.

However, you might run into problems with improper sizing. Take a look at the screenshot below for example where I try and output the logo before my blog title:

It’s huge! That’s because I haven’t specified a size for my logo. Not to worry – you can do this in two ways. Either via CSS, or by specifying the logo size when you first declare support for the custom logo in the first place.

Sizing the Logo

When you first declare support for the logo via the “add_theme_support” function, you can go a step further and specify the dimensions as well like this:

add_theme_support( 'custom-logo', array(
   'height'      => 175,
   'width'       => 400,
) );

Using this code instead of the simple one-liner we first saw, will make sure that your logo is sized appropriately whenever you call the functions for displaying it. The earlier custom logo implementation on WordPress allowed you to use “add_image_size” to specify a custom size, but that method is no longer supported. Now you can simply set the height and width separately.

The second method is of course via CSS. And this is where the format of the image used for the logo comes into play. Vector images are known for using up very little space. The logo used for my test blog for example was a mere 56 KB! Moreover, that size doesn’t change no matter how much it expands or contracts. So if you’re using an SVG file for your logo as suggested earlier, manipulating the size via CSS is an easier and more flexible option.

For example, I use the following CSS to display my logo before my blog name in the header:

#title-area img.custom-logo {
    width: 100px;
    float: left;
}

h1#title {
    padding-top: 25px;
}

This leads to the following output:

Since I’m going to be using CSS to control the placement anyway, I might as well use that opportunity to set the size. On the other hand, if your logo is a regular non-vector image, it’s preferable to set the size when you first declare support for your custom logo.

And that’s how you create and display custom logos in WordPress. Using the inbuilt functionality via the customization screen for themes, you can easily leverage the inbuilt support for this feature instead of manually placing images by uploading them and using the URL to display your logos.