How to add Custom Logo in WordPress

Custom Logo or Theme Logo in WordPress first introduced in WordPress 4.5 version which is very special and long awaited feature. We were unable to add logo from Customizer in previous version and need custom coding to function this custom feature. Many WordPress Theme provides a facility of uploading a logo from their cutom option panel. But from WordPress 4.5 users can upload their logo with the help of Customizer.

What is Custom Logo in WordPress ?

Custom Logo is a specific functionality that may be enabled by WordPress Theme Developer. WordPress Themes must register this Feature if the Theme author wishes to support. Custom Logo feature support functionality should be called in the theme’s functions.php file to work.

A simple way to find out whether your WordPress Theme support Custom logo is by selecting Customize option inside Appearance in your the WordPress Admin panel. And you will see Logo element inside Site Identity section.

As you can see below WordPress Theme Logo in Customizer Panel:

Adding Custom Logo in WordPress

To add a theme logo or custom logo in a WordPress,

Step 1: Login to your WordPress Dashboard.

Step 3: Go to Customize menu inside Appearance.

Step 4: Choose Site Identity section.

Step 5: Simply click on “Select Logo” button. This will Open the WordPress Media Uploader.

Step 6: You can upload an logo image from your computer or use an existing logo image from your media library. Once you select image, just click “select” button.

WordPress Theme Developer way to Theme Logo in WordPress.

Enabling theme logo in WordPress is simple and easy. You need to add the following code in your theme’s functions.php file.

add_theme_support( 'custom-logo' );

Alternatively we can specify size of the custom logo image .

add_theme_support( 'custom-logo', array( 'height' => 120, 'width' => 300, 'flex-height' => true, 'header-text' => array( 'site-title', 'site-description' ), ) );

WordPress 4.5 theme support for custom logos take only five parameters, which is added in argument array:

1. Height : The height for image should be integer value and expected logo height must be in pixels.
 Our theme can use different built-in images sizes such as(thumbnail, medium, large.) or our registered custom size.
 2. width : The width for images should be integer value and expected logo width must be in pixels.
 3. flex-hight : The flexible height for image should be boolean value. We can show the logo in vertical sidebar (like Twenty Fifteen) is a perfect example of usinf flexible height.
 4. flex-width : The flexible width for image should be boolean value. There should be a space horizontally, so that flex-width gives users more freedom to display logo.
 5. header-text : The header text should be in array, Class names of elements to hide. This parameter is only important for very few theme that do not support hiding the header text in custom headers.


Originally published at on April 8, 2016.