When creating Genesis-based sites for clients, a frequent task I need to do is to set their logo instead of the text that is displayed in the header by default in most Genesis child themes.
How do I go about that?
It’s actually a very easy thing to do.
Step 1
Upload your logo into the theme’s images folder.
You will have to use an FTP program like FileZilla to do that, or you might also do it through the cPanel provided by your host.
Step 2
Genesis child themes are set up with compatibility for the custom header functionality provided by WordPress. We won’t be making use of it, so find the piece of code related to this in your theme’s functions.php file and comment it out.
In my current child theme, Executive, this is what I have by default:
[php]
/** Add support for custom header */
add_theme_support( ‘genesis-custom-header’, array(
‘width’ => 1140,
‘height’ => 100
) );
[/php]
So I went ahead and commented that part out.
Step 3
Go into your child theme’s CSS and set the header background to be your previously uploaded image.
[css]
#header { background: url("images/logo.png") left no-repeat; }
[/css]
That’s it! Your custom logo should now display in your header.
Bonus Tip: Adding the Responsive Magic
Since responsive is the way to go, and most Genesis child themes are already responsive, lets take care of that too.
In many designs, the logo starts out on the left within the laptop/pc/monitor design size, but is then centered on lower resolutions (iPad, iPhone, etc.).
Genesis child themes include breakpoints in their CSS which change the way things are displayed at certain sizes. So lets say that we wanted our logo centered on any screen size below 768px.
We need to find the styles pertaining to this breakpoint, and add our new header style, as follows:
[css]
@media only screen and (max-width: 767px) {
#header { background: url("images/logo.png") center no-repeat; }
}
[/css]
You can see that I’ve centered the logo instead of left aligned it. You can also use a different logo for lower resolutions, as follows:
[css]
@media only screen and (max-width: 767px) {
#header { background: url("images/logo-mobile.png") center no-repeat; }
}
[/css]
Any questions? Fire away in the comments section below.
If you enjoyed this post, make sure to subscribe to WP Mayor’s RSS feed.
28 Responses
I hate to add code to themes because I usually mess it up. But this worked like a charm. Thanks!
Article is really cool. got my issue resolved.
Nice work , brother.. Jean
Jean thx for the tutorial, i have changed logo but when i try to load site on iphone its showing the genesis framework text instead. everything working on desktop and ipad.. just this one issue. any help would be greatly appreciated. thx
Just added logo to my site thanks for the help
Thanks i was trying to change logo of my genesis child theme from last 2 days.Finally Changed my logo 🙂 Thanks a lot man!!
thanks a lot.. thats what i was looking for
Welcome Ankit.
and the big question is how could we remove the logo…
How can we make the logo clickable? This questions has been asked in the comments but couldn’t see any answer for it yet.
Actually, I figured it out. You just set the page as a landing page in layout.
Can you tell me how to remove the subscribe button on the top of the page on the Word Press, Genesis Minimum Theme. I just want to remove it for one page – the page I created for people to go to after they hit subscribe.
Hi, how do you turn off the mobile theme option on/off and keep it off by default since we are already using the genesis framework which is reponsive?
Thanks for the tutorial, after following the steps, when I click on the logo it does not take me to the home page, and although it is not mandatory for it to be that way, it is kind of an standard. Would it be possible to add a link from the logo to the homepage? (Sorry if my question is too naive) thank you again!
thanks alot! It works, note: when I removed the line of code from my functions.php the logo option in Genesis Theme Settings started showing so I had to disable dynamic text and select “logo”.
you could put a slideshow plug in in the header
just use one pic and use the url to link the pic
or
if you are happy with the widget area use a text widget in header right or what you have avail in widget area
use html code in your text widget
?Title<img src="?Pic URL" width="?" height="?"
not sure if the html code would work directly in the header im only a newb
Hi Jean, great post. I am trying to figure out how to add a URL to my header image. Currently my custom header image is just a passive image that shows on every page. I’d like for a user to click on it to be able to go to the home page. Any thoughts on how best to achieve this? Thanks!
Do we really need to use FTP to upload custom header? No. You add the support for custom logo and you can upload the image from the custom header page.
About responsive header, if you’re looking for a simpler version, try search for “Genesis Responsive Header” plugin by designbynickthegeek.com
“Do we really need to use FTP to upload custom header? No. You add the support for custom logo and you can upload the image from the custom header page.”
Rudd, can you please explain how to do what you have suggested? Thanks!
Hey Jean,
After perform all the above changes, the logo is showing but site title is also showing over logo. Please help me, should i did some mistake or it require some more changes?
Useful post Jean. Do you know how to get facebook, twitter and rss buttons in the top right of first navbar?
Hi Jijin, if I understand what you want to do correctly, that would be through a widget.
Matt, no, don’t remove any of that code. Simply add the line to the bottom of your style sheet.
Jean, nice tutorial! I just referred someone to it on the StudioPress forums.
Glad you found it useful Charlie!
Thank you for the article. I’m in the process of building goodnewsalliance. I am using a child “news theme” Is this what i am supposed to “part out”
/* Image Header – Partial Width
———————————————————— */
.header-image #title-area,
.header-image #title,
.header-image #title a {
display: block;
float: left;
height: 110px;
overflow: hidden;
padding: 0;
text-indent: -9999px;
width: 465px;
}
.header-image #description {
display: block;
overflow: hidden;
}
Does “part out” mean completely remove?
Do I replace all of below with this one line?
#header { background: url(“images/logo.png”) left no-repeat; }
Perfect timing – just had this question with my site redesign I did this weekend. I like the responsive pieces as well, because I’m having some issues with that right now. Thanks for the post.
Welcome Jeff.
Genesis chooses to leave things out because it works in the same vein as WordPress, which prefers to have things added via plugins rather than bloating the core. You will find quite a number of Genesis plugins in fact.
The logo issue is one that bothers many users, but adding a logo uploader is not quite in the spirit of leanness and flexibility that Genesis is so keen upon.
Agency uses very similar code to Executive (the one referenced in my post), so you should be able to follow the instructions to the letter and have your logo showing at the end.
I’m somewhat new to Genesis and have been pulling my hair out trying to find out how to do a custom logo. Genesis (or WP?) in Agency Theme wants to use a header of 960×115 I think because of this code:
/** Add support for custom header */
add_theme_support( ‘genesis-custom-header’, array( ‘width’ => 960, ‘height’ => 115 ) );
and will ask you to “crop” any image that is smaller and then makes it larger!
Is that what this code is doing:
Is that why we have to take it out?
[editorial] Why did Genesis make it so difficult to do a custom logo/header when every other framework/child theme (especially Elegant Themes) makes is so easy! [/editorial]