How to add CSS class to custom logo?

Question

I enabled custom-logo for my theme and have it printed with <?php the_custom_logo(); ?> into the header. Is there any chance to simply add some more classes to this image directly? Per default it only comes with custom-logo.

Answer 1

WordPress provide a filter hook to custom logo customization. The hook get_custom_logo is the filter. To change logo class, this code may help you.

add_filter( 'get_custom_logo', 'change_logo_class' ); function change_logo_class( $html ) { $html = str_replace( 'custom-logo', 'your-custom-class', $html ); $html = str_replace( 'custom-logo-link', 'your-custom-class', $html ); return $html; } 

Reference: How to change wordpress custom logo and logo link class

Answer 2

Here's one suggestion how we might try to add classes through the wp_get_attachment_image_attributes filter (untested):

add_filter( 'wp_get_attachment_image_attributes', function( $attr ) { if( isset( $attr['class'] ) && 'custom-logo' === $attr['class'] ) $attr['class'] = 'custom-logo foo-bar foo bar'; return $attr; } ); 

where you adjust the classes to your needs.

Answer 3

As you found yourself the_custom_logo relies on get_custom_logo, which itself calls wp_get_attachment_image to add the custom-logo class. The latter function has a filter, wp_get_attachment_image_attributes which you can use to manipulate the image attributes.

So what you could do is build a filter that checks if the custom-logo class is there and if yes add more classes.

Answer 4

Just for anyone else that's looking for solutions. I found this, which I find much clearer than the accepted answer.

Plus it gives simple ways to change the URL on the link as well! Just a little more detailed than the accepted answer.

add_filter( 'get_custom_logo', 'add_custom_logo_url' ); function add_custom_logo_url() { $custom_logo_id = get_theme_mod( 'custom_logo' ); $html = sprintf( '<a href="%1$s" class="custom-logo-link" rel="home" itemprop="url">%2$s</a>', esc_url( 'www.somewhere.com' ), wp_get_attachment_image( $custom_logo_id, 'full', false, array( 'class' => 'custom-logo', ) ) ); return $html; } 

Answer 5

I think I found one answer. But I really wonder if this is the right way? It feels a little bit dirty somehow: I simply copied the logo related parts from wp-includes/general-template.php into my theme's functions.php and renamed the functions with some custom classes added:

function FOOBAR_get_custom_logo( $blog_id = 0 ) { $html = ''; if ( is_multisite() && (int) $blog_id !== get_current_blog_id() ) { switch_to_blog( $blog_id ); } $custom_logo_id = get_theme_mod( 'custom_logo' ); if ( $custom_logo_id ) { $html = sprintf( '<a href="%1$s" class="custom-logo-link" rel="home" itemprop="url">%2$s</a>', esc_url( home_url( '/' ) ), wp_get_attachment_image( $custom_logo_id, 'full', false, array( 'class' => 'custom-logo FOO-BAR FOO BAR', // added classes here 'itemprop' => 'logo', ) ) ); } elseif ( is_customize_preview() ) { $html = sprintf( '<a href="%1$s" class="custom-logo-link" style="display:none;"><img class="custom-logo"/></a>', esc_url( home_url( '/' ) ) ); } if ( is_multisite() && ms_is_switched() ) { restore_current_blog(); } return apply_filters( 'FOOBAR_get_custom_logo', $html ); } function FOOBAR_the_custom_logo( $blog_id = 0 ) { echo FOOBAR_get_custom_logo( $blog_id ); } 

Answer 6

You can use get_custom_logo_image_attributes filter

add_filter( 'get_custom_logo_image_attributes', function( $custom_logo_attr, $custom_logo_id, $blog_id ) { $custom_logo_attr['class'] = 'your-custom-class'; return $custom_logo_attr; } ,10,3); 

Answer 7

Just one minor change to the @Dhinju Divakaran response above. Replace the "custom-logo-link" string first and then the "custom-logo" as "custom-logo" in "custom-logo-link" was also getting replaced. Below is the updated code.

function change_logo_class($html) { $html = str_replace('custom-logo-link', 'navbar-brand', $html); $html = str_replace('custom-logo', 'img-fluid', $html); return $html; } add_filter( 'get_custom_logo', 'change_logo_class' );