How To: Add a Logo to a Genesis Theme

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.

Custom Header Support

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 you want to know how this works, here’s a great tutorial.)

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.

Genesis Theme Settings for Header

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

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 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 like Firebug (for Firefox or Chrome) or Developer Tools (Chrome) 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.

Inspect Element with Firebug

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:

Image Logo inspect

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.

Most Genesis child themes use the same markup for this section of the site, so whether you’ve got HTML5 enabled or not, chances are HIGH you’re going to be looking for 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).

Genesis Office Hours

Still have questions? Join me for Genesis Office Hours and I’ll do my best to get you an answer.

7 day free trial

Comments

    • says

      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.

    • Graphically Designing says

      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…

    • says

      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.

      Carrie

  1. says

    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
    ) );

    • says

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

    • says

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

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

    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!

    • says

      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

      • says

        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

      • says

        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

  4. says

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

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

      • says

        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.

        • says

          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.

          • says

            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

  6. says

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

    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

    • says

      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

  8. says

    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.

  9. says

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

    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

    • says

      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 !

Trackbacks