I think I need to start by saying that this post is in no way a complaint about StudioPress themes or the Genesis framework. I switched to Genesis and StudioPress late in 2012 and I couldn’t be happier. In fact, I’ve been systematically going through my existing websites and converting them to StudioPress from, well, what they were before. 🙂
Having said that, a theme provider like StudioPress sells themes to the masses, and they need to make them as usable as they can for a large number of people. I suspect that reasoning influenced how they decided to handle incorporating a custom logo image into their themes, namely through using a full-width background image uploaded through the Appearance > Header option.
What’s the problem with using a background image for a logo?
Good question. The first website I built with StudioPress was a redesign of my wife’s website, A Heart for Justice. She first noticed an issue when she was sharing a link on Facebook to one of her blog posts, and her website logo wasn’t one of the thumbnail options that Facebook offered. I thought that was odd, and what I determined was that background images are not available for thumbnails on Facebook, or anywhere else (probably).
There are other issues associated with using a background image for the logo, and for some examples you can browse through the StudioPress forums to see what people are dealing with on their websites. Here’s one example: Outreach template: issues with the header image
Does this really work?
Since working out this solution on my wife’s website I’ve used it on every StudioPress site I’ve built since then, including this one, except for one site that uses text instead of an image for the logo. I can tell you it works beautifully, it’s fully responsive, and it’s part of the core functionality that I add to every website I build.
For some working examples I’ll include a list of websites, by theme, using this technique at the end of this post.
Replace the background image with a real image logo
You can follow these steps in this order, or not, but the important thing is to include all of them.
1. Genesis > Theme Settings
I’m guessing you’ve already done this, but if not, go to Genesis > Theme Settings > Header and change the setting to Image Logo. If you don’t see this option, you probably need to do the next step first.
2. Comment out the “Add support for custom header” code in functions.php
Depending on your child theme you may or may not have this in your functions.php file, but more than likely you do. This example is from the Apparition child theme, but yours will be similar:
You can either comment out the code like I did in this example, or delete it all together. It’s not going to hurt anything to leave it in there, and if you ever change your mind about this you could always uncomment the code to revert back to the way it was.
3. Upload the logo image file
Using FTP (Filezilla is a great choice), upload your logo image to the images directory in your child theme. So for my example, I would upload the file logo.png to wp-content/themes/apparition/images.
I suppose you could do this using the Media Library, but then you’d need to further modify the code in the next step, and you run the risk of you or someone else deleting that image from the Library, leaving your site without a logo.
4. Filter the genesis_seo_site_title function
This is where the real “magic” happens. Genesis kindly included apply_filters in the genesis_seo_site_title function, and by adding the code below to your functions.php file you’ll filter that function to include your logo image there. One benefit of doing it this way is that your logo will then be linked to your site’s home page, as it should be with a website logo.
5. Edit the CSS
Finally, you’ll need to make a few CSS edits in your child theme’s style.css file to finish this process. These will vary somewhat depending on your theme, and how you handle your theme’s responsiveness, but here are the basics, using the Apparition theme as an example:
Probably the most important part to comment out is the text-indent: -9999px; declaration, followed by the min-height and height declarations. Beyond that, and depending on the theme, I would comment out everything that doesn’t need to be there, using Firebug to determine what that is.
6. Remove the site description [Update]
I do this with all my sites by default, though some StudioPress themes, Metro for example, take care of this step for you. If your theme doesn’t have this code in functions.php then you’ll probably need to add it. If you don’t, you’ll see your site description next to your logo and wonder why it’s there.
Examples of sites using this technique
As promised earlier, here are a few sites that I’ve built using this technique for the image logo. You may want to re-size your browser while checking them out, to see what happens to the logo.
This website 🙂
If you found this helpful, let me know! And if you see a way to improve on this method, I’d love to hear about it. If you have questions or you’re having trouble getting this to work, feel free to ask in the comments and I’ll help where I can.