Add Retina Logo to a Genesis Template

Retina or high definition screens are pretty common now. Making your whole site Retina compatible is a major project, but at minimum, your logo and header area should be Retina ready. Genesis Framework templates do not have a function for adding a retina logo.  The following tutorial explains how to add a Retina logo to a Genesis template (Works with WordPress Templates too but you have to find to correct css rules to modify).

Difficulty Level: Intermediate

This tutorial requires that you edit two template files: functions.php and style.css. In addition, you need to provide a Retina and Standard logo image.

Step 1: Create a Retina and Standard Logo Image

The Retina logo must be twice as big as your standard logo. For example, if your custom header logo is 250px by 110px, then your Retina logo must be 500px by 220px (See Step 2 to determine your custom header image size).

It’s important that you create the logo at the Retina size and then reduce that image for the standard logo, not the other way around.

Also, I use the following convention for naming the logo files. You can use whatever you want, but this helps you avoid confusion about which image is which:

• Standard Display Logo: logo.png
• Retina Display Logo: logo@2x.png

Step 2: Upload Standard Display Logo

Go the Appearance > Header and upload the standard logo image you created.
IMPORTANT: This is not the Retina image.

If you don’t have a Header link under Appearance, you can add this function to your theme by pasting the following code into the theme’s functions.php file:

You can adjust the width and height of the logo in the code above. Note that WordPress will crop the image if it’s bigger than the Custom Header width and height.

Upload the Retina Logo

Upload the Retina image to /wp-content/themes/your-template/images

Add CSS Rules for the Retina Logo Image

Add the following CSS rules to the end of your style.css file
/wp-content/themes/your-template/style.css 

You can adjust the min-height and background-size rules to fit your logo size.

Also, you might have to adjust the min-height and width rule on the title-area and site-title rule: set the min-height to the same height as your standard logo height.

For example, the standard logo height in this tutorial for min-height is 110px. Search for the rule below and change it to match your standard logo width and height.

Testing Standard and Retina Logo

In order to test your standard and Retina logo, you will need a device with a standard display and a device with a Retina display. If you don’t have a Retina laptop, you can use an iPhone or iPad with Retina display. If you don’t have a standard display, you can test it using a browser testing service like http://browserstack.com.