BugWP logo BugWP
Back to Community
Home / Community / Plugin → Kirki customizer framework

How to Change or Remove the Kirki Customizer Loading Logo

26 threads Sep 7, 2025 Plugin → Kirki customizer framework

Content

Many theme developers use the Kirki Customizer Framework to build powerful and user-friendly theme options. A common point of customization is the loading animation that appears in the WordPress Customizer preview while settings are being applied. By default, this features the Kirki logo. Some end-clients may prefer to see their own logo or no logo at all during this loading state.

Why You Might Want to Change This

The loading logo is a visual indicator for users. However, for white-labeling a theme for a client or simply maintaining brand consistency, you might want to replace the Kirki logo with a custom image or remove it entirely. The good news is that the Kirki framework provides built-in methods to handle this.

Method 1: Using the Official Configuration Filter (Recommended)

The Kirki team has added a dedicated configuration option to disable the loader. This is the cleanest and most future-proof method. You can add the following code to your theme's functions.php file or a custom functionality plugin.

add_filter( 'kirki/config', function( $config ) {
    $config['disable_loader'] = true;
    return $config;
} );

This snippet uses the kirki/config filter to set the disable_loader parameter to true, which will completely remove the loading animation and logo from the preview.

Method 2: Custom CSS Override

If you need more control and want to replace the logo with your own image instead of removing it, you can override the background image using CSS. The following example shows how to inject custom CSS to change the logo.

function my_theme_custom_loading_logo() {
 ?>
 <style>
 .kirki-customizer-loading-wrapper {
  background-image: url("https://yoururl.com/pathtoyourimage/image.svg") !important;
 }
 </style>
 <?php
}
add_action( 'wp_head', 'my_theme_custom_loading_logo', 100 );

Important Note: Replace the URL in the background-image property with the direct path to your own image. The !important rule is necessary to ensure this style overrides the default Kirki styling.

Troubleshooting Tips

  • Cache: After implementing either solution, remember to clear any caching plugins or server-side caches you might be using to see the changes immediately.
  • Specificity: If the CSS method doesn't work initially, check your browser's developer tools to ensure another CSS rule isn't overriding your custom style. You may need to make your CSS selector more specific.
  • Child Theme: Always add this kind of theme customization code to a child theme's functions.php file to prevent your changes from being lost when the parent theme is updated.

By using one of these two methods, you can easily customize the Customizer preview experience to better fit your or your client's branding needs.

Related Support Threads Support