How to Set Your Own Logo in a Genesis Child Theme

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?
Table of Contents

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.

Jean Galea
Jean Galea
Jean Galea is an investor, entrepreneur, and blogger. He is the founder of WP Mayor, the plugins WP RSS Aggregator and Spotlight, as well as the Mastermind.fm podcast. His personal blog can be found at jeangalea.com.

Consider sharing this post so others can find it:

Stay in the know on the latest and greatest products and services in WordPress [+ Exclusive deals & offers]

28 Responses

  1. 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]

  2. 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.

  3. 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.

  4. Thank you for the article. I’m in the process of building http://www.goodnewsalliance.com 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; }

  5. 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.

  6. Useful post Jean. Do you know how to get facebook, twitter and rss buttons in the top right of first navbar?

  7. 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?

  8. 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

    1. “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!

  9. 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!

  10. 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

  11. 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”.

  12. 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!

  13. 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?

  14. 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.

  15. How can we make the logo clickable? This questions has been asked in the comments but couldn’t see any answer for it yet.

  16. Thanks i was trying to change logo of my genesis child theme from last 2 days.Finally Changed my logo 🙂 Thanks a lot man!!

  17. 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

Leave a Reply

Your email address will not be published.

Everything you need to create a website for less than $100. From your domain and hosting to picking a design, we cover it all.

Join the mayor’s club

Stay in the know on the latest and greatest products and services in WordPress