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.

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.

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.

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.

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.