How to use Wordpress custom logo Api with code example

WordPress is gradually taking the theme customization system into core system. So, WordPress is coming with new API after regular interval, such as, Site background, favicon, etc.

Custom logo API has been released in version 4.5. So, we do not have to create new logo customization options during theme development. With this new API, we can easily create logo change options.

Using this option, the user can easily change the logo of the website from the Theme Customizers.

If you are a developer, you can easily add this API to your developed theme. In this article, we will discuss the details of the use of the logo change API today.

 

Logo change with Logo API

At first we will see how this API works and how users change the logo with this API. Since it is the customizer API, the user has to go to the theme customizer (Appearance > Customize) to change the logo or click on Customize from the Admin page when visiting the website.

How to use Wordpress custom logo Api with code example - Customize

 

Go to Customizer and go to the "Site Identity" section, click on the Select Logo, upload the logo or select an already-uploaded logo. The logo of the website will be updated after saving.

How to use Wordpress custom logo Api with code example - Select Logo

How to use Wordpress custom logo Api with code example - Select Logo

How to use Wordpress custom logo Api with code example - Select Logo

 

 

How to declare logo API in theme?

Now, I will discuss the rules of using the logo API for the theme developers. The logo API is very easy to support. To use the logo API, you must declare the function below in your theme's function.

 

function mycustomtheme_setup() {
    add_theme_support('custom-logo');
}

add_action('after_setup_theme', 'mycustomtheme_setup');

 

If you add this function to your theme, then the logo option on the theme customization page will be visible. This function has another great parameter. And that is the logo size. Using the following parameters, you can easily resize the uploaded logo.

 

function mycustomtheme_setup() {
    add_image_size('header-logo', 200, 120);
    add_theme_support('custom-logo', array(
        'size' => 'header-logo'
    ));
}

add_action('after_setup_theme', 'mycustomtheme_setup');

 

When the custom logo is declared with the above function, the logo will be resized at 200 × 120 after uploading. But if the uploaded logo is smaller than the declaration size, then it will not be resized.

 

How to show the logo in the theme?

To show the custom logo in the theme, you will need to use the following code.

the_custom_logo()

 

Where to use this code, the custom logo will appear in HTML format. And if you want to get the logo image URL only then use the code below.

get_custom_logo()

 

You can use this function if you want to check whether the custom logo is available

 

has_custom_logo()

 

For example, a real-world working example code is shown below:

 

if (has_custom_logo()) {
    echo '<img src="'.get_custom_logo().'">';
} else {
    echo get_bloginfo(name);
}

 

We can use this code to show any custom logo of the site. If you want to show it in different places, then you should create a function and call the function where necessary.

Using Custom Logo API, you can easily add custom logo options to your theme. However, one thing to remember here is that this feature only works in WordPress 4.5 and above versions.

Other articles of this category:

I Recommend RamNode VPS Hosting

high performance ssd vps