Multiple image logo for theme

Question

My website has a logo and this logo have 2 states (i.e. online and offline ). Each of them has an image that will be uploaded to the media. What I am trying to achieve is that, when hovering on, the state of the logo changes (this can be done quite easy). However, in order to easily keep track of the logo image, I am thinking of allowing the theme to support custom_logo through add_theme_support. This works halfway, meaning I can only control 1 of the image at the moment. Are there any ways I can allow adding 2 different images from the theme customizing (custom logo) and display them? Thanks in advance

Answer 1

I am assuming that by online and offline you mean active states of the logo. I think there are several options for you to use. The first two options can be used within your theme and then are simply changing the image file within the directory.

Option One (not using WP):

You can utilise a simple use of transparancy. Apply a transparent effect to the logo and then on hover, make the opacity full. E.g:

.logo {
    opacity: 0.75;
}

.logo:hover {
    opacity: 1;
}

// If you want to use SASS:

.logo {
    opacity: 0.75;

    &:hover {
        opacity: 1;
    }
}

Option Two (not using WP):

If you need to use imagery instead of an hover effect, then you can try the following (again using classes):

.logo {
    background-image: url('path/to/your-off-image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    width: 200px; // Have to set a width/height in order for the background to appear
    height: 200px;
}

.logo:hover {
    background-image: url('path/to/your-on-image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

// If you want to use SASS:

.logo {
    background-image: url('path/to/your-off-image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    width: 200px; // Have to set a width/height in order for the background to appear
    height: 200px;

    &:hover {
        background-image: url('path/to/your-on-image.jpg');
        background-repeat: no-repeat;
        background-size: cover;
    }
}

Option Three (using the customiser in WP):

Taken from the WP Customiser Docs

With this option you have to register the setting using the following:

function mytheme_customize_register( $wp_customize ) {
    //All our sections, settings, and controls will be added here

    $wp_customize->add_section( 'my_site_logo' , array(
        'title'      => __( 'My Site Logo', 'mytheme' ),
        'priority'   => 30,
    ) );

    $wp_customize->add_control(
        new WP_Customize_Image_Control(
            $wp_customize,
            'logo',
            array(
               'label'      => __( 'Upload a logo', 'theme_name' ),
               'section'    => 'my_site_logo',
               'settings'   => 'my_site_logo_id' 
            )
        )
    );

}
add_action( 'customize_register', 'mytheme_customize_register' );

The above code would be added into the functions.php file that should be located within your theme directory. In order retrieve the image you do the following:

get_theme_mod( 'my_site_logo_id' );

And then you would have to break with convention of using inline-styling to output the two different options for the logos, on hover.

Please check out the codex to check over the various options you may have in order to achieve what you are after.

Answer 2

When you use add_theme_support('custom-logo'); the logo uploader that is added to the Site Identity Section will use WP_Customize_Image_Control which doesn't support multiple images, its only for 1.

Simpler solution:

Add a second control just below the one WordPress one with this code:

function your_theme_customizer_setting($wp_customize) {
// add a setting 
    $wp_customize->add_setting('your_theme_hover_logo');
// Add a control to upload the hover logo
    $wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, 'your_theme_hover_logo', array(
        'label' => 'Upload Hover Logo',
        'section' => 'title_tagline', //this is the section where the custom-logo from WordPress is
        'settings' => 'your_theme_hover_logo',
        'priority' => 8 // show it just below the custom-logo
    )));
}

add_action('customize_register', 'your_theme_customizer_setting');

use it with get_theme_mod( 'your_theme_hover_logo' ).

Complex Solution:

Create your own custom control that will accept 2 images.

Answer 3

you can have only one image as a logo by default but this can be extended to two by another custom control in wp customizer.

another solution is to use a single image with both active and hover states into it. and control the view with css position property like old way of using image icons.

for example you could have an image height of 100px. 50px will contain by default logo and another 50px will contain hover state of logo. then by default show the 0px to 50px height of image and when its active or on hover state change background position to 50px to 100px. the image wrapper height should be 50px with overflow:hidden

Answer 4

Advice against bothering with the customizer for this. It is easier to find, override and change a logo with is part of a CSS file than trying to figure out where did you put the option to control it. The amount of effort required to code and test a solution has no justification. Additional advantage is that all the code can be put under GIT and track the logo changes.

(Obviously themes that are being distributed need such an option, but IMHO for a site specific theme it is a useless feature)