I’m currently in the process of migrating the older WordPress themes in my catalog to utilize the core custom logo functionality, instead of a theme-specific WordPress Customizer option.

Along the way I ran into a bit of a snag, so here’s a quick tip on how I improved the custom logo WordPress Customizer shortcut.

Why?

I’m adding support for two main reasons. First, the process of theme switching is less burdensome for users, as their site logos will remain in place upon changing themes. Secondly, the core custom logo feature uses selective refresh, allowing for super-fast editing without refreshing the window. I’m all about improving the user experience, so this is a win on all accounts!

The issue

While working in the feature, I notice that the shortcut button, that links to custom logo uploader within the WordPress Customizer panel, did not always display quite right. Here’s what I mean:

In some themes it’s positioning is fine, but in others it needs a little rethinking. I wanted the shortcut to look just right, no matter how large or small the uploaded image is. This is particularly important in my themes, as they have a range control to set the display size of the logo, essentially adding “retina” support.

The end result

After a bit of trial and error, I successfully style the shortcut, so that the button is vertically centered — regardless of the logo size.

Pretty cool eh!?

Closing

Below you’ll find the styles I used to adjust the positioning. I added the SCSS as a separate module to load in the theme’s style.scss stylesheet. Note that I’m first checking for the .customize-partial-edit-shortcuts-shown class, to ensure the styles only take affect if those shortcut buttons are available within the WordPress Customizer.

That’s it! Let me know if you have any questions, suggestions, or other quick tip ideas. If you’d like more WordPress theme development tips, check out my article on getting approved on ThemeForest. Cheers!