WordPress custom logo and Twitter Bootstrap

WordPress allow select site logo use dashboard. It’s very comfy, because user need not edit code. At the same time, WordPress set self class .custom-logo-link for a container, that contain a logo. If you use Twitter Bootstrap, you’ll may get troubles with layouts and styles, since it use class navbar-brand for wrapper element of the logo, and WordPress use class custom-logo-link.

How to change the custom logo class in WordPress

Resolve the problem

I offer to you 2 ways resolve problem. Each way, good in different ways and what you may use, depends on the situation and your project. In first case, you can more a clean code and you can do anything as you need, however you should have access to source code. In the second case, you just replace class for a logo on that which need you, used hook. In this case template of the theme remain unchanged. Note, for enable support the option select logo in dashboard, you should set next directive: add_theme_support('custom-logo') in the functions.php file.

// Add Support Custom Logo
add_theme_support( 'custom-logo' ); 
// First Way To Better Apply, If You Can Change Source Code And It Acceptable On The Current Project
<a class="navbar-brand" href="<?php echo get_site_url(); ?>">
	<img alt="Logo" src="<?php 
  	$custom_logo_id = get_theme_mod( 'custom_logo' );
    $image = wp_get_attachment_image_src( $custom_logo_id , 'full' );
    echo $image[0];
	?>"/>
</a>
// Second Way To Better Apply, If You Can't Change Source Code 
add_filter('get_custom_logo', 'helloadmin_change_custom_logo_class', 10);
function helloadmin_change_custom_logo_class( $class ) {
	$class = str_replace('custom-logo-link', 'navbar-brand', $class);
	return $class;
}

Sources:

  1. https://helpwp.com/how-to-change-the-custom-logo-class-in-wordpress-theme/

Leave Comment

Your email address will not be published. Required fields are marked *