WordPress 4.5 added the custom logo feature. It’s pretty nice, and where possible I try to use native WordPress functionality, but the default markup returned by
get_custom_logo() isn’t always what I’m looking for. Fortunately there’s a filter included just for this.
So, here’s what I’m trying to achieve. The default custom logo gives us markup that looks like this –
<a href="some-link" class="custom-logo-link" rel="home" itemprop="url"> <img src="some-logo"> </a>
Whereas I’m generally lookng for something like this –
<a class="navbar-brand" href="some-link"> <span class="sr-only">Some Site</span> <img class="img-responsive" src="some-logo"> </a>
I like to include the site title regardless, and just hide it with a screen-reader friendly class when a logo is present. I also like to bake the conditional logic right into my function as a way of keeping my templates a little cleaner. Every little bit helps!
For sarters, the first thing to do is enable custom-logo support. I use Sage, and in versions < 9 I’ll generally drop it in
// Enable custom logo support // https://codex.wordpress.org/Theme_Logo add_theme_support( 'custom-logo' );
And here’s the function I use to filter the markup.
Everything is commented, but here’s the run-down.
- The function is filtering the custom logo function, so it takes that html as its input.
The first thing I do is grab the site name, since I like to always include it with my output.
First I check to see if we’re on the home page – if so I’ll wrap the site title in an H1, otherwise I’ll wrap it in a paragraph tag since those pages will use the H1’s for their own titles. I’ll stash that in a variable called
Now that I’ve got the site title squared away I set up a variable containing the link to the home page,
$homeand a variable to hold my css classes,
Next I set up my
$contentvariable, which serves as my fallback, and check to see if there’s a custom logo.
(I know, I’m kind of variable happy – Here’s why I stash the site title in a variable called
$classremain constant, but
$contentwill get updated if a custom logo is present, otherwise it just gets passed along to the output as is. Make sense?)
has_custom_logo()returns true, I just mirror what’s in the native function, with my own small tweaks. I update the content to include the src to the logo file, then append the title variable, wrapped in a span tag and hidden with Bootstraps sr-only class. Otherwise, the unaltered
$contentis passed along.
Finally, the markup is put together using sprintf, again, mirroring the native function, and returned to the template file.
Since we’re just filtering the existing custom logo function nothing special is required to use it. In a typical Sage 8 site, in my
header.php template, I’ll replace:
<a class="navbar-brand" href="<?= esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a>
<?php the_custom_logo; ?>
The resulting markup looks something like this:
<a href="http://local.wordpress.dev/" class="navbar-brand" rel="home" itemprop="url"> <img width="150" height="150" src="/wp-content/uploads/2013/03/image-alignment-150x150.jpg" class="brand-logo img-responsive" alt="Image Alignment 150x150" itemprop="logo"> <span class="sr-only"><h1>Local WordPress Dev</h1></span> </a>
And the fallback, without a logo added:
<a href="http://local.wordpress.dev/" class="navbar-brand" rel="home" itemprop="url"> <h1>Local WordPress Dev</h1> </a>
That’s it! A quick, nice fallback that leverages various native WordPress super powers. 🙂 Pretty handy.
How do you work with logos in WordPress?