WordPress is gradually taking the theme customization system into the core system. So, WordPress is coming up with new APIs after a 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
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.
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 declare logo API in the theme?
Now, I will discuss the rules of using the logo API for 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 on 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.
Leave Your Comment