18

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.

15

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

13

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.

7

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.

2

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 );
}
1

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;   
} 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.