Skip links

Join 2,509 other smart freelancers!

Sign up to learn how to keep your skills up to date on the tech that matters most and confidently sell your skills to a growing customer base.
I will never spam you. You can unsubscribe at any time.

Reader Interactions


    • 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…

    • Hi Laura,
      Great question! A link is automatically applied to the title-area space using the site URL. You may need to find .title-area a in 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.


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

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

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

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


      • 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!


      • 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!


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

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

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


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


  6. 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 πŸ™‚

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

    • 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. πŸ™‚


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


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

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


    • 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 !

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

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

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

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

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


  15. 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 πŸ™‚

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


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

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

  19. 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 */


    I am using just the free child theme that comes with it when you download Genesis.

    Thanks so much
    πŸ™‚ Kym

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

  21. Great tutorial, I also signed up to 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!


  1. […] what threw me off. In my case, as I was using HTML5 and adding in the logo via my style.css file (Carrie Dils has a great tutorial on this). I didn’t want a ID on the element wrapping the […]

Leave a Reply