Today we’re talking about logos, specifically how to add your logo to a Genesis child theme.
Before we get started, I’m going to make you do a quick test. Don’t worry – it’s easy.
Does Your Theme Support a Custom Header?
This is the question you need to answer before we move on and it’s easy to find out. Go to your WordPress dashboard, look at the Appearance menu and see if Header is listed as an option.
If the answer is YES, that means your theme has added support for a custom header. You don’t need this tutorial since you’ve got built-in support for a header image. So there, it’s like I just gave you 5 free minutes. You’re welcome!
If the answer is NO, that means I’m about to teach you how to add a logo. You don’t get the 5 free minutes, but you DO get knowledge.
So, NO crowd proceed with me. YES crowd, go enjoy the rest of your day and we’ll catch you next time.
Configure the Header in Genesis Theme Settings
Genesis themes without support for a custom header come with a nifty option to specify a dynamic text title or an image logo.
Select “Image logo” from the drop-down and don’t forget to save your settings before leaving the page.
Now You’re Primed and Ready to Add a Logo
Step 1.
You need to upload your logo file to the server. You can either do this via the WordPress Media uploader OR you can put your logo in your theme’s images folder. The latter way is a more logical option since the Media Library should be used for content and your theme’s images folder should hold design elements.
Whichever you choose, grab the URL to your image. You’ll need it shortly.
Step 2.
So far what I’ve discussed applies to any Genesis child theme. From here on out I’m going to get specific with some code examples that you may need to tweak, depending on what child theme you’re using.
For this example, I’ll show you how to add a logo to the Utility Pro theme.
Open up the theme’s style.css file in a text editor.
We’re going to use the CSS background property to show our image. We need to identify where in the CSS we should show the logo.
To do that, I recommend using a tool Chrome’s Developer Tools to “inspect” the code.
Step 3.
View your site in a browser, hover your mouse over the site title and right-click. From there click “inspect” to view the underlying CSS.
Now you should be viewing the HTML and corresponding CSS behind your site title. Using the Utility theme as an example, this is what it looks like:
Notice the site title appears within a div with the title-area class. When you changed your theme settings to allow an image logo instead of dynamic text, you get a little bonus CSS. Can you see it?
It’s .header-image .title-area – That’s the MONEY. That’s the CSS class we want to target for our background.
title-area in your theme, too. As always, there’s a chance your theme is weird and you’ll look for a different class. 😉Step 4.
We’re getting close. Can you feel it?
Copy the URL for your image file you grabbed in Step 1. Head over to your style.css file you opened in Step 2. Find the appropriate CSS class you identified in Step 3.
In addition to the other attributes already in your stylesheet for .header-image .title-area add this:
.header-image .title-area {
background: url(http://yourwebsite.com/logo.png) no-repeat;
}
To get a better understanding of how the background property works in CSS (and various attributes you can use), read this.
Don’t forget to save your style.css file and upload it to the server!
Step 5.
Refresh your browser and reward yourself. You *should* see your logo at this point. It’s possible that your logo is cut off (in which case you’ll need to tinker with the height and width properties).
Want More fun with logos?
Why choose between a site title or a logo when you can have both! Here’s a tutorial to teach you how to add a logo before your site title.
This is awesome… hopefully people use the custom header option less and less as doing it the way you’ve described here is less error prone and causes less issues later on!
Thanks Ozzy! Not to mention it’s easier to style to logo for responsive breakpoints this way…
Nice and enlightening…but my child theme (Epik) does not have an image logo/dynamic title option, how could I proceed ?
Gee, just saw I have a “Header” option under appearance…just answered my own question…sorry and thanks *blushes*
No worries – chalk it up to this is the “something new” you learned today and now you’re off the hook for the rest of the day. 🙂
LOL – “Off the hook” ha!
I love Genesis, but I think all themes should have the Header option under Appearance. It’s not rocket science to add a logo through FTP, but still… It is a pain for many people. =/
Yeah, I hear ya. I prefer the “manual” method since the header is usually full width and overkill for a logo (i.e. a 200px wide logo with 700px of white space…).
Would be great to have a specific logo uploader as opposed to a full header.
I’m in the camp that loves a theme which doesn’t have a Header option under Appearance, because that doesn’t help if you have a mobile responsive site and a full width header. I wish all themes automatically came built in with something like the Genesis Responsive Header option, so it would be easy to style those full with headers for mobile devices.
Of course, it’s easier if you just use a logo which is less than 240px wide, but when you work in my niche, most of my clients want that big, beautiful, full width header…
great tutorial, Carrie! I’m feeling guilty that people like yourself are so giving with tutorials and such, while people like me just soak it all up. Someday will have to start making a contribution of some sort… thanks again
forgot to mention… I kinda already knew how to do this, but it’s great to have a better understanding exactly what is going on (the “why”)…
Don’t feel guilty – just take yourself straight to a support forum and find a question you can answer.. DO EET. 🙂
My client wants the logo to click back to the homepage. Is there an additional step to making the logo go back to home. I assume I need to add a href tag?
Hi Laura,
Great question! A link is automatically applied to the
title-areaspace using the site URL. You may need to find.title-area ain your stylesheet and make sure the width on that block element matches the width of your logo. Otherwise, it should work pretty much out of the box.Post a link to your site if you get the logo up and have trouble with the link.
Carrie
Dun dun duuuuuunn!!! Great article Carrie! Check out what I just made =D http://surefirewebservices.com/downloads/genesis-logo-uploader-plugin
Awesome!!
You should donate that code , not charge ….just saying 🙂
Hey Joseph,
Why on earth wouldn’t he charge for it? There’s obviously value to you in what he’s created. Your comment may have been tongue in cheek, but people like Jonathan spend many, many hours donating and contributing to the WordPress community, so if there’s an opportunity to monetize it, I support it 100%.
Carrie
While on this topic, I would like to share these relevant blog post: http://sridharkatakam.com/add-responsive-header-image-metro-pro/, http://sridharkatakam.com/add-responsive-image-site-header-genesis/
Thanks Sridhar!
Also, you could put the following in functions.php, and simply enable your first option under Appearances. That also lets you easily switch them out and adjust the size whenever you want:
/** Add support for custom header */
add_theme_support( ‘genesis-custom-header’, array(
‘width’ => 350,
‘height’ => 150
) );
‘genesis-custom-header’ theme support is considered deprecated – use the WP native ‘custom-header’ instead. It has a few differently named arguments, but it’s ultimately the same thing.
Genesis 2.0 currently translates ‘genesis-custom-header’ arguments and then calls add_theme_support( ‘custom-header’, $args ); anyway.
Why not just use the header ID / site-header class?
.site-header OR #header
{
background: url(http://xxxxxxxpng) no-repeat;
}
The element with the .site-header class covers the site title, site description, header right widget area, and anything else inside the site header – and it would be unusual for a logo to cover that (a logo is different to a header image).
I’d say that the element given in the tutorial is still to general. Why should a logo cover both the site title AND the site-description? A logo in this instance represents the name of the company / site, so really should be only replacing the site-title, or perhaps even more accurately – the anchor inside the site-title. The site-description can then either be shown, or hidden, completely independently.
Nice tutorial man !!
I’m feeling guilty that people like yourself are so giving with tutorials and such, while people like me just soak it all up. Someday will have to start making a contribution of some sort… thanks again
There’s no time like the present to start contributing! 🙂
Hi Carrie, thanks for your awesome tutorials. I have an issue with uploading the logo. As per the quick test of the article, I have the “header” located under appearance. I then uploaded the logo image and found 2 things, 1. I made sure to unclick the “show header text with your image” as I only want the logo to be shown. This option however is not viable because the box ticks itself as soon as I save the changes to settings. Resulting in the text and logo overlapping each other. Is there any code I can change to resolve this? 2. The logo may be too big for the header height as part of the logo cannot be seen. How can I change this?
Thanks Carrie!
Hi Suzanne,
What theme are you using?
The text overlapping the logo can be fixed by adding something along the lines of
text-indent: -9999px;to your site title style (effectively shoving it off the screen). If the tick box is acting strangely, it sounds like there’s a conflict with something else in your theme. Are you using any plugins related to the header or logo uploads?In your functions.php file you’ll see the code that generates the height/width specs of your logo. You can change those to be whatever size you need (that’ll change the upload size available in Header upload image). You may need to edit your CSS size specs for that title area to accommodate the larger logo.
Cheers,
Carrie
Hi Carrie,
thanks for your response, apologies for the late reply! I am using Minimum theme.
I will definitely check out my plugins and see whether there is any header related plugins. I will also try out the other steps you have so kindly provided in your response.
I will check back with my success (or not!), thanks again!
Cheers,
Suzanne
Hey Carrie,
it’s me again! Just wanted to let you know, it’s all sorted now! 🙂 I have my logo all uploaded without any other complications except maybe just tweaking the size of the logo a little. Thanks very much for your help!
Cheers,
Suzanne
Hey Carrie, great information. Thank you very much 🙂 I was just wondering if you could recommend a good logo design product to help me out with my clients?
Hey Nate,
I’ve never used any of the “logo in a box” services/tools, so not sure about those. I have a couple of designers I refer the work out to – the cost is a little higher, but I always get a quality product. Ping me through my contact form and I’m happy to share my secret weapons. 🙂
Carrie
How do I insert a background image behind the logo?
Hi Aaron,
In your stylesheet you can use the background property: http://www.w3schools.com/cssref/pr_background-image.asp
Carrie
Im confused on where the body is in my stylesheet. I only see that under Typographical…?
hi, i create a new plugin for genesis theme for upload with that you can upload logo from backend.
http://buykodo.com/product/upload-genesis-logo/
hopefully you will like this 🙂
Hey Carrie!
Thanks so much for the tutorial! I was wondering if you could help me 🙂 I’m working on a site for a client and she requested that I make her logo link to her homepage. I had initially installed the header using CSS, and now when I try using the Genesis upload custom header function (under appearance > header ) the CSS file overwrites this. Any help would be greatly appreciated 🙂 thank you!!!
You can use the Genesis Club Lite plugin – it does responsive logos and more. I use it every single day (obviously!)
http://wordpress.org/plugins/genesis-club-lite/
Liz
I suppose that for the average no/low-tech user of Genesis this logo plugin is a good thing; but a developer like you using it “every single day?”
I don’t get it.
We won’t use a plugin for a client site for a task that can be easily done in CSS because as every developer knows, if there is anything that is prone to break in WP, it will not CSS and it will not be Genesis, and it will not be the child themes… it will be plugins.
In our shop, the fewer plugins the better.
YMMV.
If you looked at the plugin, Liz is the developer, so I’m sure she feels pretty safe using it on her sites. 🙂
Plugins aren’t bad, especially if you’re creating them yourself to use/re-use on your client sites – you can improve your efficiency by saving time on redundant code. Of course, it all goes back to the quality of the plugin – of course something in the repo could be of dubious quality, but if you trust your own code, making your own plugins is a great option.
Oh, I do apologize. I thought it was Carrie who wrote the post. I failed (with 66 year old eyes) to see that it was not her but LIz, who developed the software, who made the post.. Well, of course she would use her own code every day!
Pay no attention to me. I’m an idiot.
Al
OMG you’re a ROCK STAR!!!!!!!!!! I was TOTALLY able to add an image to my header! Thankyouthankyouthankyouthankyou!!!
Well, hey. I like your tone. 😉
Cheers,
Carrie
Thanks Carrie Dils. I do it for my site. Well it’s quite good. The only thing I can’t setting is alt property of my header logo 🙂
http://sridharkatakam.com/add-responsive-wide-header-genesis/
I hate to add code to themes because I usually mess it up. But this worked like a charm. Thanks!
Nice site Carrie.
I’m very to new to Gensis (still researching). Quick question – the third-party child themes for Genesis are quite low end in features – not very robust as compared to WP themse (on Themeforest etc). Might you have any links to some premium themes for Genesis (already looked at zigzagpress, studiopress, themedy etc.) I couldn’t find a link on your site.
Thank you in advance.
Carl
Hi! Thanks for your comment. You bring up a very important distinction between themes and features. Generally speaking, functionality belongs in plugins, while design components belong in themes. In other words, it’s a poor practice to include a slider in a theme. The reason being that themes quickly become bloated with features that weigh down a site, plus if you ever want to change themes, you have to re-work all your content that previously depending on a specific theme’s functionality.
The beauty of themes and plugins is the ability to split out the interface/design from the “guts” of functionality. I’m not sure of any Genesis themes that include the sort of features you’re requesting and honestly wouldn’t recommend one that did. I’d focus more on finding a theme you like visually and then piecing together plugins as need to add features.
Just my two cents. 🙂
Cheers,
Carrie
Awesome, just what I was looking for! Thanks!
Hi,
I went through and made the changes you suggested. However, the default “Genesis Theme” logo is still showing behind my custom logo.
How do I remove the Genesis Framework logo?
Thanks,
Robbie.
Thank you so much Carrie! It worked like a charm!
Hi Carrie
thanks so much for your tutorial, which was very helpful when I was trying to get a custom, full-width, responsive header clickable back to the homepage in the Innovative child theme.
If anyone’s interested here’s the exact method I used, which you might be able to adapt to different child themes: Responsive Headers for Genesis and especially the Innovative Theme.
cheers, Jo 🙂
That’s awesome idea! I was trying to solve this problem via themes file such fuction.php or something like. But I was not thinking of these tricks. Now I can add image in my client site within 5-10 minutes. Great thanks to share this technique.
Hi Carrie,
I’m new to genesis and really love your site in order to learn how to use and customize genesis. Great job!
I’ve tried this tutorial but I have a problem… My logo appears but the text “Genesis framework” and tagline “support HTLM5 and mobile Responsive design” is still there… What am I missing??
It’s a fresh installation of genesis and I have chose the option “image logo” ..
Any idea?
Kind regards
Chrys
Hi Carrie,
Problem fixed ! It was the media queries that made the studiopress logo keep its place. So this may help someone else, if the studiopress logo won’t go away, look as well in the media queries and change the url there.
For genesis sample, you should look at
.header-image .site-header .wrap {
background: url(images/logo.png) no-repeat left;
background-size: 320px 164px;
}
Cheers !
Ah! Thanks so much for posting your solution – you’re paying it forward. 😉
Cheers,
Carrie
Hello Carrie….I have a problem here..i followed all the procedure as you said….but it is showing default logo the theme also and my uploaded logo also…site is looking very bad like that…Would like to know solution for it thanks in advance !
Nice Guidelines for setting logo thanks lot
Great tutorial. Thanks for posting.
When I try this, the header image works fine on laptops, but when I view my site on an iPad (both iPad Mini and full size iPad), a small part of the right hand side of my header image is clipped (i.e. a small vertical strip at the right of the header image is cut off). I think the problem has something to do with media queries. Do you have any ideas how to fix this?
Hello
I don’t have a dynamic image option to my genesis child theme so i followed the instructions here I succeded but why the site title wont disappear after I put the logo on the header? how to get rid of it
Hi, there should be a checkbox on the logo upload screen (Appearance > Header) where you can opt to not display the title.
You just saved me 5 minutes
Dang. I was hoping for at least 6. 😉
Hello Carrie, I did not have any issues uploading my own logo rather my problem was to make it responsive. I have a full width header image (1080 px) and I want it to scale down as I shrink the window. When I make the browser narrower, the header image overlaps the div and only some of it remains visible. I have tried couple of plugins and media queries but they all failed. Why is it such a pain to customize the header in Genesis?
Hello
thanks for grteat article, what would you recomend be the right size: ie, 320×120-360×120 etc
Hey David,
The smallest phone width (iphone 4 I think) is 320, so I’d probably use that as my max width for a logo. As for the height, I don’t have a set rule, but definitely wouldn’t make it too tall.
Cheers,
Carrie
Life saver!! I was able to add the header option under the appearance menu. This was killing me for days. Thank you so much for sharing your wisdom 🙂
So glad to hear it – thanks for sharing!
Wow to simply changing a logo it takes so much coding…Genesis is indeed a very easy to customize theme.
What an amazing tutorial! People look at this challenge and think it’s impossible but you’ve explained it so well to make it possible for a kindergartner!
I don’t know about kindergartners… 🙂 Thanks, Ruben!
Hi Carrie,
Can you please help me to find above header section as I’ve to place above head in my WordPress website which has genesis theme, but I couldn’t found the section where the tag to be place.
I’m looking forward to your help soon.
Thanks,
Aslam
Hi Aslam, I suggest installing the Genesis Visual Hook Guideline plugin. That will help show you where you need to hook in for your particular theme.
Thank you so much for the good help, You’ve saved me from huge stress; of which i’ve been trying all since from morning
My Blog header image now works fine and looks more awesome to my visitors
Yay!! I’m glad to hear it. 🙂
SO helpful! I was finally able to fix this and it was driving me crazy!
Hi Carrie,
I tried using your instructions, but when I change the theme settings from dynamic text to image logo it my CSS Hero inspector didn’t add the .header-image part to the script
Any tips?
Are you using the latest version of Genesis? What child theme are you using?
Okay, I just tried updating Genesis to the latest version and did it again. I still don’t get that script. I get this
/* Header Title Area */
.title-area{
}
I am using just the free child theme that comes with it when you download Genesis.
Thanks so much
🙂 Kym
Hmm… this didn’t work for me. Not sure why. I’ll have to contact the Child Theme designers.
Hi,
I was able to implement the logo to my site however I want to implement two logos of different color which changes on scroll.
I am using the theme vanish
Please help me figure this out
Thank you
Dlab
Great tutorial, I also signed up to lynda.com to watch your other genesis related tutorials. I Don’t know if anyone else has had this issue but i spent a good hour trying to figure out why the sites tagline was displaying over the top of the logo i added into a theme using this tutorial. Anyways the solution was to go to Genesis > SEO Settings > and untick “Add site description (tagline) to on home page?” > Save = problem now solved, Anyways thanks for your awesome tutorials!
Turning your business into a brand is no easy task, but the branding firm. Best tutorial i had ever seen
I agree and wish they have a specific logo uploader. By the way, is there a way to shift my image logo to the left instead of having it centred, or am I missing something from your tutorial?
Hey Jude, you can do that by changing the CSS that’s styling the logo.